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/