最近のまとめ 2024/1/12 – Nuxt3, Cloud Run,Cloud Build関連備忘録

初回
firebase init
prettierの設定
Nuxt3とCloud Run
ブランチpushでCloud Runにデプロイしたい
1. Cloud Buildのトリガー設定を変更
doker memo

初回

$ npx nuxi init {app-name}

firebase init

? What do you want to use as your public directory?
.output/public を選択します。

prettierの設定

package.json
package-lock.json
.eslintrc.js
このあたりのファイルは除外したいです。

Nuxt3とCloud Run

Cloud Build と Cloud Run を有効化

コンソールから操作してもよいが、コマンドでやってみます。

$ gcloud auth login

# Enabling Cloud Build
$ gcloud services enable cloudbuild.googleapis.com

# Enabling Cloud Run
$ gcloud services enable run.googleapis.com

ERROR: (gcloud.services.enable) PERMISSION_DENIED: Permission denied to enable service
[cloudbuild.googleapis.com]
となる場合

アカウントを確認する

$ gcloud auth list

Credentialed Accounts
ACTIVE  ACCOUNT
*       {YOUR_EMAIL}

プロジェクトを確認する

$ gcloud config list

[compute]
region = asia-northeast1
zone = asia-northeast1-b
[core]
account = {YOUR_EMAIL}
disable_usage_reporting = True
project = {PROJECT_ID}

想定外のプロジェクトの場合は切り替えます。
$ gcloud config set project {TARGET_PROJECT_ID}

わすれずに、
$ yarn install
します。
忘れると、ビルドでエラーになります。

ブランチpushでCloud Runにデプロイしたい

やりたいこと流れ
ブランチpush -> Cloud Buildでコンテナビルド -> Cloud Runで最新のコンテナをデプロイ

はじめに
Cloud Build と Cloud Source Repositories API を有効にします。

Cloud Runでサービスを作成
Cloud Buildの設定も一緒に行います。

通常このままだと、ビルドはされても、デプロイは実行されません。

Cloud Buildのトリガー設定を変更

構成の形式　⇒　”Cloud Build 構成ファイル(yamlまたはjson)” を選択

ロケーション ⇒　”リポジトリ” を選択構成ファイルの場所 ⇒ “/cloudbuild.yaml”

代入変数の設定今回はcloudbuild.yamlにベタガキするので未設定

// cloudbuild.yaml

steps:
  - name: gcr.io/cloud-builders/docker
    args:
      - build
      - '--no-cache'
      - '-t'
      - >-
        $_AR_HOSTNAME/$PROJECT_ID/cloud-run-source-deploy/$REPO_NAME/$_SERVICE_NAME:$COMMIT_SHA
      - .
      - '-f'
      - Dockerfile
    id: Build
  - name: gcr.io/cloud-builders/docker
    args:
      - push
      - >-
        $_AR_HOSTNAME/$PROJECT_ID/cloud-run-source-deploy/$REPO_NAME/$_SERVICE_NAME:$COMMIT_SHA
    id: Push
  - name: 'gcr.io/google.com/cloudsdktool/cloud-sdk:slim'
    args:
      - run
      - services
      - update
      - $_SERVICE_NAME
      - '--platform=managed'
      - >-
        --image=$_AR_HOSTNAME/$PROJECT_ID/cloud-run-source-deploy/$REPO_NAME/$_SERVICE_NAME:$COMMIT_SHA
      - >-
        --labels=managed-by=gcp-cloud-build-deploy-cloud-run,commit-sha=$COMMIT_SHA,gcb-build-id=$BUILD_ID,gcb-trigger-id=$_TRIGGER_ID
      - '--region=$_DEPLOY_REGION'
      - '--quiet'
    id: Deploy
    entrypoint: gcloud
  # Cloud Runへのデプロイ
  - name: 'gcr.io/google.com/cloudsdktool/cloud-sdk'
    entrypoint: gcloud
    args:
      - 'run'
      - 'deploy'
      - $_SERVICE_NAME
      - '--image'
      - '$_AR_HOSTNAME/$PROJECT_ID/cloud-run-source-deploy/$REPO_NAME/$_SERVICE_NAME:$COMMIT_SHA'
      - '--region=$_DEPLOY_REGION'
      - '--platform'
      - 'managed'
    id: Deploy to Cloud Run
images:
  - >-
    $_AR_HOSTNAME/$PROJECT_ID/cloud-run-source-deploy/$REPO_NAME/$_SERVICE_NAME:$COMMIT_SHA
options:
  substitutionOption: ALLOW_LOOSE
  logging: CLOUD_LOGGING_ONLY
substitutions:
  _SERVICE_NAME: {SERVICE_NAME} ←ここを書き換える
  _DEPLOY_REGION: asia-northeast1 ←ここを書き換える
  _AR_HOSTNAME: asia-northeast1-docker.pkg.dev ←ここを書き換える
  _PLATFORM: managed ←ここを書き換える
  _TRIGGER_ID: {YOUR_TRIGGER_ID} ←ここを書き換える
tags:
  - gcp-cloud-build-deploy-cloud-run ←ここを書き換える
  - gcp-cloud-build-deploy-cloud-run-managed ←ここを書き換える
  - {SERVICE_NAME}　←ここを書き換える

指定したブランチにpushしてデプロイまで走るか確認します。

doker memo

$ docker build -t nuxt3-cloud-run .

キャッシュを削除してリビルドします。
$ docker build -t nuxt3-cloud-run . –no-cache

コンテナを起動(デーモン)
–name でコンテナ名を指定します。

$ docker run –name nuxt3-cloud-run -d -p 80:3000 nuxt3-cloud-run