概要

Google App Engine にnext.jsで実装したFrontendサービスをデプロイするための手順とポイントについてまとめます。
また、gcloud　SDKはローカル環境で利用可能な状態であることを想定します。

package.json

最初にpackage.json内に記載のscriptをGCPにデプロイするために編集します。（これは必須ではありませんが開発効率向上のため設定）

package.json

{
    "scripts": {
        "dev": "next",
        "build": "rm -rf ./build && NODE_ENV=production next build",
        "start": "next start",
        "deploy": "npm run build && gcloud app deploy",
        "export": "next export"
    },
    "dependencies":{

       '''''''''''''略'''''''''''''''''''

    }
}

デプロイのために書き加えた部分はbuildとdeployです。

まずbuildの部分ですが、nextの場合buildすると通常は.nextディレクトリ下にビルドされますが、GAEはこれを認識できないのでbuildフォルダを作成してその中にビルドファイルを入れるようにします。
次にdeployではnom run deployを実行してそのまままGAEへのデプロイも行うようにしてあります。

また、たまにstartのスクリプトをnext start -p 8080としている記事を目にしますが、この記述はパフォーマンスの面で良くありません（スケーリング時、不必要に何度も実行されてしまう。）ので、次のapp.yamlの中のentrypointで記述するようにします。

app.yaml

service: front
runtime: nodejs12
entrypoint: next start -p $PORT
handlers:
- url: .*
  script: auto

今回はfrontendとbackendを分けているのでserviceにforntと記述しておくことでGAE内でのserviceとして独立させています。
entrypointの部分でnext start -p $PORTと記述することでアプリ起動時のコードを設定できます。
アプリの起動時に entrypoint コマンドを実行することで、デフォルトの起動動作をオーバーライドすることができ、今回の場合だと環境変数PORTにポートを開いてアプリをスタートすることができます。
entorypointの記述が誤っているとHTTP500エラーが出てしまう場合があるので、entrypointに正しく記述をすることで修正できます。

あとはpackage.jsonで設定したnpm run deployを実行してあげることで自動的にGAEにデプロイされます。

終わり

今回の例は自分の実行環境下での1例であり、あくまで参考程度にしていただけたらと思います。
間違っている部分等があればご指摘よろしくお願いします。

next.jsをGAEにデプロイ

概要

package.json

app.yaml

終わり