今春のGoogle Cloud Nextで発表されたCloud Runが、サーバーレスでNuxt.jsを運用する際のデプロイ先としてかなり使いやすかったので紹介します
1. 事前準備
以下準備が整っていることを前提としてます。
GCPでプロジェクトの作成と課金設定
こちらを参考にGCPにプロジェクトの作成と、課金設定を行ってください。
以降はqiita-demo-projectというプロジェクト名でプロジェクトを作成した前提で記載します。
gcloudのインストール
こちら参考にコマンドラインでgcloudが実行できるように設定してください。
https://cloud.google.com/sdk/docs/quickstart-mac-os-x?hl=ja
以下コマンドでversionが出ればOKです。
$ gcloud -v
Google Cloud SDK 248.0.0
beta 2019.05.17
bq 2.0.43
core 2019.05.24
gsutil 4.38
またinitで先程作成したプロジェクトを指定してください。
$ gcloud init
以下コマンドで、プロジェクト名が入っていれば完了です。
$ 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を選択した以外は全てデフォルトです。
$ 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欄に以下を追記します
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プロジェクトのファイルがコピーされます。
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の部分は、今から作成するコンテナ名なので自由に設定してください。
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は適宜変更してください)
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で指定したイメージが登録されているはずです。
5. Cloud Runへのデプロイ
イメージの登録が出来たので、Cloud Runにデプロイします。
qiita-demoの部分は、Cloud Runのサービス名を適宜設定して下さい
qiita-demo-projectはGCPのプロジェクト名を、
my-containerは先程のContainer Repositoryに登録したコンテナ名を設定してください。
--allow-unauthenticatedは未認証のリクエストを受け付ける設定です。
今回は普通のwebサイトの想定で、受け付ける設定にします。
$ 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のサイトが表示されるはずです。
おわりに
以上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