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

kaneshin
kaneshin
Dec 18, 2019 · 9 min read
Image for post
Image for post

この記事は 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 の導入とアプリケーションの作成

Image for post
Image for post
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 を使用してアプリケーション作成をしていきます。

Image for post
Image for post
yarn create nuxt-app <project-name>

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

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

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

Image for post
Image for post
Listening on: http://localhost:3000/

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

Image for post
Image for post

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

Image for post
Image for post

このあとに、実行をしたい場合は 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
Image for post
Image for post
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 にし忘れのないように気をつけてください。

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

Image for post
Image for post
Press ENABLE button

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

$ yarn build # Build nuxt app to deploy the artifact (dist)
$ gcloud app deploy --projct=[YOUR_PROJECT_ID]
Image for post
Image for post
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…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store