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とラズパイでフロントエンド開発に挑戦した話
Search
kenev
June 06, 2019
Technology
2
560
k3sとラズパイでフロントエンド開発に挑戦した話
kenev
June 06, 2019
Tweet
Share
More Decks by kenev
See All by kenev
CircleCIのconfig.ymlを守ろうとした話 / Securing the CircleCI config.yml
kenfdev
0
1k
k3sとラズパイでフロントエンド開発に挑戦した話 / Frontend Development with k3s and rpi
kenfdev
0
1.3k
Algolia Searchの速さに鳥肌が立った話 / Algolia Search is Really Fast
kenfdev
0
1.6k
コンテナの疲れをk3sとRemoで癒やした話 / Having Fun with Containers
kenfdev
5
5.1k
LaravelとVueのi18nに困ってOSSに貢献した話 / Contributing to a Laravel+Vue i18n OSS Library
kenfdev
0
630
Nuxt.jsのinjectでインジェクトしてみる話
kenfdev
3
16k
GoのOSSに貢献する話
kenfdev
2
530
Developerから観たOpenFaaSの可能性
kenfdev
2
640
OpenFaaS Workshop 20180928
kenfdev
1
250
Other Decks in Technology
See All in Technology
Digitization部 紹介資料
sansan33
PRO
1
5.5k
大規模サーバーレスAPIの堅牢性・信頼性設計 〜AWSのベストプラクティスから始まる現実的制約との向き合い方〜
maimyyym
10
4.8k
これがLambdaレス時代のChatOpsだ!実例で学ぶAmazon Q Developerカスタムアクション活用法
iwamot
PRO
6
1.1k
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
12
80k
能登半島地震において デジタルができたこと・できなかったこと
ditccsugii
0
210
「れきちず」のこれまでとこれから - 誰にでもわかりやすい歴史地図を目指して / FOSS4G 2025 Japan
hjmkth
1
310
セキュアな認可付きリモートMCPサーバーをAWSマネージドサービスでつくろう! / Let's build an OAuth protected remote MCP server based on AWS managed services
kaminashi
3
330
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
8.8k
Adminaで実現するISMS/SOC2運用の効率化 〜 アカウント管理編 〜
shonansurvivors
4
450
なぜAWSを活かしきれないのか?技術と組織への処方箋
nrinetcom
PRO
5
910
ユーザーの声とAI検証で進める、プロダクトディスカバリー
sansantech
PRO
1
140
GoでもGUIアプリを作りたい!
kworkdev
PRO
0
150
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Writing Fast Ruby
sferik
629
62k
RailsConf 2023
tenderlove
30
1.2k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Embracing the Ebb and Flow
colly
88
4.8k
Code Review Best Practice
trishagee
72
19k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Six Lessons from altMBA
skipperchong
29
4k
Automating Front-end Workflow
addyosmani
1371
200k
Statistics for Hackers
jakevdp
799
220k
Transcript
Rancher Meetup #08 in Osaka 2019.06.06 @kenfdev k3sとラズパイで フロントエンド開発に挑戦した話
⾃⼰紹介
⾃⼰紹介 • 福⼭ 健 • エンジニア@サイダス@⼤阪 フロントエンドもバックエンドも両⽅好き • Udemy講師 •
JavaScriptエンジニアのためのES6完全ガイド • 実践!AngularJS講座 @kenfdev • OSS Contribution⼤好き • ブログ • https://kenfdev.hateblo.jp/
やりたかったこと
ローカルで開発したNuxt.jsをラズパイにDeploy!
あえてk8s(k3s)上で…
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ޭ͢Δํ๏Γ͍ͨ •ιʔεม͑ͯͳ͍ͷʹΩϟογϡ͖͔ͳ͍ཧ༝Λ Γ͍ͨ
ご清聴ありがとうございました!