【Azure Static Web Apps】環境ごとにconfigファイルを切り替えよう【Azure Pipelines】

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

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

はじめに

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

目的としては

  1. 本番環境はFrondDoor経由でしかアクセスできないようにする
  2. プレビュー環境は直接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点であり

  1. 本番環境はFrondDoor経由でしかアクセスできないようにする
  2. プレビュー環境は直接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ファイルで設定できるものであれば全て切り替え可能ですね。
是非試してみてください!

ご覧いただきありがとうございます! この投稿はお役に立ちましたか?

役に立った 役に立たなかった

0人がこの投稿は役に立ったと言っています。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です