はじめに
サービスをデプロイするときはビルドしてテストしてから行うという手順はよくあります。 その時に、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 のサービス名を記述します。
runtime
と service
が記述できたら、 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
イメージは entrypoint
が yarn
と npm
が設定できるようになっているので、必要に応じて使い分けましょう。今回は 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 ライフを~