Nuxt.js 公式ドキュメントに沿って GAE デプロイしたけどエラーになったので対応した

Nuxt.js を GAE (Google AppEngine) にデプロイするのに詰まってしまったのでその対応の備忘録

ちなみに Nuxt.js は SPA で作っている。

起きたエラー

ja.nuxtjs.org

Nuxt.js のドキュメントを参考にデプロイを進めたものの、デプロイしたはずのページでは以下のメッセージが表示されていた。

Error: Server Error The server encountered an error and could not complete your request. Please try again in 30 seconds.

30秒どころか一晩経っても正常に動く気配はない。

対応したこと

GAE にデプロイする際、app.yml が必要になるが、Nuxt.js の公式ドキュメントでは以下のように書かれていた。

runtime: nodejs10

instance_class: F2

handlers:
  - url: /_nuxt
    static_dir: .nuxt/dist/client
    secure: always
,,,

結論から言うと、static_dir の指定先がまずかった。yarn build コマンドだとたしかに .nuxt/dist/client にミニファイされたコードが生成されるが、それは SSR のお話。

SPA だと yarn generate コマンドで静的ファイルを生成するので、dist としなきゃならなかった。

変更後

runtime: nodejs12

instance_class: F2

handlers:
  - url: /dist
    static_dir: dist
    secure: always
,,,

原因究明した手順

gcloud app logt tail コマンドで GAE のログをリアルタイムで確認することができる。
この存在に気づくまで GAE のダッシュボードで必死に探していた。いやいや、そっちにもあってほしいんだが。

確認してみると、こんなエラーをずっと吐いていたようだ。

2020-12-23 14:40:57 default[20201223t233734]  "GET / HTTP/1.1" 304
2020-12-23 14:40:58 default[20201223t233734]  "GET /_nuxt/xxxxxx.js HTTP/1.1" 404
2020-12-23 14:40:58 default[20201223t233734]  "GET /_nuxt/xxxxxx.js HTTP/1.1" 404
2020-12-23 14:40:58 default[20201223t233734]  "GET /_nuxt/xxxxxx.js HTTP/1.1" 404
2020-12-23 14:40:58 default[20201223t233734]  "GET /_nuxt/xxxxxx.js HTTP/1.1" 404

「GET /-nuxt/xxxxxx.js ？」
「いや、yarn build したら .nuxt/dist/client になるはずじゃない？」
と、ここでやっと気づいて対応することができた。