こんにちは、サイオステクノロジーの佐藤 陽です。
今回はStaticWebAppsのconfigファイル(staticwebappp.config.json)を環境ごとに設定する内容になります。
便利なプレビュー環境機能を存分に使いこなすためにも、是非最後までご覧ください。
はじめに
今回は、Azure Front DoorとStatic Web Appsの連携を題材にして実装を進めていきたいと思います。
目的としては
- 本番環境はFrondDoor経由でしかアクセスできないようにする
- プレビュー環境は直接StaticWebAppsにアクセスできるようにする
の2点です。
利用する環境およびリソースとしては
- Azure Pipelines
- Azure Static Web Apps
- Azure Front Door
の3点です。
各サービスの基本的な説明は割愛します。
Static Web Appsに関する記事は以前書いたので、よければご覧ください。
Static Web Appsに本番環境/プレビュー環境が用意されていると検証しやすいかと思います。
デプロイされているプロジェクトはなんでもOKです。
概要
Azure Front DoorとStaticWebAppsの組み合わせはよく使われるものかと思います。
更にStaticWebAppsのConfigファイル(staticwebapp.config.json)に数行加えるだけで、指定したFront Doorからのアクセスに制限できるようになります。
"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ファイルで設定できるものであれば全て切り替え可能ですね。
是非試してみてください！
