[GCP] Cloud RunにNuxt.jsをデプロイするまで

今春のGoogle Cloud Nextで発表されたCloud Runが、サーバーレスでNuxt.jsを運用する際のデプロイ先としてかなり使いやすかったので紹介します

# 1. 事前準備
以下準備が整っていることを前提としてます。

### GCPでプロジェクトの作成と課金設定
こちらを参考にGCPにプロジェクトの作成と、課金設定を行ってください。

https://qiita.com/yukotan/items/208a2d5d732f85ea4ab1

以降はqiita-demo-projectというプロジェクト名でプロジェクトを作成した前提で記載します。

### gcloudのインストール

こちら参考にコマンドラインでgcloudが実行できるように設定してください。
https://cloud.google.com/sdk/docs/quickstart-mac-os-x?hl=ja

以下コマンドでversionが出ればOKです。

```bash
$ gcloud -v
Google Cloud SDK 248.0.0
beta 2019.05.17
bq 2.0.43
core 2019.05.24
gsutil 4.38
```

またinitで先程作成したプロジェクトを指定してください。

```bash
$ gcloud init
```

以下コマンドで、プロジェクト名が入っていれば完了です。

```bash
$ gcloud config list
[core]
account = xxx@gamil.com
disable_usage_reporting = False
project = qiita-demo-project  # ここにプロジェクト名が入っているか

Your active configuration is: [default]
```


# 2. Nuxtプロジェクトの作成
今回Cloud RunにデプロイするNuxtプロジェクトを作成します
パッケージマネージャーにyarnを選択した以外は全てデフォルトです。

```bash
$ npx create-nuxt-app qiita-demo
> Generating Nuxt.js project in /Users/xxx/sandbox/qiita/qiita-demo
? Project name qiita-demo
? Project description My fantastic Nuxt.js project
? Use a custom server framework none
? Use a custom UI framework none
? Choose rendering mode Universal
? Use axios module no
? Use eslint no
? Use prettier no
? Author name ryo
? Choose a package manager yarn
```

docker上での起動PORTを設定するためにnuxt.config.jsのbuild欄に以下を追記します

```js:nuxt.config.js
const pkg = require('./package')

module.exports = {
  mode: 'universal',

// .....

  build: {
    // ここから追加
    server: {
      port: process.env.PORT || 3000,
      host: '0.0.0.0',
      timing: false
    }
    // ここまで
  }
}

```

# 3. Dockerfileの作成
cloud repositoryに登録するコンテナ用のDockerfileをプロジェクト配下で作成します。
COPYコマンドでイメージ作成時に、Nuxtプロジェクトのファイルがコピーされます。

```dockerfile:Dockerfile
FROM node:10

WORKDIR /src

ENV PORT 8080
ENV HOST 0.0.0.0

COPY . .

RUN yarn install --only=production

RUN yarn build

CMD ["yarn", "start"]
```

# 4. Container Repositoryへの登録

## cloud-build.ymlの作成
cloud buildの設定ファイル cloud-build.ymlを作成します
`qiita-demo-project`の部分は事前準備で作成したプロジェクト名に変更して下さい。
`my-container`の部分は、今から作成するコンテナ名なので自由に設定してください。

```yml:cloud-build.yml
steps:
- name: gcr.io/cloud-builders/docker
  args:
    ['build','-f','Dockerfile','-t','gcr.io/qiita-demo-project/my-container','.']
images: ['gcr.io/qiita-demo-project/my-container']
```

`gcloud builds`コマンドでContainer Repositoryへイメージを登録します。
（`qiita-demo-project`は適宜変更してください)

```bash
gcloud builds submit --project "qiita-demo-project" --config=./cloud-build.yml
```

途中で以下を聞かれた場合は`y`を入力してください。

```
API [cloudbuild.googleapis.com] not enabled on project [167369049276].
 Would you like to enable and retry (this will take a few minutes)?
(y/N)?
```

実行後、 `ainer (+1 more)  SUCCESS`が出力されれば成功です。

GCPのコンソールでContainer Repositoryを見ると、cloud-build.ymlで指定したイメージが登録されているはずです。

<img width="895" alt="スクリーンショット 2019-06-02 9.58.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/58f1ea83-ee5b-6880-f1bf-48d81e0eab16.png">



# 5. Cloud Runへのデプロイ

イメージの登録が出来たので、Cloud Runにデプロイします。
`qiita-demo`の部分は、Cloud Runのサービス名を適宜設定して下さい
`qiita-demo-project`はGCPのプロジェクト名を、
`my-container`は先程のContainer Repositoryに登録したコンテナ名を設定してください。
`--allow-unauthenticated`は未認証のリクエストを受け付ける設定です。
今回は普通のwebサイトの想定で、受け付ける設定にします。

```bash
$ gcloud beta run deploy qiita-demo --region us-central1 --allow-unauthenticated --project "qiita-demo-project" --image gcr.io/qiita-demo-project/my-container
```

初回は以下聞かれるので`y`を選択してください。

```
API [run.googleapis.com] not enabled on project [167369049276]. Would
you like to enable and retry (this will take a few minutes)? (y/N)?  y
```

最後にアクセスポイントのURLが表示されれば完了です。

```
Deploying container to Cloud Run service [qiita-demo] in project [qiita-demo-project] region [us-central1]
✓ Deploying new service... Done.
  ✓ Creating Revision...
  ✓ Routing traffic...
  ✓ Setting IAM Policy...
Done.
Service [qiita-demo] revision [qiita-demo-00001] has been deployed and is serving traffic at https://qiita-demo-xxxxx.a.run.app
```

`https://qiita-demo-xxxxx.a.run.app`のURLにアクセスするとNuxtのサイトが表示されるはずです。

<img width="937" alt="スクリーンショット 2019-06-02 8.58.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/b40e716d-d8cd-0070-5939-a1e2f390e0d0.png">

# おわりに

以上Cloud RunにNuxt.jsをデプロイするまででした。
Dockerベースなので、FirebaseFunctionsでexpressの設定などを行うよりとても楽ですね。
あとでCroud Runのアクセスポイントに独自ドメインを設定するまでも書きたいと思います。

# 参考
以下参考にさせて頂きました。良記事ありがとうございます。

https://dev.to/sakko/deploying-nuxtjs-on-google-cloud-run-1fic
https://qiita.com/jakushin/items/dd92075f28fba6b083ca