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

イントロ 

自己紹介 Kazuya Takei NIJIBOX Co., Ltd Server-side engineer @attakei Pythonista sphinx-revealjs and more 

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

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

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

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

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

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

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

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

選択肢: レンタルサーバー 古くからあるサーバーを共用する契約 良い点 開始が手軽 安い htaccess使える(ことが多い) = アクセス制御が可 能 微妙な点 複数案件に弱い(サブフォルダ問題) 認証情報が少ない(アップロード側） 

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

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

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

サーバーレスな例 S3に配置して、CloudFrontを基盤にアクセス制御す る？ … そこそこ手間がかかる Netlifyの有料プラン使う？ … なお値段 HerokuのHobbyプラン … ありかもしれない Cloud Runを使ってみようか？ 

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

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

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

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

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

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

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/ 

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

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

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

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

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

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

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

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

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

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

実運用での話題共有 

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

弊社では… 1. Member: @attakei Firebaseプロジェクト下さい。ID はXXXXXで 2. Takei: @member 作りました。権限付与したので、よ しなにどうぞ 3. Member: 了解ですー 4. Member作業中… 5. Member: @here プレビュー環境準備しました。URLは こちら 

弊社では… 

弊社では… 

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

まとめ 

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

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

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