タスク 7 - Azure Container Apps にアプリをデプロイする処理を追加 - UI アプリ

UI アプリを Azure Container Apps にデプロイするための処理を GitHub アクションに追加します。

本タスクは、演習 1 で作成された UI アプリ のみの GitHub リポジトリに対して作業を行いします。

演習作業簡略化のため、ファイルの作成と編集は main ブランチに対して直接行います。

作業

タスク 2 の 1. と同様の手順で、.github/workflows/build-deploy.yml ファイルを編集モードで開きます。

操作画面イメージ
env に下記環境変数を追加し、準備タスクにて作成した Azure のリソースに合わせて、以下を設定します。

| 項目 | 値 | | —- | —- |
| リソースグループ名 | (準備タスクで作成されたリソースグループ名) | | Azure Container Apps 名 - API アプリ | ctapp-demo-ui | | API アプリのベース URL | (API Container App のアプリケーション URL)) |

操作画面イメージ
```
   # Add envs
   RESOURCE_GROUP_NAME: # 準備タスクで作成されたリソースグループ名をここに記載
   CONTAINERAPP_NAME: # 準備タスクで作成された UI Container App 名 `ctapp-demo-ui` をここに記載
   API_BASE_URL: # 準備タスクで作成された API Container App のアプリケーション URL をここに記載
```
操作画面イメージ

下記 step コードを .github/workflows/build-deploy.yml ファイルの末尾に追加します。

       # Add a step
       - name: Deploy to containerapp
         uses: azure/CLI@v1
         with:
           inlineScript: |
             az extension add --upgrade --name containerapp

             az containerapp registry set \
               --name ${{ env.CONTAINERAPP_NAME }} \
               --resource-group ${{ env.RESOURCE_GROUP_NAME }} \
               --server ${{ env.CONTAINER_REGISTRY }} \
               --username  ${{ secrets.CONTAINER_REGISTRY_USERNAME }} \
               --password ${{ secrets.CONTAINER_REGISTRY_PASSWORD }}

             az containerapp ingress enable \
               --name ${{ env.CONTAINERAPP_NAME }} \
               --resource-group ${{ env.RESOURCE_GROUP_NAME }} \
               --target-port 3000 \
               --type external

             container_name=$( \
               az containerapp show \
                 --name ${{ env.CONTAINERAPP_NAME }} \
                 --resource-group ${{ env.RESOURCE_GROUP_NAME }} \
                 --query "properties.template.containers[0].name" \
                 --output tsv
             )
             az containerapp update \
               --name ${{ env.CONTAINERAPP_NAME }} \
               --resource-group ${{ env.RESOURCE_GROUP_NAME }} \
               --container-name $container_name \
               --image ${{ env.CONTAINER_REGISTRY }}/${{ env.REPOSITORY_NAME }}:${{ github.sha }} \
               --set-env-vars API_BASE_URL=${{ env.API_BASE_URL }}

注意各行のインデントを間違いと構文エラーになりますので、ご注意してください。

az containerapp ingress enable の --target-port オプションは UI アプリの場合は 3000 を指定。
最後の行 --set-env-vars API_BASE_URL=$ は UI アプリ設定時のみ必要。

操作画面イメージ

確認

上記 2. および 3. の修正が下図赤枠のように .github/workflows/build-deploy.yml ファイルに反映されていることを確認します。

操作画面イメージ
タスク 1 の 4. と同様に、手動実行でワークフローを起動します。

操作画面イメージ
ワークフロー処理はエラーなく終了し、deploy ジョブのログに az script ran successfuly. のメッセージがが出力されていることを確認します。

操作画面イメージ
UI アプリの Azure Container Apps にリビジョンとしてデプロイされていることが確認できます。

操作画面イメージ
UI アプリの URL にアクセスして動作確認ができます。

操作画面イメージ

作業

確認

References