Cloud Buildを使ってReactアプリをGCEへデプロイ

CI/CDを構築する際、AWSのCodePipelineを使う機会はこれまで結構あったのですが、今回、初めてGCPのサービスであるCloudBuildを使ってみたので、その使い方を記録に残しておきます。

Cloud Buildアプリのインストール

今回は、ソースリポジトリとしてGitHubを使用するので、GitHub MarketplaceページからCloud Buildと連携するためのアプリをインストールします。リンク→https://github.com/marketplace/google-cloud-build
上記リンクを辿っていくと、最終的にCloud Buildのコンソールに移動し、どのリポジトリに対して、何をトリガーにCI/CDを起動するか、といった設定を行うことができます。

cloudbuild.yamlの作成

AWSのCodeBuildではbuildspec.ymlにパイプラインで実行するコマンドを記載していきますが、GCPのCloudBuildではcloudbuild.yamlがそれに該当します。ここでは、create-react-appで作成したプロジェクトをビルドし、GCE上の/var/www/html上にデプロイすることにし、以下のように設定ファイルを記載し、GitHubのリポジトリの直下に配置しました。

steps:
  - name: node
    entrypoint: yarn
    args: ['install']
  - name: node
    entrypoint: yarn
    args: ['build']
  - name: 'bash'
    args: ['mv', './build', 'html']
  - name: 'gcr.io/google.com/cloudsdktool/cloud-sdk'
    entrypoint: gcloud
    args: ['compute', 'scp', '--recurse', './html', 'codebuild-test:/var/www', '--zone', 'asia-northeast1-b']

各ステップで記述する項目であるname、entrypoint、argsについて少し解説します。（他の項目も含めた解説は→https://cloud.google.com/cloud-build/docs/build-config?hl=jaを参照ください）

• name：指定が必須の項目。コマンドを実行するコンテナイメージを指定。
• entrypoint：上記で指定したイメージのデフォルトのエントリポイントを使用しない場合に、エントリポイントを指定するために使用。このフィールドを指定しない場合は、デフォルトのエンドポイントが使用される。
• args：イメージのデフォルトのエントリポイント、もしくはentrypointに指定したコマンドへの引数のリストを指定。

entrypointとargsの箇所が少しわかりにくいかもしれませんが、基本的にはnameでパイプラインで使用するコンテナイメージを指定して、entrypoint、argsで実行したいコマンドを指定する形となります。

まとめ

以上で、CI/CDの構築は完了です。あとはGitHubにプッシュした内容がGCE上に反映されたらOKです。

GCEにデプロイする方法として、gcloudのscpコマンドを使ってるのですが、もっと良い方法があればコメントいただけると嬉しいです。CloudBuildの公式のページ見ると、GKE、CloudRun、AppEngine、CloudFunctions、Firebaseへのデプロイ方法は記載があったのですが、GCEへのデプロイ方法は記載がなかったので、これで良いのか少し疑問が残っています。