年末年始に Nuxt.js を Google App Engine にデプロイしてみよう 〜2019~2020年〜
この記事は 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 の導入とアプリケーションの作成
今回、利用するのは Node.js v12.13.1 を使用します。v12.14.0 が LTS として推奨されていますが、nodenv における node-build は HEAD ではない最新版でインストール可能なバージョンは v12.13.1 になるため、今回はこちらを使用しています。
Nuxt.js のアプリケーションを作成するためには npx または yarn を用いて Scaffolding するのが一番手っ取り早いです。今回は yarn を使用してアプリケーション作成をしていきます。
今回はサンプルプロジェクトとして、全てデフォルトの設定でアプリケーション作成を終えています。
Nuxt.js アプリケーションの実行とビルド
アプリケーション作成が完了すると、実行とビルドについてプロンプトへ入力するコマンドを出力してくれます。その詳細は package.json の script を参照すれば確認ができます。
アプリケーションの実行：yarn dev
アプリケーションの実行をするために yarn dev をコマンドを実行します。
アプリケーションを実行したのちに http://localhost:3000/ にアクセスして確認をします
アプリケーションのビルド：yarn build
問題なく実行ができたら yarn build で Nuxt.js アプリケーションのビルドをします。
このあとに、実行をしたい場合は yarn start をコマンドで入力して、Production環境でアプリケーションを実行することも可能です。
また、 yarn start が App Engine で起動に必要なコマンドルールになるため、命名は変更しないままでお願いします。
これで Nuxt.js に関する準備は終了です。
Google Cloud Platform の準備
ref: https://cloud.google.com/sdk/docs/
Google Cloud Platform を手元で利用するために gcloud をインストールします。プラットフォームによってインストール手順が変わりますが、ほとんどはアーカイブされた SDK をダウンロードし、展開をしたあとに下記のコマンドを叩きます。
$ ./google-cloud-sdk/install.sh
$ ./google-cloud-sdk/bin/gcloud initgcloud init は Google Cloud Platform へのログインを行ったり、 GCE のデフォルトのセットアップを行います。完了したらコンポーネントのアップデートを行ったり、 Cloud SDK の bin フォルダを PATH に通したりしましょう。
$ ./google-cloud-sdk/bin/gcloud components updateGoogle App Engine へデプロイ
冒頭でも述べましたが、今回は Node.js v12 を使用しています。App Engine は既に Node.js v12 をベータ版として提供しているので、こちらのランタイムを使用して実行させようと思います。
Google Cloud Platform のプロジェクト作成する
App Engine にデプロイするためにプロジェクトを作成します。既に利用しているプロジェクトで良ければ SKIP して構いません。
$ 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
ref: https://ja.nuxtjs.org/faq/appengine-deployment/
プロジェクトの作成が済んだらもう少しです。あとは Google App Engine 側のルーティングやその他の設定をファイルとして用意し、 gcloud appコマンドでデプロイします。
$ vim app.yaml # create a configuration of app engine
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: alwaysenv_variables:
HOST: '0.0.0.0'
NODE_ENV: 'production'
app.yaml の中身は Node.js v12 を使用しているので、 runtime: nodejs12 にし忘れのないように気をつけてください。
アプリケーションのデプロイ
ここまで出来たらあとは下記のコマンドで先ほど作成したプロジェクトにデプロイをします。デプロイコマンドは Code Build でデプロイをしているので Code Build の API を有効化する必要があります。
有効化したら、アプリケーションをデプロイします。
$ yarn build # Build nuxt app to deploy the artifact (dist)
$ gcloud app deploy --projct=[YOUR_PROJECT_ID]
今回は nuxt-gae-sample というプロジェクトを作成して、そこにアプリケーションをデプロイしています。
何事もなくデプロイが完了したら、 target url をブラウザで開くか
$ gcloud app browse --project=[YOUR_PROJECT_ID]でアプリケーションの URL をブラウザで開くことが可能です。
おわりに
断片的な情報だと、古かったりして環境差異が発生することがよくあります。今回の記事は2019年末としては最新の状態で Nuxt.js を Google App Engine にデプロイできるはずなので、ぜひ、年末年始にトライしてみてください。
また、Cloud Storage だとドメインの SSL 対応を Cloudflare など利用する必要が生じるので、 Google App Engine を利用してします。
非常に簡単に SSL 対応が可能です。ただし、LP サイトのように速度を求められるサイトは Cloud Storage で静的ホスティングと速い DNS を使ってほげほげするのを推奨します。
