【Azure × GitHub】React コンテナアプリのCI/CD 環境を構築してみよう

はじめに

Docker や Azure コンテナサービス関連の勉強していました。

成果物として、Azure と GitHub Action を利用した React コンテナアプリの CI/CD 環境が割と簡単に構築できるテンプレートリポジトリを作成しました。

学習したことも後々まとめていこうと思いますが、今回はテンプレートリポジトリの利用方法を共有してみようかと思います。

環境

• macOS: 15.0.1
• Visual Studio Code: 1.95.1
  • Bicep(拡張機能): v0.30.23

前提

ローカル PC

• git がインストールされていること。
• vscode がインストールされていること。
  • Bicep(拡張機能) がインストールされていること

Azure

• Azure アカウントを所有していること。
• 作業アカウントに、サブスクリプションスコープの所有者ロールが割り当てられていること

テンプレートについて

下記リポジトリで公開しています。

ディレクトリ構造

.
├── .github
│   └── workflows
│       └── build_and_deploy.yaml
├── app
├── infra
│   ├── modules
│   │   ├── containerapps.bicep
│   │   ├── environment.bicep
│   │   ├── registries.bicep
│   │   ├── roleAssignments.json
│   │   ├── roleAssignmentsFromARM.bicep
│   │   ├── userAssignedIdentities.bicep
│   │   └── workspaces.bicep
│   ├── main.bicep
│   ├── main.bicepparam
├── .gitignore
├── docker-compose.yml
├── Dockerfile
└── README.md

app : React アプリケーション

npx create-react-app my-app --template typescript で作成されるデフォルトの構成です。

infra : Azure リソース

作成するリソースの Bicep テンプレートをまとめています。

• リソース一覧と役割：

No	リソース名	説明
1	Log Analytics Workspace	Azure Container Apps のログ格納・監視する
2	Azure Container Registry	コンテナイメージを格納する
3	Azure Container Apps Environment	Azure Container Apps の管理、論理的ネットワーク空間
4	User Assigned Managed Identity	イメージのプル、プッシュ、コンテナへのデプロイを行う
5	Azure Container Apps	コンテナアプリの実行環境
6	Role Assignments	マネージド ID に必要な権限を付与
7	Federated Identity Credentials	マネージド ID にフェデレーション資格情報を追加

• 依存関係：

利用方法

注意
Azure のコンテナサービス群を利用します。
利用状況によっては、コストが発生しますが、自己責任でお願いします。

STEP 1 : テンプレートリポジトリをフォークする

1. リポジトリを フォークする
2. フォークした リポジトリをクローンする。
3. クローンしたリポジトリを開く。

フォークとクローンについて

• リポジトリをフォークする

• リポジトリをクローンする

STEP 2 : Bicep を利用してインフラ環境を構築する

2-1 : bicepparam の設定する

main.bicepparam を開き、必要なパラメータを設定します。

main.bicepparam

using './main.bicep'

// リソースの名前は以下のようになります。
// {リソースの略語}-{アプリ名}-{サフィックス}
// Check: https://learn.microsoft.com/ja-jp/azure/cloud-adoption-framework/ready/azure-best-practices/resource-naming

param appName = '{your app name}' // require
param environment = '{your environment name}' // require
param suffix = '' // option

param federatedIdentityCredentialsConfig = { // require
  name: 'github_federation_for_azure_container_services'
  audiendes: ['api://AzureADTokenExchange']
  issuer: 'https://token.actions.githubusercontent.com'
  subjedt: 'repo:{github account name}/{github repository name}:environment:Production'
}

// federatedIdentityCredentialsConfig について
// github の場合、次の形式である必要があります。
// - name：
//    フェデレーテッド ID 資格情報名には、文字 (A ～ Z、a ～ z)、数字、ハイフン、ダッシュのみを含める必要があります。数字または文字で始める必要があります。
//    フェデレーション ID 認証情報の名前は 3 ～ 120 文字以内で、文字 (A ～ Z、a ～ z)、数字、ハイフン、ダッシュのみを含み、数字または文字で始まる必要があります。
// - audiendes:
//    ['api://AzureADTokenExchange'] である必要があります。
// - issuer:
//    'https://token.actions.githubusercontent.com' である必要があります。
// - subjedt:
//    repo:{github account name}/{github repository name}:{entity}
//    - entity：
//       環境 => environment:{environment name} <<<= 今回はこれ
//       ブランチ => ref:refs/heads/{branch name}

suffix はオプションとしていますが、リソースによっては グローバルでユニークにする必要があるため、お試しであれば日時を入れるなど被らない名前にすることをおすすめします。

2-2 : リソースをデプロイする

1. command + shift + p でコマンドパレットを起動する。

2. [ Bicep: Deploy Bicep File… ] を選択する。

3. [ infra/main.bicep ] を選択する。

4. [ デプロイ名(任意の値) ] を入力して、Enter を押す。

5. リソースグループ を選択、または新規作成する。

• 新規作成する場合：

6. [ infra/main.bicepparam ] を選択する。

2-3 : リソースを確認する

1. vscode 上のターミナルにURL が表示されるので、アクセスしてデプロイ結果を確認する。

• ターミナル：

• デプロイ結果：

2. [ リソースグループに移動 ] を新規タブで開き、リソース一覧の中から、 [<コンテナアプリ>] を選択する。

3. コンテナアプリの URL にアクセスし、下記画面が表示されることを確認する。

STEP 3 : GitHub Action 用に変数とシークレットを登録する

1. デプロイ結果の[ 出力 ] を選択する。（STEP : 2-3-1 の画面）

2. 表示された値を GitHub リポジトリの [Actions secrets and variables] から、 Production 環境を作成し、変数とシークレットを登録する。

GitHub Action の変数とシークレットについて

• GitHub Actions でのシークレットの使用
• 変数に情報を格納する

Type	名前	説明	設定値
secret	AZURE_CLIENT_ID	マネージド ID のクライアント ID	環境依存
secret	AZURE_TENANT_ID	テナント ID	環境依存
secret	AZURE_SUBSCRIPTION_ID	サブスクリプション ID	環境依存
variable	AZURE_RESOURCE_GROUP_NAME	リソースグループ名	環境依存
variable	AZURE_CONTAINER_REGISTRY_NAME	Azure Container Registry のリソース名	環境依存
variable	AZURE_CONTAINER_APP_NAME	Azure Container Apps のリソース名	環境依存
variable	CONTAINER_NAME	コンテナ名	app

STEP 4 : ワークフローを起動させてアプリをデプロイする

適当に変更を加えて main ブランチに push します。

または、GitHub Action のワークフローを手動でトリガーしてください。

ワークフローの手動実行について

• ワークフローの手動実行

STEP 5 : ワークフローとデプロイを確認する

GitHub Action のワークフローの結果とコンテナアプリにデプロイできていることを確認します。

• GitHub Action：

• コンテナアプリ：

以上です！

さいごに

作成したテンプレートを利用して、Azure と GitHub Action を利用した React コンテナアプリの CI/CD 環境を構築する方法を説明しました。

今回コンテナ技術をはじめて触ったので、細かいところまでは理解できていませんが、一旦やりたいことができたのでよかったです。

本記事、テンプレートが誰かの役に立てば幸いです。

参考