Next.js のアプリを Google App Engine にデプロイする

概要

Next.js で作ったアプリをとりあえず Google Cloud の Google App Engine (GAE) にデプロイする方法です。

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

今回は create-next-app コマンドを使って作成されたアプリケーションをそのまま Google App Engine にデプロイすることにします。

App Engine のサポートしている Node.js のうち最新のバージョンは 22 のようなので、Node.js は v22 を使います。

App Engine がサポートしているバージョン一覧は以下のページから確認できます。

cloud.google.com

実際に Next.js のプロジェクトを作成したコマンドはこちら

$ npx create-next-app@latest <project-name>
Need to install the following packages:
create-next-app@15.3.1
Ok to proceed? (y)

# 各種設定はすべてデフォルトを採用
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for `next dev`? … No / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes

Google App Engine にデプロイ

App Engine の設定ファイル app.yaml を定義します。今回は最低限の設定のみ定義しました。

# Node.js v22 で動かす
runtime: nodejs22
instance_class: F1

app.yaml に設定できる内容は以下のドキュメントを参考にしてください。

cloud.google.com

app.yaml を作成したらデプロイコマンドを叩きます。

gcloud app deploy --project <GoogleCloudProjectName>

デプロイ結果はの URL には、Google Cloud の Web の UI から飛べます。

おまけ

このブログのサムネイルは Chat GPT で作成しましたが、自分の思い通りに作ってもらうのは難しいです。