Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Web制作において、プレビューにあえてCloudRun(とFirebase)を使う / Using Cloud Run (and Firebase) as preview environment of HTML in web development
attakei
July 25, 2020
Programming
0
740
Web制作において、プレビューにあえてCloudRun(とFirebase)を使う / Using Cloud Run (and Firebase) as preview environment of HTML in web development
attakei
July 25, 2020
Tweet
Share
More Decks by attakei
See All by attakei
Sphinxを通して考える、「拡張」の仕方 / First approach for development sphinx extension
attakei
0
2.3k
PyPIデビュー手前の人のための地下活動手法 -PyPICloudを使ったプライベートレジストリの構築- / Using PyPICloud as private registry for pre-debut to PyPI
attakei
1
240
「〇〇のプラグインを作る」ことのすゝめ / Let's develop plugins
attakei
0
690
プレゼン?それもSphinxで出来るよ -ドキュメントツールSphinxのちょっと変わった利用法- / You can presentation too by Sphinx!
attakei
0
410
Cloud RunとFastAPIで、ChatBotをミニマムスタートしよう / Getting start ChatBot with FastAPI and Cloud RUN
attakei
0
2.1k
Ansibleを通じて「べき等性」を 理解してみよう / Try understanding idempotency by Ansible
attakei
1
720
素材の良さを活かしつつ、reST をReveal.jsに変換してみる話 / Converting pure reST to Revealjs
attakei
0
160
Eelで作ってみる WHOISアプリと スライド
attakei
0
700
Errbotで得られる、ChatOps入門
attakei
0
1k
Other Decks in Programming
See All in Programming
Hatena Engineer Seminar #23「新卒研修で気軽に『ありがとう』を伝え合える Slack アプリを開発した話」
slashnephy
0
410
花き業界のサプライチェーンを繋げるプロダクト開発の進め方
userlike1
0
200
Unityでのチート対策を簡単かつ高品質に行う為の取り組み
trapezoid
2
1.9k
TokyoR#103_DataProcessing
kilometer
0
550
Showkase、Paparazziを用いたビジュアルリグレッションテストの導入にチャレンジした話 / MoT TechTalk #15
mot_techtalk
0
150
How to Fight Production Incidents?
asatarin
0
240
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
1
490
Cloudflare WorkersでGoを動かすライブラリを作っている話
syumai
1
340
Qiita Night PHP 2023
fuwasegu
0
11k
Git Rebase
bkuhlmann
10
1.2k
Makuakeの認証基盤とRe-Architectureチーム
bmf_san
0
650
はじめての「R」
masaha03
0
130
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1020
430k
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
197
10k
Fontdeck: Realign not Redesign
paulrobertlloyd
74
4.3k
Optimizing for Happiness
mojombo
365
64k
KATA
mclloyd
12
9.7k
4 Signs Your Business is Dying
shpigford
171
20k
Typedesign – Prime Four
hannesfritz
34
1.5k
How to name files
jennybc
47
73k
The Cult of Friendly URLs
andyhume
69
5.1k
BBQ
matthewcrist
75
8.1k
Ruby is Unlike a Banana
tanoku
93
9.6k
Design by the Numbers
sachag
271
18k
Transcript
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