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.3k
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.6k
コンテナの疲れを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
530
Developerから観たOpenFaaSの可能性
kenfdev
2
630
OpenFaaS Workshop 20180928
kenfdev
1
250
Other Decks in Technology
See All in Technology
Backlog AI アシスタントが切り開く未来
vvatanabe
1
170
Claude Codeは仕様駆動の夢を見ない
gotalab555
23
7.2k
UDDのススメ - 拡張版 -
maguroalternative
1
620
モノレポにおけるエラー管理 ~Runbook自動生成とチームメンションの最適化
biwashi
0
360
Amazon Q Developerを活用したアーキテクチャのリファクタリング
k1nakayama
2
220
薬屋のひとりごとにみるトラブルシューティング
tomokusaba
0
390
ウォンテッドリーのアラート設計と Datadog 移行での知見
donkomura
0
150
Cloud WANの基礎から応用~少しだけDeep Dive~
masakiokuda
3
120
MySQL HeatWave:サービス概要のご紹介
oracle4engineer
PRO
3
1.6k
Telemetry APIから学ぶGoogle Cloud ObservabilityとOpenTelemetryの現在 / getting-started-telemetry-api-with-google-cloud
k6s4i53rx
0
160
datadog-distribution-of-opentelemetry-collector-intro
tetsuya28
0
120
「AIと一緒にやる」が当たり前になるまでの奮闘記
kakehashi
PRO
3
180
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
39k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
BBQ
matthewcrist
89
9.8k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
810
Designing for Performance
lara
610
69k
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
ご清聴ありがとうございました!