やること

ローカルマシンで作成しているNuxtアプリをGoogle Cloud PlatformのApp Engineにデプロイする手順を説明します.

Compute EngineでNuxtアプリを走らせて、独自ドメインをとって、SSL証明書取って＆置いて、とせっせとやっていたのですが、NuxtをApp Engineで走らせるだけで「ほぼ独自ドメイン&常時SSL対応」ができることに気づいてしまったのでメモメモ.

公式のクイックスタートを参考にしました.
https://cloud.google.com/appengine/docs/standard/nodejs/quickstart

前提条件

npm (5.2.0以上) がインストールされている.
Cloud SDKがインストールされている.

Nuxtプロジェクトをローカルマシンに作成する.

Nuxtプロジェクトを作成する.

create-next-appで雛形を作成する.


   $ npx create-nuxt-app <my-app>

   # 好みに合わせて質問に答える. 回答例.
   # ? Project name MyApp
   # ? Project description MyApp Project
   # ? Use a custom server framework express
   # ? Use a custom UI framework none
   # ? Choose rendering mode Universal
   # ? Use axios module yes
   # ? Use eslint yes
   # ? Use prettier no
   # ? Author name myname
   # ? Choose a package manager npm

ローカルでNuxtアプリをbuild&startする.

   $ cd my-app
   $ npm run build
   $ npm start

ブラウザで確認

http://127.0.0.1:3000 にアクセスしてNuxtの初期ページが表示されることを確認する.

App Engineアプリケーションを作成する

GCPコンソールでGCPプロジェクトを作成する.

GCPプロジェクトIDがアプリのURL (https://[my-app-project].appspot.com) になるので注意.

GCPコンソールでApp Engineアプリケーションを作成する.

「初めてのアプリへようこそ」の「言語を選択」からNode.jsを選択する.

アプリのリージョンを選択する.

後から変更できないので注意. リージョンを選択した後、チュートリアルが始まりますがそれは無視しました.

App Engineにデプロイする

package.jsonでHOSTを指定する.

package.jsonの"start"にHOSTの設定を追加する.
HOST=0.0.0.0でリモートマシンからの接続を許可する.

   "start": "cross-env NODE_ENV=production HOST=0.0.0.0 node server/index.js"

app.yamlでデプロイ構成を指定する.

上で作成したNuxtプロジェクトのルートディレクトリにapp.yamlを作成し、以下を記述する.

   runtime: nodejs8
   env: standard

デプロイする.

Nuxtプロジェクトのルートディレクトリで以下のコマンドを実行してデプロイする.

   $ gcloud app deploy --project my-app-project

   # Services to deploy:

   # descriptor:      [xxxxxxxxxxxxxx/my-app/app.yaml]
   # source:          [xxxxxxxxxxxxxx/my-app]
   # target project:  [my-app-project]
   # target service:  [default]
   # target version:  [xxxxxxxxxxxxxx]
   # target url:      [https://my-app-project.appspot.com]

target urlにアクセスする.

Nuxtの初期ページが表示されることを確認する.

おわり

いとも簡単になんちゃって独自ドメインと常時SSL対応ができてしまった...