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
630
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
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.8k
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
550
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
osawa
1
350
2つのフロントエンドと状態管理
mixi_engineers
PRO
3
110
これでもう迷わない!Jetpack Composeの書き方実践ガイド
zozotech
PRO
0
1k
JTCにおける内製×スクラム開発への挑戦〜内製化率95%達成の舞台裏/JTC's challenge of in-house development with Scrum
aeonpeople
0
250
株式会社ログラス - 会社説明資料【エンジニア】/ Loglass Engineer
loglass2019
4
65k
自作JSエンジンに推しプロポーザルを実装したい!
sajikix
1
190
【NoMapsTECH 2025】AI Edge Computing Workshop
akit37
0
220
普通のチームがスクラムを会得するたった一つの冴えたやり方 / the best way to scrum
okamototakuyasr2
0
100
研究開発と製品開発、両利きのロボティクス
youtalk
1
530
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
10
75k
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
Visualization
eitanlees
148
16k
What's in a price? How to price your products and services
michaelherold
246
12k
Why Our Code Smells
bkeepers
PRO
339
57k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
GraphQLとの向き合い方2022年版
quramy
49
14k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
RailsConf 2023
tenderlove
30
1.2k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
Context Engineering - Making Every Token Count
addyosmani
3
54
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
ご清聴ありがとうございました!