Google Cloud でシンプルなブログサイト Xenn をつくろう / xenn-google-cloud-handson

Cloud Run のハンズオン資料（投影用）です。

Zenn をご存じでしょうか。エンジニアのために作成された情報共有サイトは、フルマネージド型のコンテナ環境「Cloud Run」を中心に、開発から運用まで「Google Cloud」のサービスをふんだんに活用しています。

本ハンズオンでは、実際にZennのバックエンドで使われている技術スタックとアーキテクチャを利用し、実際にアプリケーションをデプロイするところまでを体験していただきます。

ハンズオンでは、Zennライクな架空の軽量ブログサイト、「Xenn」を構築していただきます。

Transcript

1. Google Cloud で シンプルなブログサイトを つくろう Cloud Run ハンズオン 2024.8.24 みなさま、休日の昼間にありがとうございます グルーヴノーツ様、会場ありがとうございます
2. クラメソZennチームで働いている和田といいます クラスメソッドへ入社 2016年2月 AWS EC2、Scala、Backend API サーバーレス（FaaSベース）アプリ開発 2018年7月 AWS Lambda、Node.js、Backend API, React SPA Zennをきっかけに Google Cloud の世界へ 2021年7月 Cloud Run、Next.js、Ruby on Rails、Zenn全般
3. Zenn とは Zennは「知見を共有するエンジニアに対価を」 というコンセプトでつくられた 技術情報共有コミュニティです。
4. 3種類の投稿形式で、その時々に合った粒度で知見を残すことができます ひとまず 雑にメモ したい あのテーマ で誰かと 議論したい 最近学んだ あの話を記事 にしよう 労力が かかった分 有料で販売 しよう あの話を まとめて 本にしよう
5. クラスメソッドはAWSがメインですが… Zenn は Google Cloud メインで構築され ています アプリケーションフレームワークとRDBの 組み合わせの開発体験が良く、ビジネスに 集中できる Cloud Run と Cloud SQL でシンプルかつ スケーラブルに実現できる この良さを体験し、持ち帰っていただくの が今日の目的です
6. 今日つくるアプリ: Xenn ごくシンプルな記事投稿アプリ 記事の作成と編集、閲覧が可能 簡単のためログイン機能はなし
7. 今日つくるアプリ: Xenn Ruby on Rails: APIサーバー Next.js: HTML/JS/CSS サーバー ※Cloud Run 第一世代 Cloud SQL: 記事の情報を保存 xenn IAM xenn IAM Xenn User Next.js Cloud Run Cloud SQL Ruby on Rails Cloud Run Xenn Developer Artifact Registry Cloud Build
8. xenn IAM xenn IAM ハンズオンの流れ Google Cloud の Cloud コンソールへ行 き、ご自身が利用できるプロジェクトで Cloud Shell を開く チュートリアルを進める 前半: リソースのデプロイと確認 後半: アプリケーションの修正 さいごにリソースを削除します Xenn User Next.js Cloud Run Cloud SQL Ruby on Rails Cloud Run Xenn Developer Artifact Registry Cloud Build
9. Cloud Shell を開く Google Cloud の Cloud コンソールへ行き、ご自身が利用できるプロジェクトで Cloud Shell を開く
10. チュートリアルリポジトリをクローンする git clone https://github.com/zenn-dev/google-cloud-workshop-202311-xenn.git cd google-cloud-workshop-202311-xenn teachme tutorial_ja.md ※コンパスのイベントページで↑コピペできます
11. Terraform クラウドプラットフォームのリソース群をソースコードで管理するためのいわゆ る Infrastructure as Code ツールのひとつ Google Cloud のリソース管理にもよく使われる おそらく Cloud Development Manager よりも使われている（感覚です） AWSやAzureにも使えるため、触っておいて損はないと思います Terraformの設定値からGoogle Cloud の API を コールし、リソースを作成する
12. APIの有効化 まっさらなプロジェクトだといくつか追加で有効にする必要あり Terraformによるデプロイのタイミングで「APIを有効にしてください」 出力されたURLに遷移してAPIを有効にすればOK ※何度か繰り返す可能性あります
13. チュートリアルをすすめる 5 / 17 を目指します 質問や詰まった箇所があれば遠慮なくどうぞ！ ※ コードは、Cloud Shell へコピーではなくクリップボードへコピーを利用
14. Terraform で作成したリソース Cloud Run のサービスアカウント => Cloud Run のアプリをどのよ うな権限で起動するか指定するの に必要 Cloud SQL インスタンス => ここにデータベースやユー ザーを作っていきます Artifact Registy => Google Cloud管理下の Dockerイメージリポジトリ。デプ ロイで使います xenn IAM xenn IAM Xenn User Next.js Cloud Run Cloud SQL Ruby on Rails Cloud Run Xenn Developer Artifact Registry Cloud Build
15. Terraform と gcloud コマンド 実質両者は同じことができますが、管理したいリソース対象で分けると良いと思 います。 Terraform は 作成したリソースの状態を記録できるため、一度だけ作成するよう なリソース管理に向いています glcoud コマンドは都度オプションを指定するため、ステートレスに何度も実行す るような作業に向いています Zennでは、アプリケーションデプロイ時の作業はgcloudコマンドで行い、それ以 外のアプリケーションを動かすのに必要なリソースはTerraformで管理していま す
16. チュートリアルをすすめる 8 / 17 完了を目指します 質問や詰まった箇所があれば遠慮なくどうぞ！
17. チェックポイント: gcloud run gcloud builds submit: ソース側のDockerfileを使ってイメージをビルドします gcloud run jobs deploy: Cloud Run Jobs をデプロイします => イメージを使って任意のコマンドを実行できる便利なサービスです => ここでは、Railsのイメージを使ってDBマイグレーションを実行します gcloud run deploy: URLを持つ Cloud Run サービスをデプロイします 今回はこれらを個別に実行していますが、Cloud Build でまとめて実行すること も可能です。Zennではそのようにしています。
18. チュートリアルをすすめる 11/17完了を目指します 質問や詰まった箇所があれば遠慮なくどうぞ！ 休憩
19. おつかれさまでした Google Cloud Shell を使いました Terraform を使って Cloud SQL、Artifact Registry、Cloud IAM をデプロイし ました gcloud コマンドを使ってアプリケーションをビルドしました Rails コマンドで DBマイグレーションを実行しました Next.js と Rails を Cloud Run へデプロイし、Cloud SQLとつないでブログアプ リを構築しました 修正・再デプロイを体験しました
20. 感想戦 アプリケーションフレームワークとRDBの組み合わせはいつの時代も強力 小規模なアプリではありますが、ほとんどすべてのリソースが Google Cloud で 完結できるのは魅力 Webアプリを構築・運用するのに Google Cloud は優れた選択肢といえます ほかにも、Google Analytics、BigQuery、Cloud Logging、Cloud Armor （WAF）、Cloud Load Balancing とWebアプリにおいてほしい機能がサービス として展開されています。うまく組み合わせることでグロースフェーズにも活用 できます
21. おわりに クラウドの選択肢が多様化しています 選び放題なのはありがたいのですが、キャッチアップにも一苦労 Zennの開発・運用をしていて言えることは、デベロッパーが主導できるような体 制には Google Cloud が向いている Google Cloud Japan様やクラスメソッドとデベロッパーとして繋がらせてくださ い。キャッチアップの高速化やマルチクラウドの検討、クラウドの移行やスター トアップなど、さまざまなシーンで情報交換させてください