Zenn
🚀

Next.jsで作ったアプリをGoogle App Engineにデプロイする

2020/12/28に公開
GCP
Next.js
App Engine
tech

なぜGoogle App Engineへデプロイ？

Next.js製アプリのデプロイ先としてはvercelがやはり第一候補だとは思います。
https://vercel.com/

ですが他のGCPサービスと連携させていたり、Identity-Aware Proxyでノーコードでアクセス制限をかけたりしたい場合などはGoogle App Engineにデプロイするのも有効かと思います。

コツが必要？

ググると以下の公式のディスカッションのスレッドが見つかります。

https://github.com/vercel/next.js/discussions/12474

これによるとやや独自のノウハウが必要そうな感じだったのですが、今はApp Engine側の仕様が変わったようで特に何も考えなくても普通にデプロイできてしまいました。

...で終わりにするのもアレなので一応手順を書いておきます。

手順

1. package.jsonをいじって環境変数の$PORTでNext.jsのサーバが待ち受けるようにする

アプリケーションの起動

デフォルトでは、ランタイムは node server.js を実行してアプリケーションを起動します。 package.json ファイルで start スクリプトを指定すると、ランタイムは代わりに指定された起動スクリプトを実行します。
アプリで HTTP リクエストを受信するには、start スクリプトでホスト 0.0.0.0 とPORT 環境変数で指定され、Node.js で process.env.PORT としてアクセスできるポートでリッスンするウェブサーバーを起動する必要があります。

とのことなので以下のようにしましょう。ついでにyarn deployでデプロイできるように追加しています。

diff --git a/package.json b/package.json
index 71b0fd8..6921f17 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,8 @@
   "scripts": {
     "dev": "next",
     "build": "next build",
-    "start": "next start",
+    "start": "next start -p $PORT",
+    "deploy": "yarn build && gcloud app deploy",
     "type-check": "tsc"
   },
   "dependencies": {

2. app.yamlを追加する

普通に書けばOKです。

runtime: nodejs12
handlers:
  - url: /.*
    secure: always
    script: auto

3. おもむろにデプロイ

$ yarn deploy

以上です。

その他メモ

  • 念の為Catch all routesも試してみましたが問題ありませんでした。
  • ISR(Incremental Static Regeneration)はさすがに正しく動作しませんでした。
    • エッジキャッシュには載るので一見正しく動いているように見えるのですが、ログを見るとファイルシステムへの書き込みエラーが出ていました。
    • キャッシュファイルがローカルに書き込めていないということなのでrevalidate秒後のページ再生成でエラーが出ると、次のアクセスでエラーになるんじゃないかなと思います。(ISR使ってないので自信はないです。)
  • 検証に使ったコード https://github.com/satococoa/nextjs-appengine-sample

Discussion