🗂

Next.jsをCloud Runに自動デプロイする

2023/03/02に公開

Docker

これはなに

Next.jsのアプリケーションををCloud Runで動かしたいと思ったので、サンプルを作って試してみます。
今回はGitHubのmainブランチにpushされた時にNext.jsのアプリケーションをCloud Run上にデプロイして行こうと思います。

Cloud Runとは

Googleが提供するサーバーレスでコンテナを実行できるプラットフォームです。Cloud Runを使用するとインフラを気にする必要がほとんどなくなるため、コードの作成に集中ができます。

Next.jsのアプリケーションの作成

$node -v
v18.12.1

sample-appというNext.jsのアプリケーションを作成します。

$npx create-next-app@latest --typescript

作成完了後、ローカルで表示できるか確認します。

$cd sample-app
$npm run dev

http://localhost:3000/にアクセス。

しっかり表示できてますね。

next.config.jsの設定

next.config.jsに以下のような設定を追加します。

next.config.js

module.exports = {
  // ... rest of the configuration.
  output: 'standalone',
}

output: 'standalone'とは

設定ファイルにoutput: 'standalone'と記載すると、build時に.next/standaloneが生成されます。これは、node_modulesを含む、本番環境でのデプロイに必要なファイルのみをコピーしたフォルダです。
さらにnext startの代わりに使用できるserver.jsファイルも生成されます。これによりビルドサイズも削減できます。

Dockerfileの作成

ありがとたいことに、Next.jsがCloud Runにデプロイする際のサンプルを用意してくれているので、それを参考にして以下のようなDockerfileを作成します。

$touch Dockerfile

Dockerfile

FROM node:18-alpine AS base

# Install dependencies only when needed
FROM base AS deps
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
RUN apk add --no-cache libc6-compat
WORKDIR /app

# Install dependencies based on the preferred package manager
COPY package.json ./
COPY package-lock.json ./
RUN npm ci


# Rebuild the source code only when needed
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

# Next.js collects completely anonymous telemetry data about general usage.
# Learn more here: https://nextjs.org/telemetry
# Uncomment the following line in case you want to disable telemetry during the build.
# ENV NEXT_TELEMETRY_DISABLED 1

# RUN yarn build

# If using npm comment out above and use below instead
RUN npm run build

# Production image, copy all the files and run next
FROM base AS runner
WORKDIR /app

ENV NODE_ENV production
# Uncomment the following line in case you want to disable telemetry during runtime.
# ENV NEXT_TELEMETRY_DISABLED 1

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /app/public ./public

# Automatically leverage output traces to reduce image size
# https://nextjs.org/docs/advanced-features/output-file-tracing
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs

EXPOSE 3000

ENV PORT 3000

CMD ["node", "server.js"]

GitHubにリポジトリを作成

GitHubにリポジトリを作成し、pushします。

$git add Dockerfile
$git commit -m "Add Dockerfile and next.config.js settings"
$git remote add origin git@github.com:ohtasoji/sample-app.git
$git branch -M main
$git push -u origin main

ソースコードはこちらです。
https://github.com/ohtasoji/sample-app

Cloud Runを準備する

1.プロジェクトの作成

Google Cloud Platformにアクセスしプロジェクトを作成します。

2.サービスの作成

Cloud Runにアクセスしサービスを作成します。

3.Cloud Runの設定

今回はGitHubのmainブランチにpushされたら自動でデプロイをしたいので、「ソースリポジトリから新しいリビジョンを継続的にデプロイする」を選択します。そしてサービス名とリージョン記載し、認証の欄は「未認証の呼び出しを許可」を選択します。

4、Cloud Buildの設定

3の画面からCloud Buildの設定クリックして、先ほどGitHubにあげたリポジトリを選択します。

そして作成をクリックし、数分待つと。。。

全世界に公開されました！便利！URLはCloud Runの設定画面から確認できます。

ソースコードを変更してみる

ソースコードを変更したときに自動でデプロイされるか確認したいので、ソースコードを変更してみます。

pages/index.tsx

+43 <h1>こんにちは</h1>

そしてリモートリポジトリにpushすると！

$git add pages/index.tsx
$git commit -m "こんにちは"
$git push origin main

「こんにちは Next.js13」と表示されてます。

最後に

インフラのことをほとんど気にせず、これだけ簡単に自動でデプロイできてしまうのはCloud Runの魅力ですね!次はNext.js✖︎Cloud Run✖︎PlanetScale技術を触ってみたいなと思います。