Remix アプリを Clourd Run にデプロイする

目的

Cloud Run はコンテナをサーバレスで実行できるプラットフォームです。コンテナイメージをデプロイするだけで、アプリケーションを構築できます。

この記事では、新規作成した直後の Remix アプリをコンテナ化し、 Cloud Run にデプロイします。

環境

環境	バージョン
チップ	Apple M1
OS	macOS 13.6.6
Node.js	20.14.0
Yarn	4.1.1

前提条件

Google Cloud アカウント登録

Google Cloud でアカウントを作成すること。
また、 Cloud Run の利用にはクレジットカード登録が必要です。

• Google Cloud

Cloud Run 管理画面を理解

Cloud Run デプロイの流れを理解すること。
公式チュートリアルに触れる程度で十分です。

• クイックスタート: Cloud Run にデプロイする  |  Cloud Run Documentation  |  Google Cloud
• クイックスタート: Cloud Run に Node.js サービスをデプロイする  |  Cloud Run Documentation  |  Google Cloud

gcloud CLI インストール

デプロイには gcloud コマンドを使用するため、gcloud コマンドを実行できるまで設定すること。

• gcloud CLI をインストールする  |  Google Cloud CLI のドキュメント

Remix アプリを新規作成

Remix アプリを新規作成します。

npx create-remix@latest remix-sample-app

cd remix-sample-app

Dockerfile を作成

デプロイするコンテナイメージとして、 Dockerfile を作成します。

FROM node:20-alpine as base

# 作業ディレクトリを設定
WORKDIR /app

# 依存関係のインストール
FROM base as deps
COPY package.json yarn.lock ./
RUN yarn install

# ビルド
FROM base as build
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN yarn build

# 本番環境
FROM base as production
ENV NODE_ENV=production

# 必要なファイルをコピー
COPY --from=build /app/build ./build
COPY --from=build /app/public ./public
COPY --from=deps /app/node_modules ./node_modules
COPY package.json ./

# アプリケーションを起動
CMD ["yarn", "start"]

# ポートを公開
EXPOSE 3000

Dockerfile の動作確認

Dockerfile に基づき、コンテナをビルドします。

docker build -t remix-app .

ビルド後のコンテナを起動し、アプリを起動できるか確認します。

docker run -it -p 3000:3000 remix-app

http://localhost:3000 にアクセスし、 Remix アプリが表示されると成功です。
コンテナを停止する時は、コンテナ起動中のターミナルで ctrl + C を入力します。

gcloud コマンド初期設定

Google Cloud で新しいプロジェクトを作成します。
プロジェクト名は sample-project と入力します。

作成後のプロジェクト ID は、 sample-project-${数字} になります。
後述の作業で使用するため、メモします。

gcloud コマンドを初期設定します。
対話形式なため、以下の質問に沿って入力を進めます。

gcloud init

質問	回答
Pick configuration to use:	Create a new configuration を選択
Enter configuration name. Names start with a lower case letter and contain only lower case letters a-z, digits 0-9, and hyphens '-':	sample-project
Pick cloud project to use:	Create a new project を選択
Enter a Project ID. Note that a Project ID CANNOT be changed later. Project IDs must be 6-30 characters (lowercase ASCII, digits, or hyphens) in length and start with a lowercase letter.	sample-project-${数字}

gcloud の設定値を出力し、 project が入力されていることを確認します。

$ gcloud config list
[core]
account = <your_email>
disable_usage_reporting = False
project = sample-project-${数字}

Your active configuration is: [sample-project]

もしも project が未入力の場合、以下のコマンドを実行してください。

gcloud config set project sample-project-${数字}

デプロイに必要な API を有効化

デプロイに必要な API を有効化します。
他にも必要な API はありますが、 gcloud コマンド実行時に合わせて有効化できるため、手動で設定が必要な API のみ実行します。

gcloud services enable storage-component.googleapis.com
gcloud services enable artifactregistry.googleapis.com

Artifact Registry にコンテナイメージ登録

Artifact Registry は、Google Cloud でコンテナイメージなどを保存、管理するためのサービスです。ちなみに、類似機能を持つ Container Registry はありますが、2024年6月26日時点では非推奨となり 2025年3月18日に提供終了するため、 Artifact Registry を使用します。

初めに、 Artifact Registry に対して、コンテナイメージを保存するためのリポジトリを作成します。

gcloud artifacts repositories create remix-repo --repository-format=docker --location=us-central1 --description="Docker repository for Remix app"

次に、Docker デーモンが us-central1-docker.pkg.dev ホストに対して認証できるように設定します。 Artifact Registry リポジトリにイメージを push するために必要です。

gcloud auth configure-docker us-central1-docker.pkg.dev

そして、アプリをコンテナイメージとしてビルドします。
なお、platform オプションの指定について、 M1 Mac の CPU は ARM64 アーキテクチャを使用することから、デフォルトでは ARM64 向けのイメージがビルドされます。しかし、Cloud Run は Linux x86_64 ABI 形式をサポートするため、 linux/amd64 と指定します。

docker build --platform linux/amd64 -t us-central1-docker.pkg.dev/sample-project-${数字}/remix-repo/remix-app:v1 .

最後に、Artifact Registry のリポジトリに対し、コンテナイメージをプッシュします。

docker push us-central1-docker.pkg.dev/sample-project-${数字}/remix-repo/remix-app:v1

Cloud Run にデプロイ

Cloud Run にデプロイします。

gcloud run deploy remix-app --image us-central1-docker.pkg.dev/sample-project-${数字}/remix-repo/remix-app:v1 --platform managed --region us-central1

Cloud Run の管理画面にアクセスし、デプロイ後の URL を確認します。
URL にアクセスし、 Remix アプリの画面が表示されたら作業完了です。

作成したリソース削除

ここまでの操作では、料金は無料枠に収まります。
残す理由が無い場合はリソースを削除しましょう。
なお、以下のプロダクトにリソースが作成されています。

• Cloud Run
• Artifact Registry
• Cloud Build
• Cloud Storage

まとめ

実装コードは以下の通りです。

https://github.com/masayuki-0319/remix-sample-app-with-cloudrun

参考 URL

• Cloud Run | Google Cloud
• コンテナランタイムの契約
• Artifact Registry  |  Google Cloud
• 料金  |  Container Registry  |  Google Cloud