Nuxt.js on GAE
Nuxt.jsは、Vue.js向けのSSR用フレームワークで日本語ドキュメントも充実しており、SSRしないページでも開発するのには十分な機能をもっているといえる便利なものです。
Nuxt.js - 日本語公式ドキュメント
また、GAEとはGoogle App Engineの略で、一言で言うならば PaaSです。スタンダード環境、フレキシブル環境と呼ばれる2種類の環境があり、スタンダード環境は無料枠で利用ができます。
Node.js がスタンダード環境で利用可能に
スタンダード環境では、Java,Python, PHP, Go のみ利用が可能でしたが2018年6月12日にNode.jsがサポートされました。
Google App Engineがスタンダード環境でNode.jsをサポート。パッチ適用は自動、カスタムドメインでのHTTPSも利用可能
つまり、今までは nuxt generate などで静的サイトを生成しNetlifyなどで配信していましたがGAEを使用してサーバサイドレンダリングでコンテンツを提供することが可能になったということになります。
クラウドシェル
Google Cloudで作業するには、 Google Cloud Shellというものを使用すると大変便利なので、この記事ではCloudShellを使用していることを前提に説明を進めていきます。
CloudShellの説明は割愛させていただきます。
初期設定
まずは、 Nuxt.ｊｓ のチュートリアルに沿ってプロジェクを作成します。
$ vue init nuxt-community/starter-template nuxt-gae
$ cd nuxt-gae
$ yarn
ビルド
デプロイをする前に、ファイルをビルドしておく必要があります。
$ yarn run build
HOST/PORTを設定
package.json を開き、PORT番号に 8080 を、HOSTには0.0.0.0 を設定するようにします。
"start": "HOST=0.0.0.0 PORT=8080 nuxt start",
app.yamlの設置
GAEに関する設定を記入したりするファイル app.yaml を用意します。
内容は下記のようにします。
runtime: nodejs8
env: standard
デプロイ
もし、ローカルや選択しているプロジェクトが違う場合は --project <プロジェクト名> でプロジェクトを選択します。
$ gcloud app deploy
descriptor: [/home/****/src/****/nuxt-gae/app.yaml]
source: [/home/****/src/****/nuxt-gae]
target project: [*****]
target service: [default]
target version: [20180614****]
target url: [https://*****.appspot.com]
Do you want to continue (Y/n)? y [ENTER]
Beginning deployment of service [default]...
╔════════════════════════════════════════════════════════════╗
╠═ Uploading 0 files to Google Cloud Storage ═╣
╚════════════════════════════════════════════════════════════╝
File upload done.
Updating service [default]...|
Deployed service [default] to [https://****.appspot.com]
You can stream logs from the command line by running:
$ gcloud app logs tail -s default
To view your application in the web browser run:
$ gcloud app browse
リリースされると、 target url で表示されたURLにアクセスができるようになります。
まとめ
- ポイントは、
package.jsonにHOST/PORTをちゃんと設定すること - app.yamlもちゃんと用意して、環境はstandardを選ぶ
- 静的ファイルの設置ではなく、SSRをすることができる。