ReactアプリをCloud Runで実行する必要があったので方法を調べました。
Cloud Runとは
コンテナイメージを上げておけばそのイメージをいい感じにスケールアップしながら使ってくれる便利な機能。
AWSでいえばECSのようなものですかね。
GCPのプロジェクト作成とCloud Runのサービス作成
- GCPプロジェクトを作成します
- Cloud Runを有効化します
- Cloud Runサービスを作成します
- コンテナイメージのURLを指定します(作成方法は後述)
- Cloud Runサービスの作成を完了します
コンテナイメージの保存場所
- Artifact Registryを作成します
- GCR.io Repositoryを作成します。
こんなURLが割り当てられますgcr.io/YOUR_PROJECT_ID/gcr.io - コンテナイメージをpushします(方法は後述)
コンテナイメージのpush
# ローカルでreactをビルドします
cd PROJECT_ROOT
npm run build
# 一度だけ gcpのレジストリのurlとかをdockerに認識させます
gcloud auth configure-docker
# gcp環境にpushするのに認証が必要です
gcloud auth login
# ビルドされたreactを含むコンテナイメージを作成しRegistoryにpushします
## Intel Macの場合
### ビルド
docker build -f docker_cloudrun/Dockerfile --tag gcr.io/YOUR_PROJECT_ID/gcr.io/reactcloudrun:latest .
### プッシュ
docker push gcr.io/YOUR_PROJECT_ID/gcr.io/reactcloudrun:latest
## M1 Macの場合ビルドとプッシュは同時に行う
docker buildx build --no-cache --push --platform=linux/amd64 -f docker_cloudrun/Dockerfile --tag gcr.io/YOUR_PROJECT_ID/gcr.io/reactcloudrun:latest .
これはGCPの実行環境のアーキテクチャがM1のものと違うからbuildxを使う必要があるという認識です。buildxで作成したマルチプラットフォームのイメージはローカルに作成できないので、直接pushする必要があると理解しました。
Dockerfile
nginxで任意のディレクトリを表示すればよいだけなのでシンプルです。
FROM nginx:1.23
# PORTを8080で待ち受けるようにしたconfをコピー
COPY docker_cloudrun/default.conf /etc/nginx/conf.d/default.conf
# ビルドされたreactのディレクトリをnginxの公開ディレクトリとしてコピー
COPY build /usr/share/nginx/html
検証用プロジェクト
今回検証に使ったプロジェクトはGithubで公開しています。
https://github.com/sekitaka/react-cloud-run-example
注意
ポート番号
Cloud Runの内部のコンテナが待ち受けるポートはデフォルトで8080なので、作成するイメージを8080に合わせる必要があります。ドキュメントではPORT環境変数から取得して動くようにしてねと書いてはありました。