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
980
k3sとラズパイでフロントエンド開発に挑戦した話
kenfdev
2
540
Algolia Searchの速さに鳥肌が立った話 / Algolia Search is Really Fast
kenfdev
0
1.5k
コンテナの疲れをk3sとRemoで癒やした話 / Having Fun with Containers
kenfdev
5
4.9k
LaravelとVueのi18nに困ってOSSに貢献した話 / Contributing to a Laravel+Vue i18n OSS Library
kenfdev
0
580
Nuxt.jsのinjectでインジェクトしてみる話
kenfdev
3
16k
GoのOSSに貢献する話
kenfdev
2
500
Developerから観たOpenFaaSの可能性
kenfdev
2
610
OpenFaaS Workshop 20180928
kenfdev
1
230
Other Decks in Technology
See All in Technology
20250413_湘南kaggler会_音声認識で使うのってメルス・・・なんだっけ?
sugupoko
0
130
はてなの開発20年史と DevOpsの歩み / DevOpsDays Tokyo 2025 Keynote
daiksy
2
410
大規模サービスにおける カスケード障害
takumiogawa
3
780
.mdc駆動ナレッジマネジメント/.mdc-driven knowledge management
yodakeisuke
23
7.3k
OCI Database with PostgreSQLのご紹介
rkajiyama
0
130
大規模プロジェクトにおける 品質管理の要点と実践 / 20250327 Suguru Ishii
shift_evolve
0
330
Proxmox VE超入門 〜 無料で作れるご自宅仮想化プラットフォームブックマークする
devops_vtj
0
260
サーバシステムを無理なくコンテナ移行する際に伝えたい4つのポイント/Container_Happy_Migration_Method
ozawa
1
130
データベースで見る『家族アルバム みてね』の変遷 / The Evolution of Family Album Through the Lens of Databases
kohbis
4
1.1k
ペアーズにおけるData Catalog導入の取り組み
hisamouna
0
260
Agile TPIを活用した品質改善事例
tomasagi
0
640
SaaSプロダクト開発におけるバグの早期検出のためのAcceptance testの取り組み
kworkdev
PRO
0
570
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.8k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.5k
Code Reviewing Like a Champion
maltzj
522
39k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
Building an army of robots
kneath
304
45k
Side Projects
sachag
452
42k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.3k
Unsuck your backbone
ammeep
670
57k
Fireside Chat
paigeccino
37
3.4k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
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
ご清聴ありがとうございました!