Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

attakei

July 25, 2020
Tweet

More Decks by attakei

Other Decks in Programming

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