NowにNuxtでデプロイして502エラーになった話

2020-02-17

元々 Vercel にデプロイしていた Nuxt アプリを更新しようとしたら，ビルドは成功するものの Web ページが表示できない状態になりました．

エラーの詳細

An error occurred with this application.
This is an error with the application itself, not the platform.

502: BAD_GATEWAY
Code: `NO_STATUS_CODE_FROM_FUNCTION`

ビルド時のログはプロジェクトの [Overview] タブ > [View Logs] で確認できます．ビルドに失敗した場合はエラーが出ているはずですが，確認したところ WARN は出ているもののビルドは完了していました．

環境

MacBook Air (13-inch, 2017)
macOS High Sierra
Node.js 13.7.0
npm 6.13.7

設定

now の設定に関係ありそうなところだけ抜き出しています．

package.json

"engines": {
  "node": "12.16"
},
"scripts": {
  "build": "nuxt build",
  "start": "nuxt start",
  "now-build": "nuxt build"
}

now 上の Node.js のバージョンは engines で指定するようです．開発 PC 上では 13.7.0 で動かしていましたが，now は対応していませんでした．対応していないバージョンを指定するとエラー文が表示されるので，それに従えばいいと思います．

ただ，engines を指定しなくても動いていたので，設定は必須ではないようです．

now のビルドコマンド等は Project Settings で設定できるようになっており，フレームワークプリセットを Nuxt に設定していれば nuxt build or build from package.json がデフォルトです．初期設定では Other になっており，build or now-build from package.json if it exists がデフォルトです（自動で認識されたりされなかったり）．

結論としては build を正しく設定していれば now-build は要らなそうです．

now.json

バージョン１と２で設定方法が異なります．

（追記 2020.12.28）

@nuxtjs/now-builder から @nuxtjs/vercel-builder に変更されました．

now.json

{
  "version": 2,
  "builds": [
    {
      "src": "nuxt.config.js",
      "use": "@nuxtjs/vercel-builder",
    }
  ]
}

ドキュメントの設定をそのまま使用しています．

デプロイ

now はコマンドでデプロイする他に，GitHub 等と連携させて master ブランチが更新されたときに自動的にデプロイする方法もあります．

両方試しましたが，どちらもビルドは成功し，ページは表示できませんでした．

エラーステータス

NO_STATUS_CODE_FROM_FUNCTION

エラー文と操作パネルの名称に整合性があるのかよくわかりませんが，プロジェクトの Functions タブ > Realtime Logs (Errors) でエラーが確認できます．

ビルドに成功しても 502 エラーで表示できない場合はこのタブからエラーが見られるようです．

内容を控えるのを忘れましたが，今回の場合はどうやらパッケージが見つからないようでした．

作成していた Web サイトでは SVG を表示するために nuxt-svg-loader を使用していました．ビルドだけでなく動作時にも必要になるパッケージのようですが，devDependencies に指定されていたため，インストールされていませんでした．

dependencies に移動させると起動できました．

最後に

Vercel は非常に便利だと思います．独自ドメインを指定することができますし，HTTPS も使用できます．デプロイも簡単です．

GitHub と連携して Push に合わせて自動ビルドすれば快適に SSG でサイトが作れます．

Node.js サーバが使える Heroku も SSR 等には便利ではありますが，独自ドメインを使用すると（自分で証明書を用意すれば可能だが） HTTPS が無料で利用できなかったり，一定時間接続がないとスリープしてしまったりするので，うん．

ただ，Vercel はエラーがよくわかりにくい気もします．深夜の作業で眠かったのかもしれませんが…

mktia's note