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

今回のコード：https://github.com/yujiteshima/cloudrun-test

NuxtをGoogleCloudRunにデプロイする。

NuxtをCloudRunにデプロイする方法について嵌った部分を中心に説明します。

今回やる事

Nuxt.jsのcreate-nuxt-appしてだけの状態のアプリををGCPのCloudRunにデプロイしてみるというものです。

Cloud Runとは

私のざっくりとした理解です。理解がまだまだ不足している分はどんどん色んなサービスを使いながら理解していきたいと思います。

Cloud Runは自分で作ったコンテナを、GCPのサーバ環境上で動かせるサービスです。
誰もアクセスしていない時は課金されず、誰かがアクセスしてきた時に立ち上がり、立ち上がっている時間だけが課金対象となるサービスです。

多くのアクセスがこれば自動でスケールアップして、少なくなれば自動でスケールダウンしてくれるというスケーリングも面倒をみてくれます。

CloudFunctionとの一番の違いはコンテナ上で動かすので、ランタイムが制限されていない事のように思います。
GKEとの違いは、kubernetesのアップデートの管理をCloudRunでは追わなく
良いということ。GKEの方が面倒をみなくてならない事が多い分自由度が高いという感じがします。

このFunctionsとGKEの間の性格を持っている為、コンテナで動かしたいけどGKEを使うほどではない、もっと簡単に面倒をみる事が少ないように使いたいという時にCloudRunの存在価値があるのかなと思いました。

Cloud Runを使う準備

GCPのサインアップをされてない方はサインアップして下さい。
請求先（クレジットカードの情報）が必要です。
初めて利用される方は$300の無料クレジットがつくはずです。

Cloud SDK

Cloud SDKをインストールしていない方はインストールして下さい。 https://cloud.google.com/sdk/install?hl=JA

CloudSDKをアップデートしておきます。
Beta版コンポーネントのインストールもしておきます。

$ gcloud components update
$ gcloud components install beta

GCPのコンソールでプロジェクトを作リます。

作成はプロジェクトの作成から作成します。

好きな名前をつけて下さい。よくある重複している名前は勝手に番号を末尾につけてくれます、このプロジェクトの名前は後で何回か使います。

プロジェクトの請求を有効にしておく必要があります。

メニューのお支払いから設定して下さい。

CloudBuildを有効化しておく

クラウドビルドを使うので有効化しておきます。

CloudRunを有効化しておく

Nuxtのプロジェクト作成

はじめからExpress入れて作成します。
Functions等でExpressのミドルウエアとしてNuxtを動かして、SSRのデプロイをした事がある方は馴染みある形だと思いますが、Chose custom server frameworkでExpress選んでおけば、よしなにやってくれます。

$ npx create-nuxt-app sample-app

create-nuxt-app v2.11.1
✨  Generating Nuxt.js project in sample-app
? Project name sample-app
? Project description My exquisite Nuxt.js project
? Author name Yuji Teshima
? Choose the package manager Yarn
? Choose UI framework Bulma
? Choose custom server framework Express
? Choose Nuxt.js modules Axios, Progressive Web App (PWA) Support
? Choose linting tools ESLint, Prettier, Lint staged files
? Choose test framework Jest
? Choose rendering mode Universal (SSR)
? Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
yarn run v1.19.0

portの変更

動作確認をしてみます。

$ yarn run dev

するとターミナルにリッスンしているアプリケーションポートが表示されます。

$ READY  Server listening on http://localhost:3000

クラウドの実行には、process.env.PORTを設定しておく必要があります。
またlocalhostや127.0.0.1では無くて0.0.0.0をホストにしておかなくてはならないので、その設定を書き加えていきます。

nuxt.config.jsにserverの設定を書き加えます。

nuxt.config.js

server: {
    port: process.env.PORT || 3000,
    host: '0.0.0.0',
    timing: false
  }

Dockerfileを作成する

From node:latest

WORKDIR /src

COPY . .
Run yarn install \
    --prefer-offline \
    --frozen-lockfile\
    --non-interractive \
    --production=false

Run yarn build

CMD [ "yarn", "start" ]

クラウドビルドの設定をyamlで書く

cloud-build.yml

steps:
  - name: gcr.io/cloud-builders/docker
    args:
      [
        "build",
        "-f",
        "Dockerfile",
        "-t",
        "gcr.io/gcpコンソールで先程作ったプロジェクトName/コンテナの名前（好きな名前）",
        ".",
      ]
images:
  - gcr.io/gcpコンソールで先程作ったプロジェクトName/コンテナの名前（好きな名前）

Google Cloud Buildでビルドする

gcloud builds submit --project "gcpコンソールで先程作ったプロジェクトName" --config=./cloud-build.yaml

デプロイする

gcloud beta run deploy cloud-run-name --region us-central1 --project "gcpコンソールで先程作ったプロジェクトName" --image gcr.io/gcpコンソールで先程作ったプロジェクトName/コンテナの名前（好きな名前）

リージョンはBeta版の時はus-central1に制限されていましたが、2019 年 11 月 14 日にGAになった際に、asia-northeast1(東京)も追加されました。

デプロイ時にオプションで渡していた値は事前に登録しておく事も出来ます。

例

$ gcloud config set project "gcpコンソールで先程作ったプロジェクトName"
$ gcloud config set run/region asia-northeast1

成功すると、ページのアドレスがターミナルに表示されます。

Service [sample-app] revision [sample-app-00001-puw] has been deployed and is serving 100 percent of traffic at https://sample-app-<生成された値>-uc.a.run.app

現時点で表示されたアドレスにリクエストしても、エラーが表示されます。

公開設定の変更

このままだとデプロイしたものを誰でも見れるようにはなっていません。
見れるようにするには、公開設定を変えなくてはなりません。
自身が利用するAPIであればそれに応じた公開設定をする必要があります。
今回は誰でも見れるようにAllUserに変更してデプロイ出来ているか確認しておきます。

コンソールでCloudRunのページから権限を変更します。

これで、表示されるはずです。

今回は初期画面が表示されるだけですが、きちんと表示できれば成功です。

まとめ

Docker使い初めの、私のような初級者には、自分が作ったコンテナが実際GCPのサーバ上で動いているというだけで、少し感動しました。
どんどん使っていきたいです。あらためて、使ってみて初めて理解できるという事あると思いました。

NuxtをCloudRunにデプロイする。