share facebook facebook twitter menu hatena pocket slack

2018.09.05 WED

Google App Engineのフレキシブル環境にNuxt.jsをデプロイしてみた

甲斐 甲

WRITTEN BY 甲斐 甲

概要

Google App Engineのフレキシブル環境にNuxt.jsのSSRアプリをサービスとしてデプロイしてみました。
Nuxt.jsはMacのDockerで開発環境をつくり、npmではなくyarnを利用、言語はTypeScriptとSCSSが利用できるようにしました。(趣味

上記を実現するのにすでに良い記事があったのですが、手順としてまとめてみました。
同じ趣味の方は大いにご参考ください^^

Nuxt.jsとは

Vue.js製フレームワークNuxt.jsではじめるUniversalアプリケーション開発
https://html5experts.jp/potato4d/24346/

Nuxt.js(ナクストと読みます)はReact.jsベースのSSR用フレームワークであるNext.jsに触発されて作成された、Vue.jsベースのフレームワークです。

です。

手順

Docker環境構築

Dockerはインストール済みの前提です。

環境構築には、下記を大いに参考させてもらいました。感謝!

Dockerでローカル環境を汚さずにNuxt.jsを始めてみる
https://qiita.com/ProjectEuropa/items/d9ee1b8c96084e3bab55

docker-compose.ymlとDockerfileの記述は上記記事をご参考ください。

> mkdir 任意のディレクトリ
> cd 任意のディレクトリ
> vi docker-compose.yml
> vi Dockerfile

docker-composeのバージョンが1の場合、build パラメータ指定方法を変更する必要があります。(1敗

version1だったー

> docker-compose version

docker-compose version 1.22.0, build f46880f
docker-py version: 3.4.1
CPython version: 3.6.4
OpenSSL version: OpenSSL 1.0.2o  27 Mar 2018

参考)
Compose ファイル・リファレンス
http://docs.docker.jp/compose/compose-file.html

バージョン1のフォーマット では、 build の使い方が異なります

docker-compose.yml

-   build: 
-     context: ./
+   build: ./

で、dockerコンテナを立ち上げてwebコンテナに入ります。

> docker-compose build
(略)

> docker-compose up -d
(略)

> docker-compose exec web bash

[root@xxxxxxxxxxx html]#

Nuxtアプリの作成と動作確認

無事にコンテナに入れたらnuxtアプリを作成していきます。
今回は、TypeScriptとSCSSを利用します。

下記記事を大いに参考にさせてもらいました。感謝!

Nuxt.js + TypeScript + Sass + ESLint 事始め
https://qiita.com/ryota-yamamoto/items/4b06ef51926df1bdbae8

コンテナ内

> npm install yarn -g

/usr/bin/yarn -> /usr/lib/node_modules/yarn/bin/yarn.js
/usr/bin/yarnpkg -> /usr/lib/node_modules/yarn/bin/yarn.js
+ yarn@1.9.4
added 1 package in 1.137s

> vue -V

2.9.6

> vue init nuxt-community/typescript-template nuxt-sample

   vue-cli · Generated "nuxt-sample".

   To get started:

     cd nuxt-sample
     npm install # Or yarn
     npm run dev

> cd nuxt-sample/
> yarn
(略)

> yarn add --dev node-sass sass-loader
(略)

SCSSにするため、Nuxtアプリ内の記述を変更します。

components/Card.vue

-<style scoped>
+<style lang="scss" scoped>

pages/index.vue

-<style scoped>
+<style lang="scss" scoped>

設定ファイルとmain.cssのファイル名を変更します。

nuxt.config.js

- css: ["~/assets/css/main.css"],
+ css: ["~/assets/css/main.scss"],

コンテナ内

> mv assets/css/main.css assets/css/main.scss

準備ができたので、アプリを立ち上げてみます。

コンテナ内

> yarn run dev

(略)
 OPEN  http://localhost:3000

  nuxt:render Rendering url / +0ms
  nuxt:render Data fetching /: 179ms +0ms
  nuxt:render Rendering url / +13s
  nuxt:render Data fetching /: 33ms +12s

はい。
これでホストから下記へアクセスするとページが表示されるはずです。

open http://localhost:3000/

やったぜ。

Google App Engineへデプロイ

ここからはGoogle App Engineへデプロイをしてみます。

gcloud コマンドのインストールは下記をご参考ください。
※今回はNode.jsのインストールは不要。

SDK for App Engine のダウンロード
https://cloud.google.com/appengine/docs/flexible/nodejs/download

GCPプロジェクトやデプロイに必要な設定は下記をご参考ください。

GCP プロジェクト、App Engine アプリケーション、課金の管理
https://cloud.google.com/appengine/docs/flexible/nodejs/managing-projects-apps-billing

Nuxtアプリのビルド

デプロイするために、Nuxtアプリをビルドします。

コンテナ内

> yarn run build

yarn run v1.9.4
$ nuxt build
(略)
             Asset    Size  Chunks             Chunk Names
server-bundle.json  189 kB          [emitted]
  nuxt:build Building done +2m
Done in 141.32s.

デプロイ設定

Google App Engineへのデプロイについては下記を参考にさせてもらいました。感謝!

Nuxt.js on Google App Engine(GAE)
https://qiita.com/SatoTakumi/items/4f418dc5c700b9d66d7d

Google App Engineへデプロイするための設定をします。
こちらの作業はコンテナ内・外どちらで行っても問題ありません。

Google App Engineはpackage.jsonのstartをみてアプリを起動するそうなので、HOSTPORT を指定します。

package.json

-   "start": "nuxt start",
+   "start": "HOST=0.0.0.0 PORT=8080 nuxt start",

また、Google App Engineのフレキシブル環境でランタイム指定をするのに、package.jsonでnodeのバージョンを指定します。ファイルの最後に追加しましょう。

package.json

- }
+ },
+ "engines": {
+   "node": "9.x"
+ }

Google App Engineのデプロイに必要となるapp.yamlを追加します。こちらはNuxtアプリのディレクトリ直下に置きます。

touch app.yaml

もし、既存のGCPプロジェクトへデプロイする場合には、service を指定します。
指定しないとdefaultサービスへデプロイして痛い目にあいます。(1敗

runtime の指定はnodejsとします。バージョン指定はすでにpackage.jsonで行っていますね。

app.yaml

runtime: nodejs
env: flex
# プロジェクトに初めてデプロイする場合は下記設定は不要
service: 任意のサービス名

Google App Engineへデプロイ

準備ができましたので、デプロイします。
こちらはコンテナ外で作業しましょう。

コンテナ外

> gcloud app deploy

Services to deploy:

descriptor:      [任意のディレクトリ/nuxt-sample/app.yaml]
source:          [任意のディレクトリ/nuxt-sample]
target project:  [GCPのプロジェクトID]
target service:  [サービス名]
target version:  [20180810t135530]
target url:      [https://サービス名-dot-GCPのプロジェクトID.appspot.com]

(略)
Deployed service [サービス名] to [https://サービス名-dot-GCPのプロジェクトID.appspot.com]

You can stream logs from the command line by running:
  $ gcloud app logs tail -s サービス名

To view your application in the web browser run:
  $ gcloud app browse -s サービス名


Updates are available for some Cloud SDK components.  To install them,
please run:
  $ gcloud components update

はい。
それでは、上記にあるURLにアクセスしてみましょう。

https://サービス名-dot-GCPのプロジェクトID.appspot.com

やったぜ。
最後に、不要になったらGCP管理コンソールからサービスを削除しておきましょう。

それでは、良きTypeScriptとSCSSでNuxt.jsをDockerコンテナ上で開発、App Engineにデプロイライフを^^(長い

参考

Vue.js製フレームワークNuxt.jsではじめるUniversalアプリケーション開発
https://html5experts.jp/potato4d/24346/

Dockerでローカル環境を汚さずにNuxt.jsを始めてみる
https://qiita.com/ProjectEuropa/items/d9ee1b8c96084e3bab55

Compose ファイル・リファレンス
http://docs.docker.jp/compose/compose-file.html

Nuxt.js + TypeScript + Sass + ESLint 事始め
https://qiita.com/ryota-yamamoto/items/4b06ef51926df1bdbae8

Nuxt.js on Google App Engine(GAE)
https://qiita.com/SatoTakumi/items/4f418dc5c700b9d66d7d

Node.js ランタイム
https://cloud.google.com/appengine/docs/flexible/nodejs/runtime

SDK for App Engine のダウンロード
https://cloud.google.com/appengine/docs/flexible/nodejs/download

GCPプロジェクトやデプロイに必要な設定は下記をご参考ください。

GCP プロジェクト、App Engine アプリケーション、課金の管理
https://cloud.google.com/appengine/docs/flexible/nodejs/managing-projects-apps-billing

NPM vs Yarn Cheat Sheet
https://shift.infinite.red/npm-vs-yarn-cheat-sheet-8755b092e5cc

元記事はこちら

Google App Engineのフレキシブル環境にNuxt.jsをデプロイしてみた

甲斐 甲

甲斐 甲

2018/7にJOIN。 最近の好みはサーバレスです。なんでもとりあえず試します。

cloudpack

cloudpackは、Amazon EC2やAmazon S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。
AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。