どーも、ぐるたか@guru_takaです。
Nuxt製アプリをGAEにデプロイしたので、方法をまとめます。
目次
大まかな流れ
STEP.1
Nuxt製アプリをブビルド
STEP.2
app.yamlの作成STEP.3
.gcloudignoreの作成STEP.4
GAE（SE）にデプロイ
準備
GCPにログインしており、対象プロジェクトであるか、事前に確認しましょう。
コマンドはこちら！
コマンドライン
$ gcloud config list
STEP.1：Nuxt製アプリをビルド
いつものように、まずはビルドします。
コマンドライン
$ npm run build
STEP.2：app.yamlの作成
GAE（SE）にデプロイする時の設定ファイルです。
app.yaml
runtime: nodejs10
instance_class: F2
handlers:
- url: /_nuxt
static_dir: .nuxt/dist/client
- url: /(.*\.(gif|png|jpg|ico|txt))$
static_files: static/\1
upload: static/.*\.(gif|png|jpg|ico|txt)$
- url: /sw.js
static_files: static/sw.js
upload: static/sw.js
- url: /.*
script: auto
secure: always
env_variables:
NUXT_HOST: '0.0.0.0'
NUXT_PORT: '8080'
以下のサイトを参考にしています！
参考
Google App Engine へデプロイするには？ - NuxtJS
参考
Nuxt.js v2とGAE/SE Node.jsでSPA×SSR×PWA×サーバーレスを実現する - DMM inside
参考
年末年始に Nuxt.js を Google App Engine にデプロイしてみよう 〜2019~2020年〜
環境変数については、以下の記事を参考にしてみて下さい。
参考
GAE で秘匿したい環境変数を安全に設定する - Qiita
STEP.3：.gcloudignoreの作成
このままデプロイすると、必要なファイルまでアップロードするので、凄く時間がかかります。
そこで。.gcloudignoreの出番です。.gitignore と同じ記述で、GCPに必要なファイルのみアップロードできます。
.gcloudignore
# 全て除外したあとに必要なファイルのみアップロード
*
!package.json
!package-lock.json
!.nuxt/**
!static/**
MEMO
staticフォルダも入れないと、GCPにアップロードされないので注意してください！STEP.4：GAE（SE）にデプロイ
コマンドを叩くだけ！
コマンドライン
# デプロイ
$ gcloud app deploy
# ブラウザ開く
$ gcloud app browse
最後に：package.jsonにコマンドをまとめると便利
以上になります。簡単なコマンドでできて、ビックリ！
おまけですが、以下のようにgcloud:gaeのようなコマンドを作っておくと、ビルド忘れといったヒューマンエラーがなくなるのでオススメです！
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
~~~
"gcloud:gae": "nuxt build && gcloud app deploy && gcloud app browse",
},
コメントを残す