工事中

Cloud Run上でNext.jsのアプリを動かす方法
2022年5月4日
目次
Open TOC
link

対象読者

    Vercel以外でNext.js (SSR) のアプリを動かしてみたい方
    GCPのCloud Run上にコンテナアプリをデプロイしてみたい方
link

はじめに

Cloud RunはAWSでいうところのAWS App Runnerのようなサービスで、比較的安価にコンテナアプリを動かすためのサービスです。

本記事では、コンテナをGoogle Cloud Buildでビルドし、ビルドしたものをCloud Runにデプロイします。

link

Dockerfileの準備

Dockerfile側は特に特殊な設定は不要です。

実際にDockerを動かしてみて、3000ポートにアクセスできれば、準備完了です。

Dockerfile
1
FROM node:16-alpine
2
3
RUN apk add --no-cache libc6-compat
4
5
WORKDIR /app
6
7
COPY package.json yarn.lock ./
8
RUN yarn install --frozen-lockfile
9
10
COPY . .
11
12
ENV NODE_ENV production
13
RUN yarn build
14
15
EXPOSE 3000
16
17
ENV PORT 3000
18
19
CMD ["yarn", "start"]
link

Code Buildの準備

あらかじめGCP側でCode Buildを準備しておきます。

ここで、連携するGitHubの設定やブランチやタグをpushしたときに、Code Buildを実行するように設定できます。

CodeBuildのトリガー設定

構成については、「Code Build 構成ファイル (yaml または json)」を指定します。

環境変数を設定する場合は「代入変数」という箇所に「 _ 」付きで追加します。

CodeBuildの環境変数設定
link

codebuild.yamlの準備

公式を確認しながら、以下のように設定します。

codebuild.yaml
1
steps:
2
# 環境変数の設定
3
- name: node:16.15.0
4
entrypoint: yarn
5
args: [ "run", "create-env" ]
6
env:
7
- 'API_KEY=${_API_KEY}'
8
- 'SERVICE_DOMAIN=${_SERVICE_DOMAIN}'
9
# ビルド
10
- name: 'gcr.io/cloud-builders/docker'
11
args: ['build', '-t', 'gcr.io/$PROJECT_ID/サービス名:$COMMIT_SHA', '.']
12
# Container Registryにデプロイ
13
- name: 'gcr.io/cloud-builders/docker'
14
args: ['push', 'gcr.io/$PROJECT_ID/サービス名:$COMMIT_SHA']
15
# Cloud Runにデプロイ
16
- name: 'gcr.io/google.com/cloudsdktool/cloud-sdk'
17
entrypoint: gcloud
18
args:
19
- 'run'
20
- 'deploy'
21
- 'サービス名'
22
# 誰でもアクセスできるように設定
23
- '--allow-unauthenticated'
24
- '--image'
25
- 'gcr.io/$PROJECT_ID/サービス名:$COMMIT_SHA'
26
- '--region'
27
- 'asia-northeast1'
28
# 最小起動インスタンスを設定
29
- name: 'gcr.io/google.com/cloudsdktool/cloud-sdk'
30
entrypoint: gcloud
31
args:
32
- 'run'
33
- 'services'
34
- 'update'
35
- 'サービス名'
36
- '--min-instances'
37
- '1'
38
- '--region'
39
- 'asia-northeast1'
40
timeout: "1600s"
41
images:
42
- 'gcr.io/$PROJECT_ID/サービス名:$COMMIT_SHA'
link

環境変数の設定 - codebuild.yamlの準備

nameはクラウドビルダー (使用するコンテナ) を指定するために使います。

以下ではCloud Buildに登録した環境変数をコンテナ内で使用するための設定です。

1
- name: node:16.15.0
2
entrypoint: yarn
3
args: [ "run", "create-env" ]
4
env:
5
- 'API_KEY=${_API_KEY}'
6
- 'SERVICE_DOMAIN=${_SERVICE_DOMAIN}'

package.jsonでは以下のようになってます。

package.json
1
{
2
"name": "sample",
3
"version": "0.1.0",
4
"private": true,
5
"scripts": {
6
"dev": "next dev",
7
"build": "next build",
8
"start": "next start",
9
"create-env": "printenv > .env"
10
},
11
"dependencies": {
12
...
13
},
14
"devDependencies": {
15
...
16
}
17
}
link

ビルド - codebuild.yamlの準備

gcr.io/cloud-builders/dockerを使用してビルドします。

サービス名は適当で大丈夫です。

$PROJECT_IDや$COMMIT_SHAは自動で値が入ります。

1
- name: 'gcr.io/cloud-builders/docker'
2
args: ['build', '-t', 'gcr.io/$PROJECT_ID/サービス名:$COMMIT_SHA', '.']
link

デプロイ - codebuild.yamlの準備

コンテナレジストリへデプロイし、gcloudを使ってCloud Runにデプロイします。

デフォルトだと、未認証ユーザーのアクセスが制限されるので、gcloudの引数に--allow-unauthenticatedを設定しておきます。

codebuild.yaml
1
# Container Registryにデプロイ
2
- name: 'gcr.io/cloud-builders/docker'
3
args: ['push', 'gcr.io/$PROJECT_ID/サービス名:$COMMIT_SHA']
4
# Cloud Runにデプロイ
5
- name: 'gcr.io/google.com/cloudsdktool/cloud-sdk'
6
entrypoint: gcloud
7
args:
8
- 'run'
9
- 'deploy'
10
- 'サービス名'
11
# 誰でもアクセスできるように設定
12
- '--allow-unauthenticated'
13
- '--image'
14
- 'gcr.io/$PROJECT_ID/サービス名:$COMMIT_SHA'
15
- '--region'
16
- 'asia-northeast1'
link

Cloud Runの設定

デフォルトは最小インスタンスがゼロなので、--min-instancesで値を設定しておきます。

その他、ビルドのタイムアウトなどを設定しておきます。

1
# 最小起動インスタンスを設定
2
- name: 'gcr.io/google.com/cloudsdktool/cloud-sdk'
3
entrypoint: gcloud
4
args:
5
- 'run'
6
- 'services'
7
- 'update'
8
- 'サービス名'
9
- '--min-instances'
10
- '1'
11
- '--region'
12
- 'asia-northeast1'
13
timeout: "1600s"
14
images:
15
- 'gcr.io/$PROJECT_ID/サービス名:$COMMIT_SHA'
link

参考

cloudbuild.yamlの書き方

クラウドビルダーについて

未認証アクセスの許可

Cloud Run最小インスタンスの設定

link

おわり

以上で設定完了です。

Cloud RunのAPIを有効化し、ビルドを走らせるとデプロイできるようになります。

自己紹介
はじめまして Pilefortです。
東京でエソジニアをしてます。
興味のあるスタックは、JavaScript (React, Vue), TypeScript, Rust, WebAssembly, AWS, Pulumi, Serverless Frameworkです。
このブログでは、普段の業務や趣味で気になったことをまとめたり、フロントやAWS, GitHubやTwitterで見かけた面白い記事やニュースをまとめるためのものです。少しでも何かの役に立てば幸いです。
最近の活動
技術書典12 (2022.1.22 - 2022.1.30) で本を出しました。
2021年に登場したり、大幅なアップデートがあったWebサービスや開発ツール、ライブラリ、フレームワークを紹介した本です。
TailwindCSSv3やRailway, Partytown, Nextjs12なんかの紹介やChrome DevToolsやChrome Extensions Manifest V3などの話を書いてます。
うぇぶちぇんじろぐ2022
サイトマップ
Notes
業務や趣味での気づき・メモ
Scraps
雑記。ネットで見つけた面白い記事やニュース
Snippets
記事にするまでもないけど、便利なコマンドや豆知識