Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
k3sとラズパイでフロントエンド開発に挑戦した話 / Frontend Development...
Search
kenev
June 07, 2019
Technology
0
1.2k
k3sとラズパイでフロントエンド開発に挑戦した話 / Frontend Development with k3s and rpi
https://rancherjp.connpass.com/event/130488/
https://cnjp.connpass.com/event/127545/
LT発表内容。
kenev
June 07, 2019
Tweet
Share
More Decks by kenev
See All by kenev
CircleCIのconfig.ymlを守ろうとした話 / Securing the CircleCI config.yml
kenfdev
0
1k
k3sとラズパイでフロントエンド開発に挑戦した話
kenfdev
2
560
Algolia Searchの速さに鳥肌が立った話 / Algolia Search is Really Fast
kenfdev
0
1.5k
コンテナの疲れをk3sとRemoで癒やした話 / Having Fun with Containers
kenfdev
5
5k
LaravelとVueのi18nに困ってOSSに貢献した話 / Contributing to a Laravel+Vue i18n OSS Library
kenfdev
0
620
Nuxt.jsのinjectでインジェクトしてみる話
kenfdev
3
16k
GoのOSSに貢献する話
kenfdev
2
520
Developerから観たOpenFaaSの可能性
kenfdev
2
620
OpenFaaS Workshop 20180928
kenfdev
1
250
Other Decks in Technology
See All in Technology
三視点LLMによる複数観点レビュー
mhlyc
0
230
QuickSight SPICE の効果的な運用戦略~S3 + Athena 構成での実践ノウハウ~/quicksight-spice-s3-athena-best-practices
emiki
0
290
助けて! XからWaylandに移行しないと新しいGNOMEが使えなくなっちゃう 2025-07-12
nobutomurata
2
200
CDKコード品質UP!ナイスな自作コンストラクタを作るための便利インターフェース
harukasakihara
2
230
AIエージェントが書くのなら直接CloudFormationを書かせればいいじゃないですか何故AWS CDKを使う必要があるのさ
watany
18
7.6k
[SRE NEXT 2025] すみずみまで暖かく照らすあなたの太陽でありたい
carnappopper
2
470
60以上のプロダクトを持つ組織における開発者体験向上への取り組み - チームAPIとBackstageで構築する組織の可視化基盤 - / sre next 2025 Efforts to Improve Developer Experience in an Organization with Over 60 Products
vtryo
3
1.9k
「現場で活躍するAIエージェント」を実現するチームと開発プロセス
tkikuchi1002
3
300
Four Keysから始める信頼性の改善 - SRE NEXT 2025
ozakikota
0
410
モニタリング統一への道のり - 分散モニタリングツール統合のためのオブザーバビリティプロジェクト
niftycorp
PRO
1
520
無理しない AI 活用サービス / #jazug
koudaiii
0
100
VS CodeとGitHub Copilotで爆速開発!アップデートの波に乗るおさらい会 / Rapid Development with VS Code and GitHub Copilot: Catch the Latest Wave
yamachu
3
460
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
RailsConf 2023
tenderlove
30
1.1k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Designing Experiences People Love
moore
142
24k
Being A Developer After 40
akosma
90
590k
Site-Speed That Sticks
csswizardry
10
700
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Transcript
Cloud Native Kansai #03 2019.06.07 @kenfdev k3sとラズパイで フロントエンド開発に挑戦した話
⾃⼰紹介
⾃⼰紹介 • 福⼭ 健 • エンジニア@サイダス@⼤阪 フロントエンドもバックエンドも両⽅好き • Udemy講師 •
JavaScriptエンジニアのためのES6完全ガイド • 実践!AngularJS講座 @kenfdev • OSS Contribution⼤好き • ブログ • https://kenfdev.hateblo.jp/
お詫び
昨⽇発表した内容とほとんど同じです
やりたかったこと
ローカルで開発したNuxt.jsをラズパイにDeploy!
あえてk8s(k3s)上で…
ToDo https://k3s.io/
ToDo •ϥζύΠʹk3sΛΠϯετʔϧ •ARM༻ͷίϯςφΛ࡞ •σϓϩΠ༻ͷmanifest࡞ •ϥζύΠʹσϓϩΠ
ToDo •ϥζύΠʹk3sΛΠϯετʔϧ •ARM༻ͷίϯςφΛ࡞ •σϓϩΠ༻ͷmanifest࡞ •ϥζύΠʹσϓϩΠ
ラズパイにk3sをインストール https://kenfdev.hateblo.jp/entry/2019/03/11/193034
ToDo •ϥζύΠʹk3sΛΠϯετʔϧ •ARM༻ͷίϯςφΛ࡞ •σϓϩΠ༻ͷmanifest࡞ •ϥζύΠʹσϓϩΠ
ここで苦労しました…
ARM⽤のコンテナを作成 FROM arm32v7/node:12-alpine RUN mkdir -p /usr/src/nuxt-app WORKDIR /usr/src/nuxt-app RUN
apk update && apk upgrade RUN apk add git COPY . /usr/src/nuxt-app/ RUN npm install RUN npm run build EXPOSE 5000 ENV NUXT_HOST=0.0.0.0 ENV NUXT_PORT=5000 CMD [ "npm", "start" ] ͜͜Ͱඞͣࢭ·Δɻɻɻ alpineͰϏϧυͰ͖ͳ͍ʂ
ARM⽤のコンテナを作成 FROM arm32v7/node:12 RUN mkdir -p /usr/src/nuxt-app WORKDIR /usr/src/nuxt-app RUN
apt-get update && apt-get upgrade -y RUN apt-get install -y git COPY . /usr/src/nuxt-app/ RUN npm install RUN npm run build EXPOSE 5000 ENV NUXT_HOST=0.0.0.0 ENV NUXT_PORT=5000 CMD [ "npm", "start" ] WARNING͍ͬͺ͍ग़͚ͯͨͲɺʂ alpineஅ೦…
マルチアーキテクチャなイメージも作成 ARMͰx86Ͱ”kenfdev/multiarch-nuxt:1.0”ͰΠϝʔδࢦఆՄೳʂ ʢGrafana͔ΒύΫ͖ͬͯ·ͨ͠ʣ
ToDo •ϥζύΠʹk3sΛΠϯετʔϧ •ARM༻ͷίϯςφΛ࡞ •σϓϩΠ༻ͷmanifest࡞ •ϥζύΠʹσϓϩΠ
デプロイ⽤のmanifest作成 service.yaml deployment.yaml
ToDo •ϥζύΠʹk3sΛΠϯετʔϧ •ARM༻ͷίϯςφΛ࡞ •σϓϩΠ༻ͷmanifest࡞ •ϥζύΠʹσϓϩΠ
ラズパイからkubeconfigコピー ~/.kube/config(ϩʔΧϧ) ϥζύΠͷIPʹ͢Δʂ /etc/rancher/k3s/k3s.yaml(ϥζύΠ) →
ラズパイにデプロイ!
終わらない!
コンテナイメージでかすぎ! ʂ859MBʂ alpine͡Όͳ͍πέ͕·Θ͖ͬͯͨͷ͔…
待つこと10分弱・・・
デプロイされた!
助けてください
まとめ •k3s+ϥζύΠ্ʹNuxt.jsΛσϓϩΠͰ͖ͨ •1ϊʔυͳͷͰ͋Γ͕ͨΈ·ͩମݧͰ͖ͣ •DX(Developer Experience)·ͩ·ͩվળͷ༨͋ Γ •alpineͰnpm installޭ͢Δํ๏Γ͍ͨ •ιʔεม͑ͯͳ͍ͷʹΩϟογϡ͖͔ͳ͍ཧ༝Λ Γ͍ͨ
いっそのことやっぱりx86/x64 https://amzn.to/2MwZniV
ご清聴ありがとうございました!