はじめに

Liam ERD というツールを教えてもらいました。見た目がカッコいいので、いつでもみれるように Google Cloud 上に deploy します。

https://liambx.com

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