Tweet
Tweet

Slide 1

Slide 1 text

Cloud Native Kansai #03 2019.06.07 @kenfdev k3sとラズパイで フロントエンド開発に挑戦した話

Slide 2

Slide 2 text

⾃⼰紹介

Slide 3

Slide 3 text

⾃⼰紹介 • 福⼭ 健 • エンジニア@サイダス@⼤阪
 フロントエンドもバックエンドも両⽅好き • Udemy講師 • JavaScriptエンジニアのためのES6完全ガイド • 実践！AngularJS講座 @kenfdev • OSS Contribution⼤好き • ブログ • https://kenfdev.hateblo.jp/

Slide 4

Slide 4 text

お詫び

Slide 5

Slide 5 text

昨⽇発表した内容とほとんど同じです

Slide 6

Slide 6 text

やりたかったこと

Slide 7

Slide 7 text

ローカルで開発したNuxt.jsをラズパイにDeploy！

Slide 8

Slide 8 text

あえてk8s(k3s)上で…

Slide 9

Slide 9 text

ToDo https://k3s.io/

Slide 10

Slide 10 text

ToDo •ϥζύΠʹk3sΛΠϯετʔϧ •ARM༻ͷίϯςφΛ࡞੒ •σϓϩΠ༻ͷmanifest࡞੒ •ϥζύΠʹσϓϩΠ

Slide 11

Slide 11 text

ToDo •ϥζύΠʹk3sΛΠϯετʔϧ •ARM༻ͷίϯςφΛ࡞੒ •σϓϩΠ༻ͷmanifest࡞੒ •ϥζύΠʹσϓϩΠ

Slide 12

Slide 12 text

ラズパイにk3sをインストール https://kenfdev.hateblo.jp/entry/2019/03/11/193034

Slide 13

Slide 13 text

ToDo •ϥζύΠʹk3sΛΠϯετʔϧ •ARM༻ͷίϯςφΛ࡞੒ •σϓϩΠ༻ͷmanifest࡞੒ •ϥζύΠʹσϓϩΠ

Slide 14

Slide 14 text

ここで苦労しました…

Slide 15

Slide 15 text

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ͰϏϧυͰ͖ͳ͍ʂ

Slide 16

Slide 16 text

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͸அ೦…

Slide 17

Slide 17 text

マルチアーキテクチャなイメージも作成 ARMͰ΋x86Ͱ΋”kenfdev/multiarch-nuxt:1.0”ͰΠϝʔδࢦఆՄೳʂ ʢGrafana͔ΒύΫ͖ͬͯ·ͨ͠ʣ

Slide 18

Slide 18 text

ToDo •ϥζύΠʹk3sΛΠϯετʔϧ •ARM༻ͷίϯςφΛ࡞੒ •σϓϩΠ༻ͷmanifest࡞੒ •ϥζύΠʹσϓϩΠ

Slide 19

Slide 19 text

デプロイ⽤のmanifest作成 service.yaml deployment.yaml

Slide 20

Slide 20 text

ToDo •ϥζύΠʹk3sΛΠϯετʔϧ •ARM༻ͷίϯςφΛ࡞੒ •σϓϩΠ༻ͷmanifest࡞੒ •ϥζύΠʹσϓϩΠ

Slide 21

Slide 21 text

ラズパイからkubeconfigコピー ~/.kube/config(ϩʔΧϧ) ϥζύΠͷIPʹ͢Δʂ /etc/rancher/k3s/k3s.yaml(ϥζύΠ) →

Slide 22

Slide 22 text

ラズパイにデプロイ！

Slide 23

Slide 23 text

終わらない！

Slide 24

Slide 24 text

コンテナイメージでかすぎ！ ʂ859MBʂ alpine͡Όͳ͍πέ͕·Θ͖ͬͯͨͷ͔…

Slide 25

Slide 25 text

待つこと10分弱・・・

Slide 26

Slide 26 text

デプロイされた！

Slide 27

Slide 27 text

助けてください

Slide 28

Slide 28 text

まとめ •k3s+ϥζύΠ্ʹNuxt.jsΛσϓϩΠͰ͖ͨ •1ϊʔυͳͷͰ͋Γ͕ͨΈ͸·ͩମݧͰ͖ͣ •DX(Developer Experience)͸·ͩ·ͩվળͷ༨஍͋ Γ •alpineͰnpm install੒ޭ͢Δํ๏஌Γ͍ͨ •ιʔεม͑ͯͳ͍ͷʹΩϟογϡ͖͔ͳ͍ཧ༝Λ ஌Γ͍ͨ

Slide 29

Slide 29 text

いっそのことやっぱりx86/x64 https://amzn.to/2MwZniV

Slide 30

Slide 30 text

ご清聴ありがとうございました！