Liam ERDで生成したER図をCloud Run on GCSで公開する
はじめに
Liam ERD というツールを教えてもらいました。見た目がカッコいいので、いつでもみれるように Google Cloud 上に deploy します。
BigQuery, Cloud Spanner, Redshift, Snowflake など多数のクラウドサービスにも対応してるようです。
ゴール
Cloud Run で Nginx をホストして、発行されるデフォルト URL にアクセスしてみられるようにします。
https://nginx-viewer-000000000.asia-northeast1.run.app/erd/dist/
方法
1. 準備
Cloud Storage, Service Account を用意します。
# 利用する Google Cloud Project ID を指定する
PROJECT_ID=xxxxxxxxx
gcloud storage buckets create --project=$PROJECT_ID \
--location=asia-northeast1 \
--uniform-bucket-level-access \
gs://${PROJECT_ID}_static-page
gcloud iam service-accounts create nginx-viewer --project=$PROJECT_ID
gcloud storage buckets add-iam-policy-binding gs://${PROJECT_ID}_static-page \
--role=roles/storage.objectViewer \
--member=serviceAccount:nginx-viewer@${PROJECT_ID}.iam.gserviceaccount.com
2. ER図の生成
検証するために Prisma のスキーマファイルを用意します。schema.prisma をリポジトリに push しておきましょう。
curl -L -o prisma/schema.prisma \
https://raw.githubusercontent.com/prisma/prisma-examples/refs/heads/latest/orm/nextjs/prisma/schema.prisma
Cloud Build をつかって、ER図を生成します。serviceAccount の YOUR_PROJECT_ID と YOUR_PROJECT_NUMBER はご自身の環境の値に置き換えてください。コンピュートエンジンデフォルトサービスアカウントを指定してますが、それ以外でも問題ありません。そのときは Cloud Storage へのIAMロールを設定することをお忘れなく。
# プロジェクト番号の取得
gcloud projects list \
--filter="$(gcloud config get-value project)" \
--format="value(PROJECT_NUMBER)"
# Cloud Build トリガーを作成
gcloud builds triggers import --source=erd-builder.yaml --project=$PROJECT_ID
# トリガーを動かす
gcloud builds triggers run erd-builder --branch=main --project=$PROJECT_ID
ちなみに公式サイトには GitHub Actions をつかって GitHub Pages へデプロイする方法[1]が紹介されています。
3. Cloud Run のデプロイ
Nginx を Cloud Run にデプロイします。Cloud Run で Cloud Storage をマウントします。
以下が deploy する Nginx のファイルです。
Dockerfile を配置したディレクトリへ移動し、--source . を指定して deploy します。
gcloud beta run deploy nginx-viewer --project=$PROJECT_ID \
--source . \
--region=asia-northeast1 \
--execution-environment=gen2 \
--no-invoker-iam-check \
--ingress=all \
--service-account=nginx-viewer@$PROJECT_ID.iam.gserviceaccount.com \
--add-volume=name=gcs,type=cloud-storage,bucket=${PROJECT_ID}_static-page,readonly=true \
--add-volume-mount=volume=gcs,mount-path=/mnt/gcs
4. 動作確認
https://nginx-viewer-xxxxxxxx.asia-northeast1.run.app/ にアクセスしましょう。ディレクトリを辿っていくとアクセスできます。なお、xxxxxxxx はプロジェクト番号が入ります。
解説
Cloud Storage のボリュームマウント[3]
Cloud Run は、Cloud Storage FUSE を使用して Cloud Storage バケットをボリュームとしてマウントすることができます。
readonly=true をつけることで読み取り専用ボリュームになります。
--add-volume=name=gcs,type=cloud-storage,bucket=${PROJECT_ID}_static-page,readonly=true \
--add-volume-mount=volume=gcs,mount-path=/mnt/gcs
Nginx の設定
ドキュメントルートを Cloud Storage をマウントしたパスに指定しています。さらにautoindex[4] でディレクトリの一覧をレスポンスできるようにしています。これで Cloud Storage にアップロードしたHTMLファイルを表示できるようになります。リスクもあるので利用には注意しましょう。
ディレクトリリスティングがオンになっていると、公開するつもりのないファイルが一般公開されてしまい、予期せぬ情報漏洩の可能性があります。
ウェブサイト脆弱性：ディレクトリリスティングをオフにする方法とセキュリティ上必要な理由
Cloud Build のビルド構成ファイル
今回は ビルドステップをインラインで定義していますが、別ファイルで定義しても問題ないです。
ER図を生成したあと、事前にアップロード済みのファイルを削除しています。このときにファイルがないと、コマンドがエラーでビルド自体がキャンセルされてしまいます。
そのため、allowFailure: true[5] をつけています。
また、includedFiles で static-page-viewer/prisma/** を指定していますが、これによって指定したファイル以外の変更で Cloud Build がトリガーされることを抑止しています。
さいごに
今回は ER図を自動でデプロイしていつでも確認できるシステムをつくってみました。ER図に限らず静的ファイルでしたらなんでもいいので、こちらを参考にいろんなものをホストしてもらえると良いかと思います。たとえば、storybook とかでもいいかと思います。
Discussion