NuxtアプリをGAEにデプロイする(Node.js 10)

NuxtアプリをGAEにデプロイする(Node.js 10)
公開日時
更新日時

GAEへの自動デプロイ

下記記事を参考にさせていただいた。

Nuxt.js アプリケーションを CircleCI 経由で App Engine Standard 環境へと自動デプロイする - Qiita

Node.js version 10が使えるようになっていたので[[runtime: nodejs10]]に変更。

# app.yaml

runtime: nodejs10
env: standard

デプロイの際にいくつかエラーが出てハマったので対応内容をまとめておく。

遭遇したエラーたち

ERROR: (gcloud.app.deploy) INVALID_ARGUMENT: This deployment has too many files. New versions are limited to 10000 files for this app.

CircleCIでGAEにデプロイする際に発生。

アップロード対象ファイルが多すぎて制限に引っかかった。

そもそもデプロイに必要なファイルはビルド後のファイル(.nuxt以下)のみでいいので、余計なファイルをデプロイ対象から外すことに。

app.yamlにskip_filesを追記する方法だとエラーになり、[[.gcloudignore]]を使えとのことだったので以下を追加。

# .gcloudignore

.git
.gitignore

node_modules/
src/

Nuxt Fatal Error Error: Cannot find module 'typescript'

CIでデプロイができるようになった後、アプリのURLにアクセスすると「Error: Server Error」と表示され、500エラーになってしまった。

これだけだと原因が分からないので、ログビューア(GCPメニューの「Logging」 => 「ログビューア」から確認できる)でログを確認してみるとNuxt Fatal Error Error: Cannot find module 'typescript'というエラーが起きていた。

package.jsonの@nuxt/typescriptライブラリがdevDependenciesに含まれてしまっていたので、dependenciesに移動した。

同様に[[nuxt.config.ts]]のmodulesにあるライブラリをdependenciesに移動。

// package.json
{
  "dependencies": {
    "@nuxt/typescript": "^2.8.1"
  },
  "devDependencies": {
  }
}

Nuxt Fatal Error Error: No build files found in /srv/.nuxt/dist/server.

gcloudignoreのドキュメントに.gitignoreの設定を読み込むことができるとあったので、最初は下記のように書いていた。

# .gcloudignore                                             

.git
.gitignore
#!include:.gitignore

.gitignoreの中には.nuxtが含まれていたため、No build files foundエラーが発生。

include記述を止めてデプロイ対象外にするファイルを指定するようにした。

# .gcloudignore

.git
.gitignore

node_modules/
src/

これでGAE上でNuxtアプリが動くようになった。

何か問題があったらまずログビューアでログを確認するようにするのが大事。

参考


Related #js

Next.jsのPreview Mode時はAnalyticsを無効化する

cookieの__next_preview_dataキーで判定

next.jsにtailwindcssを導入する

VSCodeのTailwind CSS IntelliSense拡張が便利

Alexaに気温と二酸化炭素濃度を教えてもらう

「Alexa、気温」でセンサー情報を教えてくれるようになった

ESLintでimport文を自動で並べ替える

eslint-plugin-simple-import-sortを使う