gitlab-ciでfrontendをGCSへ自動アップロード

フロントエンドをGCSへアップロードする際によく使用している.gitlab-ci.ymlに関しての紹介です。（備忘録も兼ねる）

.gitlab-ci.yml

普段使用している.gitlab-ci.ymlを簡潔にすると以下のような感じになります。

image: node:16-alpine

stages:
  - build
  - deploy

build:
  stage: build
  artifacts:
    expire_in: 1 week
    paths:
      - out/
  script:
    - yarn install
    - yarn build
    - yarn export
  only:
    - master

deploy:
  stage: deploy
  image: google/cloud-sdk:alpine
  script:
    - echo $GCP_SERVICE_KEY > ${HOME}/gcloud-service-key.json
    - gcloud auth activate-service-account --key-file ${HOME}/gcloud-service-key.json
    - gcloud config set project $GCP_PROJECT_ID
    - gsutil -m rsync -d -r out gs://バケット名
  only:
    - master

build

build stageのscriptでpackageのinstallとフロントエンドのbuildを行っています。

※ 例としてあげている.gitlab-ci.ymlはNext.jsの使用を想定しています。create-react-appやVue、Nuxt.jsを使用する場合は各々のbuild方法にあわせて修正してください。

build:
  stage: build
  artifacts:
    expire_in: 1 week
    paths:
      - out/
  script:
    - yarn install
    - yarn build
    - yarn export

artifactsではbuildしたファイル群(outフォルダ)を次のdeploy stageでも使えるように設定しています。

deploy

deploy stageではbuildしたfile群(outフォルダ)をgoogleのcloud-sdkを使用してGCSへアップロードします。

GCSへのアップロードには対象ProjectのIDと事前に適切な権限を持ったjson形式のservice account keyが必要です。

こちらの手順にしたがってservice account keyが作成できたら、gitlabのSettings > CI/CD > VariablesでProject IDとaccount keyの中身を登録しておきます。

ここで設定したVariablesは.gitlab-ci.yml内で$Key名とすることで環境変数として使用することができます。

secret keyなどの重要な情報は.gitlab-ci.ymlに直接書くのではなく、Variablesで設定することをおすすめします。

deploy:
  stage: deploy
  image: google/cloud-sdk:alpine
  script:
    - echo $GCP_SERVICE_KEY > ${HOME}/gcloud-service-key.json
    - gcloud auth activate-service-account --key-file ${HOME}/gcloud-service-key.json
    - gcloud config set project $GCP_PROJECT_ID
    - gsutil -m rsync -d -r out gs://バケット名
  only:
    - master

ci全体を通して使用するdocker imageはnode:16-alpineを指定していますが、 deploy stageではgoogleが提供しているimage(cloud-sdkが事前にinstallされている)を使用したいので、image: google/cloud-sdk:alpineとしています。

scriptのecho $GCP_SERVICE_KEY > ${HOME}/gcloud-service-key.jsonでは、gcloud-service-key.jsonを作成し、事前に用意したGCPのservice keyの中身を書き込んでいます。

その後、そのkeyファイルをつかってservice accountを有効化し、project idを設定、 gsutil rsyncコマンドで対象バケットとbuildしたoutフォルダを同期する形でファイルをアップロードしています。