Help us understand the problem. What is going on with this article?

Nuxt.js on Google App Engine(GAE)

More than 1 year has passed since last update.

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の説明は割愛させていただきます。
image.png

初期設定

まずは、 Nuxt.js のチュートリアルに沿ってプロジェクを作成します。

$ 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 を用意します。
内容は下記のようにします。

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にアクセスができるようになります。

image.png

まとめ

  • ポイントは、 package.json にHOST/PORTをちゃんと設定すること
  • app.yamlもちゃんと用意して、環境はstandardを選ぶ
  • 静的ファイルの設置ではなく、SSRをすることができる。
SatoTakumi
渋谷で働くWebエンジニアです!
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした