やること
ローカルマシンで作成している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対応ができてしまった...