Zenn
🍎

Nextjs(custom server)をCloudRunにデプロイする

2024/09/07に公開
Docker
Next.js
Cloud Run
GitHub Actions
tech

前提

  • Nextjsプロジェクトがdocker化されている。
  • GCPアカウントが事前に作成されている。

やりたいこと

GithubActionsを使ったCloudRunへのCI/CD。

手順

まずはGCPコンソールにて設定を行っていきます。

CloudRunのAPIを有効化

CGPコンソールにて

サービスアカウントの作成

CGPコンソールにて

に進みます。サービスアカウント作成時には以下のようにロールを指定します。

CGPコンソールにて

JSONがダウンロードされるのでJSONごと
Github Actions Secretにコピーペーストします。

今回はシークレット,変数を以下指定してあります。

  • 【Secrets】NEXT_PUBLIC_GRAPH_URL：サービスアカウントのシークレットJSON（丸ごと）
  • 【Variables】DATABASE_URL：Neon（Postgresの接続文字列）

次に対象のGithubActionsフローファイルを作成していきます。

ワークフローファイルの作成

最後に
.github/workflows/deploy.yml
にワークフローファイルを作成します。

  • プロジェクト名：shotenweb
  • サービス名：nextjs
  • リージョン：asia-northeast1
  • 対象ブランチ：main
name: Deploy

on:
  push:
    branches:
      # mainブランチにpushした際にactionsが起動する
      - main

env:
  # CloudRunに表示されるサービス名
  SERVICE_NAME: nextjs
  # CloudRunが利用するポート（Docker側と合わせる必要がある）
  PORT: 8080
  # GCPのプロジェクト名
  GCP_PROJECT_ID: shotenweb
  # デプロイされるリージョン
  GCP_REGION: asia-northeast1
  # (Container Registry)/(プロジェクト)/(サービス)/(GithubコミットSHA)
  IMAGE: asia.gcr.io/shotenweb/nextjs:${{ github.sha }}

jobs:
  deploy-to-cloud-run:
    runs-on: ubuntu-latest
    steps:
      # リポジトリクローン
      - name: Checkout the repository
        uses: actions/checkout@v2

      # service account keysを使ったGCPへの認証
      - id: "auth"
        uses: "google-github-actions/auth@v0"
        with:
          credentials_json: "${{ secrets.NEXTJS_GCP_SA_KEY }}"

      # Container Registryへの認証情報を保持する
      - name: Configure docker to use the gcloud cli
        run: gcloud auth configure-docker --quiet

      # dockerビルド
      - name: Build a docker image
        run: docker build -t ${{ env.IMAGE }} .

      # Container Registryへpush
      - name: Push the docker image
        run: docker push ${{ env.IMAGE }}

      # CloudRunデプロイ
      # NODE_OPTIONSはパフォーマンス上げるために設定しています
      - name: Deploy to Cloud Run
        run: |
              gcloud run deploy ${{ env.SERVICE_NAME }} \
              --image ${{ env.IMAGE }} \
              --port ${{ env.PORT }} \
              --project ${{ env.GCP_PROJECT_ID }} \
              --region ${{ env.GCP_REGION }} \
              --platform=managed \
              --allow-unauthenticated \
              --memory 512Mi \
              --cpu 1 \
              --quiet \
              --set-env-vars "DATABASE_URL=${{ vars.DATABASE_URL }}, \
              NODE_OPTIONS=--max-old-space-size=512"

感想

CI/CDに組み込むことができて良かったです。AWSでマネージドコンテナサービスをCI/CDする場合はどうしてもFargate、Apprunnerと両者ともある程度AWSの知識がいるのですが、CloudRunはサービスアカウントにあてるロール以外はあまり知識無く実現できて良かったです。サクッとNextjsプロジェクトを確認してもらうユースケースなどに向いてそうですね。あと、最低メモリ128MiBにしようとしたのですが、NextjsがCustomServerのせいなのかRun時にエラーおきてしまいました。仕方ないですね。。

関連

https://zenn.dev/webshoten/articles/103b69650b007d
https://zenn.dev/webshoten/articles/2d07b4467805ff

参考

https://qiita.com/takengineer1216/items/cbbf95f9789996811575

Discussion