NowにNuxtでデプロイしたら502エラーになったときの話

元々 now にデプロイしていた 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

バージョン1と2で設定方法が異なります.

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

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

デプロイ

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

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

NO_STATUS_CODE_FROM_FUNCTION の詳細

エラー文と操作パネルの整合性があるのかよくわかりませんが,プロジェクトの [Functions] タブでエラーが確認できました.

内容を控えるのを忘れましたが,どうやらパッケージが見つからないようでした.

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

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

最後に

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

Heroku も便利ではありますが,独自ドメインを使用すると (自分で証明書を用意すれば可能だが) HTTPS が無料で利用できなかったり,一定時間接続がないとスリープしてしまったりするので,うん.

ただ,now はエラーがよくわかりにくい気もします.深夜の作業で眠かったのかもしれないですが.

タイトルとURLをコピーしました