Web制作において、プレビューにあえてCloudRun(とFirebase)を使う / Using Cloud Run (and Firebase) as preview environment of HTML in web development

Transcript

1. Web制作において、プレビューにあえて CloudRun(とFirebase)を使う date: 2020-07-25 author: Kazuya Takei location: July Tech

   Festa 2020 links: , Twitter(all) Twitter(track) Sli.do

2. イントロ

3. 自己紹介 Kazuya Takei NIJIBOX Co., Ltd Server-side engineer @attakei Pythonista

   sphinx-revealjs and more

4. NIJIBOX について 株式会社ニジボックスは、UXデザインに特化した、リクル ートグループのWeb制作会社です。 新規事業の立ち上げ支援、UXデザイン、UIデザイン、Web 制作、開発、動画制作、イラスト制作、リリース後のグロ ースハックまで、一気通貫でサポートしています。

5. 話すこと(目標) Web制作における「プレビュー」 Cloud Runで作るプレビュー環境 Cloud Runの意義/制約 実運用での話題共有

6. 話さないこと 構築の中身の実践論の細かい話 スライド自体には多少含まれていますが、トーク はざっくりになります ※興味がある方は、問い合わせください

7. Web制作における「プレビ ュー」

8. 背景 ニジボックスは、UXコンサルティングと Web制作の会社 制作物の最終納品より前に、クライアントに 内容確認をしてもらっている より実態に即した内容で確認してもらうために、 社内で用意している環境を 「プレビュー環境」 とい う

9. 背景 ※補足として 今回は、LPといった静的サイト案件の話 Webアプリケーション系はスコープ外

10. では、プレビュー環境を用意しましょう …どこに？

11. プレビュー環境の選択肢 レンタルサーバー VPS IaaSのインスタンス その他

12. 選択肢: レンタルサーバー 古くからあるサーバーを共用する契約 良い点 開始が手軽 安い htaccess使える(ことが多い) = アクセス制御が可 能

    微妙な点 複数案件に弱い(サブフォルダ問題) 認証情報が少ない(アップロード側）

13. 選択肢: VPS/IaaSのインスタンス 単一の仮想マシンを利用する契約 良い点 柔軟性が強い (アクセス制限/VirtualHost) 微妙な点 色んな意味でコスパがあまりよろしく無い (値段/手間)

14. 選択肢: ここまでまとめ レンサバ、VPS、インスタンス 　∈ サーバー運用 金銭面でのランニングコストがかかる サーバー管理が必要になる（負荷度合いは、運用次 第） ↓ インフラ系リソースが少ないと、

    なんとも言えない感じになる

15. サーバーレス構成にすれば 良いんじゃね！？

16. サーバーレスな例 S3に配置して、CloudFrontを基盤にアクセス制御す る？ … そこそこ手間がかかる Netlifyの有料プラン使う？ … なお値段 HerokuのHobbyプラン …

    ありかもしれない Cloud Runを使ってみようか？

17. Cloud Runで作るプレビュ ー環境

18. Google Cloud Runとは (Cloud Runのトップページより) コンテナ化されたアプリケーションをす ばやく安全にデプロイ、スケーリングで きる、フルマネージド型のコンピューテ ィング プラットフォーム

19. Google Cloud Runとは 要するに = 「割と気軽に」「コンテナWebアプリの実行を」「ドメイ ン付きで」実現するサービス

20. 3行で説明するCloud Runの使い方 GCPの契約をして、プロジェクトで必要なサービスを 有効化する ローカルでDockerアプリを開発してから、イメージを push サービスを起動する

21. Cloud Runの使い方 GCPの契約をして、プロジェクトで必要なサービスを有効 化する 普通に使うだけ Cloud Runを有効にした時点で、最低限必要なサービ スも自動で有効になる

22. Cloud Runの使い方 ローカルでDockerアプリを開発してから、イメージをpush アプリと書いたけど、Apache+静的コンテンツでも立 派なアプリ Dockerfile の時点で、全コンテンツを追加 アクセス制御の仕組みを突っ込めばOK ローカルでDockerアプリを開発してから、イメージを push

23. Cloud Runの使い方 これでも十分なDockerアプリ FROM python:3.8-slim as build RUN mkdir -p

    /build/out WORKDIR /build COPY pyproject.toml confgen.py config.ini /build/ RUN pip install poetry \ && poetry install \ && poetry run confgen -o /build/out FROM httpd:2.4 # Migrate resources RUN mkdir -p /opt/preview \ && echo "Include /opt/preview/*.conf" >> /usr/local/apache2/conf/httpd.conf COPY --from=build /build/out/ /opt/preview/ COPY site/ public/ /opt/preview/public/

24. Cloud Runの使い方 サービスを起動する 正しくDockerコンテナが起動したら、FQDNがもらえ る おめでとうございます！これでプレビュー環境の出来 上がりです！

25. 図解 全てGCPでやる感じだと、こう

26. 「プレビュー環境」の構成図

27. 「プレビュー環境」の構成図 https://firebase.google.com/docs/hosting/cloud-run? hl=ja

28. Cloud Run(+Firebase)の意 義/制約

29. 要約で再掲: プレビュー環境をサーバ ー運用すると 金銭面でのランニングコスト サーバー管理の必要性

30. Cloud Runを使うと… 安い(基本的にリクエスト依存の課金のため) アクセス制御が割合柔軟 GCPプロジェクトを削除すれば、そのまま環境破棄で きる FQDNを自動で付与してくれる

31. Cloud Run+Firebaseを使うと… 安い(基本的にリクエスト依存の課金のため) アクセス制御が割合柔軟 GCPプロジェクトを削除すれば、そのまま環境破棄で きる 非常にわかりやすい FQDNを自動で付与してくれる

32. 付与されるFQDN Cloud Run {サービス名+ランダムな文字列}.a.run.app Firebase {プロジェクトID}.firebaseapp.com {プロジェクトID}.web.app <- わかりやすい

33. Cloud Runの制約 「コンテンツをリアルタイムで編集」みたいなのは向 かない 運用に、ある程度Dockerの知識が必要 DDoS攻撃受けると怖い

34. 実運用での話題共有

35. 弊社では… ボイラープレートをあらかじめ用意 Cloud Runの有効化→デプロイまでを一括実行するCI パイプライン 前述の環境を提供するアプリケーション その他必要なファイルなど 制作メンバーはFirebaseプロジェクトを用意して、 ボイラ プレートを利用するだけで、簡単に環境を増やせる。

36. 弊社では… 1. Member: @attakei Firebaseプロジェクト下さい。ID はXXXXXで 2. Takei: @member 作りました。権限付与したので、よ

    しなにどうぞ 3. Member: 了解ですー 4. Member作業中… 5. Member: @here プレビュー環境準備しました。URLは こちら

37. 弊社では…

38. 弊社では…

39. コスト事情 だいたい、10円/案件ぐらいが目安 重めのリソースを持ってても、月間全体で100円行く ことはまず無い

40. まとめ

41. Cloud Runを使った「プレビュー環 境」を運用してます 環境用意から破棄までが容易になった Webappじゃなくても、CLIじゃなくても、Dockerは 使える 「Docker環境をちょっと運用してみたい」、そんな人 の一助となれば

42. 参考リンクなど 今回の主役となるGCPサービス https://cloud.google.com/run https://cloud.google.com/container-registry/ https://firebase.google.com/docs/hosting/cloud run?hl=ja

43. 参考リンクなど 弊社のコーポレートサイト このスライドに使ってるライブラリ/サービス https://nijibox.jp https://www.sphinx-doc.org/ https://sphinx-revealjs.readthedocs.io/ https://revealjs.com/ https://www.diagrams.net