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

【6/19開催】Kong Community Japan Meetup #4
本イベントでは、Kong Inc. のVP of ProductであるReza Shafii氏もプレゼンターとして参加。当社からはアーキテクト マネージャーの槌野の登壇が決定!参加無料です!!

【6/21開催】開発者目線でのSBOMとの向き合い方
SBOMの導入から開発者がSBOMの作成・管理を自動で行っていくための方法(デモ)を紹介します。

【7/5開催】azd+Terraform? ~ポイントを押えてAzure上へのアプリケーション環境をラクチン構築~
ツールの概要説明から、実際の開発におけるポイントをお伝えします!

【7/19開催】現場で役立つAzure神小技10+α 〜生成AI,RAG,コスト削減など旬な技術満載のLT大会〜
Azureの最新技術や実用的な小技を紹介する特別なライトニングトーク大会を開催します!

【7/26開催】最適なIaCツールを選ぼう
プロジェクトでのツール選びに困らないための重要な観点をご説明します!

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

今回は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ファイルで設定できるものであれば全て切り替え可能ですね。
是非試してみてください!

アバター画像
About 佐藤 陽 58 Articles
ロードバイクやランニングなど、走ることが好きなサーバーサイドエンジニア。組み込み系からWeb系へとジョブチェンジし、現在はAzureを使ったWebアプリの開発や、DevOpsの構築を行っています。
ご覧いただきありがとうございます! この投稿はお役に立ちましたか?

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

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


ご覧いただきありがとうございます。
ブログの最新情報はSNSでも発信しております。
ぜひTwitterのフォロー&Facebookページにいいねをお願い致します!



>> 雑誌等の執筆依頼を受付しております。
   ご希望の方はお気軽にお問い合わせください!

Be the first to comment

Leave a Reply

Your email address will not be published.


*


質問はこちら 閉じる