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

https://attakei.net/_static/images/icon-attakei@2x.jpg

NIJIBOX について

_images/logo-nijibox.svg
株式会社ニジボックスは、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を有効にした時点で、最低限必要なサービスも自動で有効になる

_images/cloud-run-before.png

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がもらえる

  • おめでとうございます!これでプレビュー環境の出来上がりです!

_images/cloud-run-started.png

図解

_images/flow-deployment_basic.png

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

_images/flow-deployment_full_gcp.png

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

_images/flow-browser_cloudrun.png

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

_images/flow-browser_firebase_cloudrun.png

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 Hosting

    • {プロジェクト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はこちら

弊社では…

_images/boilerplate.png

弊社では…

_images/flow-deployment_nijibox.png

コスト事情

  • だいたい、10円/月・案件ぐらいが目安

  • 重めのリソースを持ってても、月間全体で100円行くことはまず無い

まとめ

Cloud Runを使った「プレビュー環境」を運用してます

  • 環境用意から破棄までが容易になった

  • Webアプリじゃなくても、CLIじゃなくても、Dockerは使える

  • 「Docker環境をちょっと運用してみたい」、そんな人の一助となれば

参考リンクなど

参考リンクなど