k3sとラズパイでフロントエンド開発に挑戦した話

Transcript

1. 1.

   Rancher Meetup #08 in Osaka 2019.06.06 @kenfdev k3sとラズパイで フロントエンド開発に挑戦した話

2. 2.

   ⾃⼰紹介

3. 3.

   ⾃⼰紹介 • 福⼭ 健 • エンジニア@サイダス@⼤阪
 フロントエンドもバックエンドも両⽅好き • Udemy講師 •

   JavaScriptエンジニアのためのES6完全ガイド • 実践！AngularJS講座 @kenfdev • OSS Contribution⼤好き • ブログ • https://kenfdev.hateblo.jp/
4. 4.

   やりたかったこと

5. 5.

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

6. 6.

   あえてk8s(k3s)上で…

7. 7.

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

8. 8.

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

9. 9.

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

10. 10.

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

11. 11.

    ここで苦労しました…

12. 12.

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

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

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

15. 15.

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

16. 16.

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

17. 17.

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

18. 18.

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

19. 19.

    ラズパイにデプロイ！

20. 20.

    終わらない！

21. 21.

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

22. 22.

    待つこと10分弱・・・

23. 23.

    デプロイされた！

24. 24.

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

25. 25.

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