Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
84
Help us understand the problem. What is going on with this article?
@SatoTakumi

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をすることができる。
84
Help us understand the problem. What is going on with this article?
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
SatoTakumi
渋谷で働くWebエンジニアです!

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
84
Help us understand the problem. What is going on with this article?