Mobile Factory Tech Blog

技術好きな方へ!モバイルファクトリーのエンジニアたちが楽しい技術話をお届けします!

GCPでシンプルなCI/CDパイプラインを構築する

はじめに

サービスをデプロイするときはビルドしてテストしてから行うという手順はよくあります。 その時に、Google Cloud Platform (GCP) 上で CI/CD パイプラインを構築し、コードの変更をトリガーにしてビルド・テスト・デプロイが手軽にできる手法を紹介します。

使用するツール

  • GCP
    • Cloud Build
    • App Engine
  • GitHub

作成するもの

Vue.js のプロジェクトで GitHub 上の main ブランチに push/merge されたら自動でビルド・テスト・デプロイを行う環境を構築します。

Cloud Build とは?

公式ドキュメント

サーバーレス CI / CD プラットフォームでビルド、テスト、デプロイを行います。

構成を yaml ファイルで記述でき、実行するのはシェルスクリプトから独自で作成した Docker イメージなども活用できるので自由度の高いパイプラインを作成できます。

また、実行トリガーも GitHub 連携、Webhook など様々な場面で組み込みやすいものが用意されています。

App Engine とは?

公式ドキュメント

モノリシックなサーバーサイドのレンダリングのウェブサイトを構築し、アジリティを維持します。App Engine は一般的な開発言語をサポートし、さまざまなデベロッパー ツールを提供しています。

こちらも構成を yaml ファイルで記述するだけで準備が整い、コンテンツの配信からサービスのスケーリングまでマネージメントしてくれます。


実際に作成する

上で紹介した 2 つのサービス + GitHub で実際に構築してみます。

Vue Application の作成

まずは、デプロイするサービスのセットアップです。 詳細は省きますが、今回は Vue.js Quick Start の Creating a Vue Application にそって、プロジェクトを作成しています。

基本的に例示されている設定と同じですが、Vitest の追加だけ Yes に変更し、ユニットテスト環境のセットアップを行っています。

App Engine の設定

あらかじめ、App Engine でデプロイするサービスを確認しておきます。 何も設定しない場合は default サービスにデプロイされますが、 default 以外が良い場合は app.yaml に設定が必要になります。

app.yaml の設定

デプロイするものや形式に合わせて適宜調整をしてください。 今回作成するのは Vue.js のプロジェクトでビルド成果物が配信できれば良いので、 runtime には nodejs16 (php81 とかでも大丈夫です)を、service にはデプロイする App Engine のサービス名を記述します。

runtimeservice が記述できたら、 handler の項目でファイルと配信 URL を紐付けます。 Vue.js Quick Start の Creating a Vue Application から作成していれば、ビルド成果物が dist 以下に生成されるので、成果物を配信できるように記述します。

詳細な記述方法はこちらをご覧ください。

今回は以下のような yaml を記述しました。

service: your-service-name
runtime: nodejs16
handlers:
  - url: /
    static_files: dist/index.html
    upload: dist/index.html
    secure: always
  - url: /(.*)
    static_files: dist/\1
    upload: dist/(.*)
    secure: always

App Engine で配信するものの構成を app.yaml としてリポジトリ内に置いておきます。

.gcloudignore の設定

続いて、App Engine でデプロイしないフォルダ類を指定します。 こちらもプロジェクトに合わせて適宜調整をしてください。

詳細な記述方法はこちらをご覧ください。

今回は以下のように記述して、ビルド成果物以外はデプロイしないようにしています。

*
!dist/**

これもリポジトリの一番上に .gcloudignore として置いておきます。

Cloud Build のトリガーを設定する

続いて、GitHub と Cloud Build の連携をします。 Cloud Build のダッシュボードからトリガーにすすみ、トリガーを作成を選択。連携したいソースを選択して認証、接続したいリポジトリを決めます。

リポジトリ決定後はトリガーの作成に移り、どのブランチにどのトリガーでビルドを開始するかを決めておきます。

今回は以下のようなトリガーを設定しました。

  • 名前: TestTrigger
  • リージョン: グローバル(非リージョン)
  • イベント: ブランチにpushする
  • リポジトリ: test-repo
  • ブランチ: ^main$
  • 構成 形式: 自動検出

ブランチ名はサジェストが出ますが、正規表現で安全に指定しましょう。

cloudbuild.yaml の構成

最後に、Cloud Build で用いる yaml ファイルを作成します。 Vue.js のプロジェクトなので、npm でパッケージをインストールした後ビルド、テストを実行して App Engine にデプロイを行うコマンドまでを自動実行するように記述します。

yaml は、行いたいことをステップごとに書いていきます。 各ステップでは、 name で Docker イメージを指定します。指定できるのは 公式にサポートされているイメージ や、 Container Registry で管理されているイメージなどが指定できます。 node イメージは entrypointyarnnpm が設定できるようになっているので、必要に応じて使い分けましょう。今回は npm で設定しています。 あとは、コマンドラインで入力するような引数を args に渡してあげれば、ステップの記述は完了です。

詳細な記述方法はこちらをご覧ください。

今回は以下のような記述になりました。

steps:
  - name: node
    entrypoint: npm
    args: ["install"]
  - name: node
    entrypoint: npm
    args: ["run", "build"]
  - name: node
    entrypoint: npm
    args: ["run", "test:unit", "run"]
  - name: "gcr.io/cloud-builders/gcloud"
    args: ["app", "deploy", "app.yaml", "--project", "projectname", "--quiet"]

このような yaml を記述し、 cloudbuild.yaml としてリポジトリ内に置いておきます。

確認

いよいよ main ブランチへ push ... の前に、ディレクトリ構造を確認しておきます。 ここまでのステップで以下のような構造になっていれば大丈夫です。

(重要じゃないところは省いています)

project root
L src
  L (Vue Application のソース)
L (dist)
  L (なくてもOK。 手元でビルドをするとここに成果物が出てると思います。)
L .gcloudignore
L app.yaml
L cloudbuild.yaml
L package.json
L package-lock.json

完成!

ここまで設定をすれば、実際に GitHub で main ブランチへ push, merge を行うと、これらが自動で実行され、数分でデプロイまで完了しているのが確認できると思います。

お疲れ様でした。

まとめ

Cloud Build + App Engine を使って、CI/CD パイプラインを構築しました。 これで、コードの変更だけに集中できますね!

みなさんも良き CI/CD ライフを~