◆ Live配信スケジュール ◆
サイオステクノロジーでは、Microsoft MVPの武井による「わかりみの深いシリーズ」など、定期的なLive配信を行っています。
⇒ 詳細スケジュールはこちらから
⇒ 見逃してしまった方はYoutubeチャンネルをご覧ください

【5/21開催】Azure OpenAI ServiceによるRAG実装ガイドを公開しました
生成AIを活用したユースケースで最も一番熱いと言われているRAGの実装ガイドを公開しました。そのガイドの紹介をおこなうイベントです!!
https://tech-lab.connpass.com/event/315703/

こんにちは、サイオステクノロジーの佐藤陽です。

今回はStaticWebAppsのconfigファイル(staticwebappp.config.json)を環境ごとに設定する内容になります。
便利なプレビュー環境機能を存分に使いこなすためにも、是非最後までご覧ください。

1 はじめに
2 概要
3 実装
4 おわりに

はじめに

今回は、Azure Front DoorとStatic Web Appsの連携を題材にして実装を進めていきたいと思います。

目的としては

本番環境はFrondDoor経由でしかアクセスできないようにする
プレビュー環境は直接StaticWebAppsにアクセスできるようにする

の2点です。

利用する環境およびリソースとしては

Azure Pipelines
Azure Static Web Apps
Azure Front Door

の3点です。

各サービスの基本的な説明は割愛します。

Static Web Appsに関する記事は以前書いたので、よければご覧ください。

Azure Static Web Apps×Azure DevOpsでお手軽にプレビュー環境を構築する

Static Web Appsに本番環境/プレビュー環境が用意されていると検証しやすいかと思います。
デプロイされているプロジェクトはなんでもOKです。

概要

Azure Front DoorとStaticWebAppsの組み合わせはよく使われるものかと思います。

更にStaticWebAppsのConfigファイル(staticwebapp.config.json)に数行加えるだけで、指定したFront Doorからのアクセスに制限できるようになります。

参考：静的 Web アプリの構成を更新する

"networking": {
  "allowedIpRanges": ["AzureFrontDoor.Backend"]
},
"forwardingGateway": {
  "requiredHeaders": {
    "X-Azure-FDID" : "<YOUR-FRONT-DOOR-ID>"
  },
  "allowedForwardedHosts": [
    "my-sitename.azurefd.net"
  ]
}

また、Front DoorもPortal上の設定でStatic Web Appsと接続できるようになっており、設定も楽々です。

実装

繰り返しになりますが、今回の目的は以下2点であり

本番環境はFrondDoor経由でしかアクセスできないようにする
プレビュー環境は直接StaticWebAppsにアクセスできるようにする

利用するconfigファイルを環境ごとに切り替えることで実現できます。

先ほども述べたようにFront Doorからのアクセスに制限するか否かの設定は、staticwebapp.config.jsonファイルに記載があります。

ただ、デフォルトの設定だとこの設定は本番の環境にも適用されますし、プレビュー環境にも適用されます。
そのため、本番環境だけFront Doorを適用したいはずなのに、プレビュー環境にまでその影響が及んでしまいます。

git-flowなどのブランチ運用をしている場合、ブランチ毎にconfigファイルを管理するというのも難しいですね。

これを解消するのがAzureStaticWebApp@0タスクのconfig_file_locationパラメータです。

通常であればstaticwebapp.config.jsonファイルはプロジェクトのルートに置かれているかと思いますが
このconfig_file_locationで指定することで、指定したのディレクトリに含まれるconfigファイルが使われます。

そのため、パイプラインレベルで分けてしまえばconfigファイルの使い分けができるようになります。
図に起こすとこのような形です。

yamlファイルとしては以下のような形になるかと思います。
ポイントとしては以下3つのパラメータです。

trigger
production_branch
config_file_location

本番環境用.yaml

name: Azure Static Web Apps CI/CD

pr: none
trigger:
  branches:
    include:
      - master #triggerをmaster(本番環境)だけにする

jobs:
- job: build_and_deploy_job
  displayName: Build and Deploy Job
  condition: or(eq(variables['Build.Reason'], 'Manual'),or(eq(variables['Build.Reason'], 'PullRequest'),eq(variables['Build.Reason'], 'IndividualCI')))
  pool:
    vmImage: ubuntu-latest
  variables:
  - group: Azure-Static-Web-Apps-variable-group
  steps:
  - checkout: self
    submodules: true
  - task: AzureStaticWebApp@0
    inputs:
      azure_static_web_apps_api_token: $(AZURE_STATIC_WEB_APPS_API_TOKEN_O)
      production_branch : master #Productionブランチを明示的に指定
      #config_file_location: #ルートにあるconfigファイルを利用する場合は指定不要
###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
      app_location: "/" # App source code path
      api_location: "" # Api source code path - optional
      output_location: "" # Built app content directory - optional
###### End of Repository/Build Configurations ######

プレビュー環境用.yaml

name: Azure Static Web Apps CI/CD

pr: none
trigger:
  branches:
    include: #triggerを構築する
      - develop
      - feature/*

jobs:
- job: build_and_deploy_job
  displayName: Build and Deploy Job
  condition: or(eq(variables['Build.Reason'], 'Manual'),or(eq(variables['Build.Reason'], 'PullRequest'),eq(variables['Build.Reason'], 'IndividualCI')))
  pool:
    vmImage: ubuntu-latest
  variables:
  - group: Azure-Static-Web-Apps-variable-group
  steps:
  - checkout: self
    submodules: true
  - task: AzureStaticWebApp@0
    inputs:
      azure_static_web_apps_api_token: $(AZURE_STATIC_WEB_APPS_API_TOKEN_O)
      production_branch : master #Productionブランチを明示的に指定
      config_file_location: "/dev/" ##使用するconfigファイルが置いてあるディレクトリを指定
###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
      app_location: "/" # App source code path
      api_location: "" # Api source code path - optional
      output_location: "" # Built app content directory - optional
###### End of Repository/Build Configurations ######

おわりに

AzureStaticWebApp@0タスクのconfig_file_locationパラメータを利用して、configファイルの切り替えを行う方法をご紹介しました。
今回はFrontDoorとの連携を題材に挙げましたが、これに限らずconfigファイルで設定できるものであれば全て切り替え可能ですね。
是非試してみてください！