GCPのGAEにNuxtアプリをデプロイする

GCP(Google Cloud Platform)のGAE(Google App Engine)に、Nuxtアプリをデプロイする手順をまとめています。
ケースバイケースですが、少しでも参考になれればと思います。

GCP上での手順

GCPの利用開始

Googleのアカウント（[e-mail]）を持っている方は、誰でもGCPを利用可能です。

利用開始すると、開始日から90日間有効な$300分のクレジットを貰えますので、本来なら費用が掛かるような事も$300範囲内であれば無料で試すことが可能です。

なお、本日紹介するGAEを始め、GCPでは無料枠があるサービスがあります。個人の学習レベルであれば基本的に毎月無料で色々な機能を利用できます。

GCPアカウントの開設手順はコチラ >>
GCP無料枠の参考記事 >>

プロジェクトを作成する

GAEでNuxtアプリをデプロイして動作させる場合は、GAEが動作するプロジェクトを用意する必要があります。

プロジェクトの作成手順は以下の通りです。

• ヘッダーにある**「プロジェクト選択リスト」をクリックし、表示される「プロジェクト選択」画面で「新しいプロジェクト」**をクリックします。
  

• 任意のプロジェクト名を入力したら**「作成ボタン」**をクリックします。
  

お支払い設定を行う

GAEを利用するにあたり、あらかじめ**「お支払い設定」**をしておくと便利です。

• 左のメニューから**「お支払い」**をクリックします。

• 「このプロジェクトには請求先アカウントがありません」と表示される場合は、**「請求先アカウントをリンク」→「請求先アカウントを作成」**をクリックします。

• 登録すると以下のようなダイアログが表示されます。「クレジットを使い切ってもご心配はいりません。自動請求を有効にするまで課金されることはありません。」とあるように、無料枠を使い切っても勝手に課金される事はありません。これは**「自動請求を有効にしていなければシステムは止めますね」という事ですので、止まっては困るという場合は「3ヵ月を超える前」もしくは「無料枠の$300ドルを消化する前」までにプロジェクトの自動請求を有効**にしておきましょう。

プロジェクトにGAEを追加

プロジェクトを作成したのでNuxtアプリをデプロイするためのGAEを作成します。

• 左メニューから**「App Engine」**をクリックします。

※左メニューが無い場合は、ヘッダーにあるハンバーガーメニューをクリックすると表示されます。
※とりあえずトップに戻りたい場合は、ヘッダーにある「Google Cloud Platform」ロゴをクリックしましょう。

• **「アプリケーションを作成」**ボタンをクリックします。

※プロジェクトが複数ある方は、GAEを作成したいプロジェクトであるかどうかを確認しましょう。

• リージョンを選択し**「アプリを作成」**ボタンをクリックします。

※リージョンの都市一覧はコチラ >>

• この度はNuxtアプリをデプロイしますので言語は**「Node.js」を選択します。環境については「標準」と「フレキシブル」**があります。毎月無料枠があるのは「標準」の方ですので、ここでは「標準」を選択しておりますが、ある程度の有識者であれば両方の違いを理解しておくと良いでしょう。

※標準とフレキシブルの違いについてはコチラ >>

• GAEの作成はこれで終わりです。続いて、NuxtアプリをGAEにデプロイしていきます。

ローカルPCでの手順

Cloud SDK のインストール

GCP上にあるGAEにNuxtアプリをデプロイするには、Cloud SDKを利用する方法とGithubにpushしたタイミングで自動デプロイする方法があります。
ここではCloud SDKを利用したデプロイ手順を紹介するため、Githubの自動デプロイについては割愛します。

Cloud SDKのダウンロードとインストール手順 >>

リンク先の手順に従ってインストールを行い、gcloudコマンドが実行できるようにしてください。

Nuxtアプリ側の対応

GCP上にあるGAEにデプロイするには、Nuxtアプリ側にapp.yamlを追加する必要があります。

参考：GAEにデプロイする手順（Nuxt公式）はコチラ >>

runtime: nodejs10

instance_class: F2

handlers:
  - 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'

上記コード内のstatic_dir, static_filesの部分などはNuxtアプリのディレクトリ構成に合わせて適宜確認・修正してください。

GAEにNuxtアプリをデプロイ

いよいよGAEにNuxtアプリをデプロイします。

Nuxtアプリのプロジェクトフォルダにて、以下のコマンドを実行することでGAE上にデプロイされます。

# 初回のみgoogleアカウントの認証を行います

gcloud login

# 作成したgcpのプロジェクト（test）をセットします
# セットすると次回以降、projectを省略出来ます

gcloud config set project test

# Nuxtアプリをbuildします

npm run build

# GAEにデプロイします

gcloud app deploy app.yaml

# gcloud config set project test を実施していない場合は以下のようにprojectパラメータで対応可能です

gcloud app deploy app.yaml --project test

gcloud app deploy app.yamlを実行すると、以下の通りデプロイ先などの確認内容が表示されます。
内容に問題が無い事を確認した上で続行します。

Services to deploy:

descriptor:      [C:\Users\hogehoge\docker\nuxt-sample\app.yaml]
source:          [C:\Users\hogehoge\docker\nuxt-sample]
target project:  [test]
target service:  [default]
target version:  [20200414t201750]
target url:      [https://test.hogehoge.hogehoge.appspot.com]

Do you want to continue (Y/n)?

デプロイが始まります。
正常に完了すると、以下の通り完了メッセージが表示されます。

Beginning deployment of service [default]...
╔════════════════════════════════════════════════════════════╗
╠═ Uploading XXX files to Google Cloud Storage              ═╣
╚════════════════════════════════════════════════════════════╝
File upload done.
Updating service [default]...done.
Setting traffic split for service [default]...done.
Deployed service [default] to [https://test.hogehoge.hogehoge.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 --project=test


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



To take a quick anonymous survey, run:
  $ gcloud survey

メッセージ内に以下の内容が表示される場合は、**「gcloud components update」**を実行してコンポーネントのアップデートを実施しましょう。

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

デプロイ確認

GAEには、デフォルトで公開URLが用意されています。
デフォルトの公開URLは、GAEのダッシュボードでも確認出来ますし、デプロイ時の確認メッセージ内にも表示されています。

ブラウザで公開URLにアクセスして、期待したページが表示されることを確認しましょう。

Services to deploy:

descriptor:      [C:\Users\hogehoge\docker\nuxt-sample\app.yaml]
source:          [C:\Users\hogehoge\docker\nuxt-sample]
target project:  [test]
target service:  [default]
target version:  [20200414t201750]
target url:      [https://test.hogehoge.hogehoge.appspot.com]　※ココ

Do you want to continue (Y/n)?

独自ドメインの割り当て

個人レベルの場合は、デフォルトの公開URLを利用しても問題ありませんが、個人ではない場合は、独自ドメインを割り当てる必要があるでしょう。

GAEに独自ドメインを割り当てる事が出来ますので、必要な場合は、参考ページの手順に従い独自ドメインを割り当ててください。

参考：GAE（Google AppEngine）でのカスタムドメインと無料SSL証明書を設定してみた >>