Next.jsをGCP Cloud Run上で実行する方法

Next.jsのチュートリアルをGCP Cloud Run上で動かすための方法をメモ。

概要

1. Next.JSの6 fetching dataチュートリアルをやる
2. Docker 化する
3. Cloud Container Registryにpushする
4. Cloud Runにdeployする
5. アクセスして動ていることを確認

next.jsのtutorialをcloneする

git clone https://github.com/zeit/next-learn-demo.git

Tutorialをやる

今回はserverless設定を試したかったので、6-fetching-dataを使います。

cd next-learn-demo/6-fetching-data

Tutorial自体は下記を見ながらやってください。
https://nextjs.org/learn/basics/fetching-data-for-pages

詳細の説明は省きますが、映画情報APIから情報をとってきて成形するチュートリアルになってます。

Docker化する

手元の環境に合わせてnode12でDokcerコンテナを作ります。

Dockerfile

FROM node:12.16.1-alpine

WORKDIR /app

ENV PATH /app/node_modules/.bin:$PATH

COPY . .
RUN npm install && npm run build

# start app
CMD [ "npm", "run", "start" ]

Cloud Run用に公開するポートを指定する

Cloud RunはPORT環境変数が公開されることを期待するので、package.jsonを書き換えます。
"start": "next start -p ${PORT}"がミソ。

package.json

{
  "name": "hello-next",
  "version": "1.0.0",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start -p ${PORT}"
  },
  "license": "ISC",
  "dependencies": {
    "isomorphic-unfetch": "^3.0.0",
    "next": "latest",
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  }
}

ここで、いったんちゃんと動くか試しておくと良さそうです。
shusaku-next-cloudrunは適当な名前なので好きな名前を付けてください。

docker build . -t shusaku-next-cloudrun:latest
PORT=8080 docker run -p8080:${PORT} shusaku-next-cloudrun

localhost:8080にアクセスしてレスポンスがあればOKです。

Cloud Registryへ登録

Buildしたdockerにtagを打って、Cloud Registryへ登録します。google cloud sdkはインストールしておいてください。

docker tag shusaku-next-cloudrun gcr.io/${PROJECT_NAME}/shusaku-next-cloudrun:latest
docker push gcr.io/${PROJECT_NAME}/shusaku-next-cloudrun:latest

Cloud Runへdeploy

この時いくつかコツがあります。

• --allow-unauthenticated を付けておくと、デプロイした後に振られたURLで動作確認できます。
• --projectはなくても動きますが、複数のprojectをgcloudコマンドで使っていると、defaultのconfigを読みに行ってしまってうまくいきません
• 初めて実行する場合は、認証情報に関するエラーが出るので gcloud auth configure-dockerを実行する必要があるかも。

gcloud beta run deploy --image gcr.io/${PROJECT_NAME}/shusaku-next-cloudrun --project ${PROJECT_NAME} --platform managed --allow-unauthenticated

Browserからアクセス

URLが最後表示されるのでそこからアクセスしたらOK