年末年始に Nuxt.js を Google App Engine にデプロイしてみよう 〜2019~2020年〜

kaneshin
kaneshin
Dec 18, 2019 · 9 min read

この記事は Nuxt.js Advent Calendar 2019 18日目の記事です。


こんにちは、こんばんは。CTO の kaneshin です。エンジニア組織のマネジメントに多く時間を割いていますが、技術的な方面では Go と GCP を掛け合わせて個人的なダッシュボードや API 連携を実現しています。

今月は Nature Remo + Go + Cloud Functions + BQ を駆使して、部屋の温度・湿度・照度や人体センターの検知における通知であったり、ダッシュボードを作成して自己満に浸っています。

さて、本日はそんなダッシュボードを Nuxt.js で作成して Google App Engine にデプロイしているので、アプリケーション作成からホスティングするデプロイの流れを画像付きで紹介しようと思います。(Cloud Storage へ静的にホスティングしない理由は SSL 周りで面倒なため)

Google App Engine の記事はいろいろと出ていますが、作成からデプロイまでの一連の流れで最新のものがないので、参考になる記事を含めて紹介します。

Nuxt.js の導入とアプリケーションの作成

Prerequisite of creation Nuxt.js app

今回、利用するのは Node.js v12.13.1 を使用します。v12.14.0 が LTS として推奨されていますが、nodenv における node-build は HEAD ではない最新版でインストール可能なバージョンは v12.13.1 になるため、今回はこちらを使用しています。

Nuxt.js のアプリケーションを作成するためには npx または yarn を用いて Scaffolding するのが一番手っ取り早いです。今回は yarn を使用してアプリケーション作成をしていきます。

yarn create nuxt-app <project-name>

今回はサンプルプロジェクトとして、全てデフォルトの設定でアプリケーション作成を終えています。

Nuxt.js アプリケーションの実行とビルド

アプリケーションの実行:yarn dev

Listening on: http://localhost:3000/

アプリケーションを実行したのちに http://localhost:3000/ にアクセスして確認をします

アプリケーションのビルド:yarn build

このあとに、実行をしたい場合は yarn start をコマンドで入力して、Production環境でアプリケーションを実行することも可能です。

また、 yarn start が App Engine で起動に必要なコマンドルールになるため、命名は変更しないままでお願いします。

これで Nuxt.js に関する準備は終了です。

Google Cloud Platform の準備

Google Cloud Platform を手元で利用するために gcloud をインストールします。プラットフォームによってインストール手順が変わりますが、ほとんどはアーカイブされた SDK をダウンロードし、展開をしたあとに下記のコマンドを叩きます。

$ ./google-cloud-sdk/install.sh
$ ./google-cloud-sdk/bin/gcloud init

gcloud init は Google Cloud Platform へのログインを行ったり、 GCE のデフォルトのセットアップを行います。完了したらコンポーネントのアップデートを行ったり、 Cloud SDK の bin フォルダを PATH に通したりしましょう。

$ ./google-cloud-sdk/bin/gcloud components update

Google App Engine へデプロイ

Google Cloud Platform のプロジェクト作成する

$ gcloud projects create [YOUR_PROJECT_ID]
$ gcloud projects describe [YOUR_PROJECT_ID]
createTime: '2019-12-17T13:25:13.821Z'
lifecycleState: ACTIVE
name: XXXXXX
projectId: YYYYYY
projectNumber: 'ZZZZZZ'

上記のように gcloud projects describe を行うと、プロジェクトの状態を確認することができます。

設定ファイルの追加:app.yaml

プロジェクトの作成が済んだらもう少しです。あとは Google App Engine 側のルーティングやその他の設定をファイルとして用意し、 gcloud appコマンドでデプロイします。

$ vim app.yaml # create a configuration of app engine
app.yaml — runtime: nodejs12 not nodejs10
runtime: nodejs12instance_class: F2handlers:
- url: /_nuxt
static_dir: .nuxt/dist/client
secure: always
- url: /(.*\.(gif|png|jpg|ico|txt))$
static_files: static/\1
upload: static/.*\.(gif|png|jpg|ico|txt)$
secure: always
- url: /.*
script: auto
secure: always
env_variables:
HOST: '0.0.0.0'
NODE_ENV: 'production'

app.yaml の中身は Node.js v12 を使用しているので、 runtime: nodejs12 にし忘れのないように気をつけてください。

アプリケーションのデプロイ

Press ENABLE button

有効化したら、アプリケーションをデプロイします。

$ yarn build # Build nuxt app to deploy the artifact (dist)
$ gcloud app deploy --projct=[YOUR_PROJECT_ID]
gcloud app deploy

今回は nuxt-gae-sample というプロジェクトを作成して、そこにアプリケーションをデプロイしています。

何事もなくデプロイが完了したら、 target url をブラウザで開くか

$ gcloud app browse --project=[YOUR_PROJECT_ID]

でアプリケーションの URL をブラウザで開くことが可能です。

おわりに

また、Cloud Storage だとドメインの SSL 対応を Cloudflare など利用する必要が生じるので、 Google App Engine を利用してします。

非常に簡単に SSL 対応が可能です。ただし、LP サイトのように速度を求められるサイトは Cloud Storage で静的ホスティングと速い DNS を使ってほげほげするのを推奨します。

Eureka Engineering

Learn about Eureka’s engineering efforts, product developments and more.

kaneshin

Written by

kaneshin

Hi, I’m kaneshin. I’m currently working as an engineer based in Tokyo, Japan.

Eureka Engineering

Learn about Eureka’s engineering efforts, product developments and more.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade