Azure Static Web Apps のトラフィック分割を試してみた

Azure Static Web Apps のトラフィック分割とは

Azure Static Web Apps (以下ASWA) のトラフィック分割は、一定の割合を指定することでブランチ環境へトラフィックを分割できる機能です。

Public preview: Traffic Splitting for Azure Static Web Apps

ASWA のトラフィック分割はホスティングプランがStandard でのみ利用可能です。現在はプレビュー機能のため無料で利用可能となっています。

ASWA のトラフィック分割が登場するまで、環境ごとのトラフィック分散を行うためにAzure Front Door や各種ロードバランサーを前段に配置する必要がありました。高度な負荷分散や特定の条件下に応じた振り分けを行いたい場合には良いですが、小規模のサイトやサービスだとその分コストがかかってしまいます。ASWA のトラフィック分散が追加されたことにより、ブランチ環境との制約はありますがASWA 単体で複数の環境に対しトラフィックの分散を行うことができるようになりました。

類似機能として、Azure App Service にデプロイメントスロットがあります。ASWA のトラフィック分割は複数のプレビュー環境に対し単純なトラフィック分割を行うのみであり、App Service のデプロイメントスロットのように自動スワッピングなどの機能はありません。

ASWA のトラフィック分割は最大で10 環境まで設定可能です (Standard プランで利用可能なプレビュー環境の数が最大10 のため)

また、トラフィック分割のクライアント側の挙動は、一度アクセスした環境に対し継続してアクセスを行います。トラフィック変更のタイミングは再度トラフィック分散の割合を変更するタイミングで変わります。

ASWA のトラフィック分散を設定していると、ASWA のホスティングプランをStandard プランからFree プランにダウングレードするとエラーが発生します。ホスティングプランのダウングレードが必要な場合は、一度トラフィック分割の設定を削除したのちダウングレードを行ってください。

トラフィック分割の設定方法

ASWA のトラフィック分割は、2023年12月16日現在Azure Portal でのみ設定可能です。Azure CLI やPowerShell の最新版でもコマンドはまだ実装されていないため、CLI 操作でトラフィック分割の設定はできません。

今回は事前にnpx create-react-app で作成したReact アプリをStandard プランのASWA にデプロイし、canary というブランチ環境を用意した上で設定を行います。ブランチ環境の作成方法につきましては以下のドキュメントを参考にしてください。

Azure Static Web Apps でブランチ プレビュー環境を作成する

React アプリについては、トラフィック分割をわかりやすくするため、文言をブランチ名に変更しています。

トラフィック分割を設定するにはASWA を選択し、左ペインから [環境] を選択します。

トラフィック分割はブランチ環境が存在しないと設定できないため、ブランチ環境があることを確認し、上部の [トラフィック分割 (プレビュー)] を選択します。

ホスティングプランがFree の場合は、以下画面のようにトラフィック分割設定画面で警告が表示されグレーアウトされます。

トラフィック分割 (プレビュー) 選択後、トラフィック分割の設定画面が表示されます。設定画面の各種項目については以下の通りになります。

トラフィック分割を設定するには [+追加] を選択し、トラフィックを分割するプレビュー環境を選択します。

追加を選択後、環境名が選択可能となるため環境名で [canary] を選択し、トラフィックは50% のままで [保存] を選択します。ここで選択可能な環境は同じASWA 内のプレビュー環境のみとなります。

以上でトラフィック分割の設定は完了となります。トラフィック分割は設定完了後のアクセスからすぐに反映されます。動作確認でASWA のURL からアクセスを行い、canary ブランチの環境に接続されたことを確認します。トラフィックの割合によってはProduction 環境へアクセスすることもあるため、別のブランチ環境にアクセスできない時は何度かトラフィック割合を変更して動作確認を行います。

トラフィック分割のトラフィック割合設定時について注意点があります。トラフィック分割ではトラフィックの割合が0 の環境を自動的に削除されます。この挙動については現時点でブランチ環境だけでなくProduction 環境にも適用されるため、Production 環境のトラフィック割合を0 にすると、Production 環境を再設定できなくなります。間違えてProduction 環境のトラフィック割合を0 にしてしまった場合は、一度全てのブランチ環境を削除後すると再度Production 環境へトラフィックが流れるようになります。

また、トラフィック分割を設定していてもブランチ環境の削除は可能です。トラフィック分割で設定中の環境を削除時、トラフィックの割合が100 にならない場合は100 になるよう他の環境へランダムに振り分けられます。

トラフィック分割のユースケース

トラフィック分割は以下のようなユースケースが考えられます。

• A/B テスト
• カナリアリリース

A/B テスト

A/B テストはWeb サイトやサービスにおいて、2つの異なるデザインや広告などを表示し、より成果を出せるものを見つけるWeb マーケティングの手法です。ASWA ではProduction 環境とは別のブランチ環境を用意し、トラフィック分割で2つの異なる環境を見せることにより、A/B テストをASWA 単体で実施できます。前段に各種ロードバランサーやCDN を配置する規模ではないサービスにおいても気軽にA/B テストを行えるメリットがあります。

カナリアリリース

カナリアリリースは一部のユーザーのみ新環境にアクセスさせ、新環境に問題がないことを確認できたら段階的に移行を行っていくデプロイ方法です。ASWA のトラフィック分割を利用すれば、一定割合のユーザーを新環境に向け、問題がなければ新環境をデプロイさせることも可能となります。一例として、以下のようなデプロイも行うことができます。

1. ブランチ環境に新環境をデプロイ
2. トラフィック分割でユーザーの10% を新環境にアクセスさせる
3. 問題ないようであれば新環境のトラフィック割合を少しずつ増やし、最終的に100% まで増やす
4. Production 環境に新環境をデプロイする
5. ブランチ環境の新環境を削除しProduction 環境にトラフィックを向ける

トラフィック分割でできない、向いていないこと

ASWA のトラフィック分割は以下のようなことはできない、または向いていません。

特定の条件に応じた振り分け

ASWA のトラフィック分割はあくまでトラフィックの割合を設定するのみであり、Traffic Manager やFront Door などと違い特定のルールに応じた振り分けはできません。もし、ヘッダーやアクセス元のリージョンなど特定の条件下で振り分けを行いたい場合はASWA の前段に負荷分散のサービスを追加し、それぞれの環境に応じた振り分けを行いましょう。

各環境へのヘルスチェック

ASWA のトラフィック分割は設定したブランチ環境に対しヘルスチェックは行いません。また、App Service のデプロイメントスロットのように自動でスワッピングも行いません。そのため、特定のブランチ環境がダウンした場合でもダウンした環境に接続を続けます。

Production 環境のトラフィックを0 にするようなデプロイやスワッピング

トラフィック分割の設定方法で記載した通り、Production 環境のトラフィックを0 にするとProduction 環境へのトラフィックが流れなくなるため、App Service のデプロイメントスロットのスワッピングみたいなデプロイはできません 。

高度な負荷分散

トラフィック分割はあくまで同一のASWA 内のブランチ環境に対してトラフィックを分散するだけのため、負荷分散サービスのような高度な機能は持っていません。また、負荷分散サービスのようにWAF を設定するなどのセキュリティ対策もできないため、高度な負荷分散を目的とした利用には向いていません。

トラフィック分割の気になる点

プレビュー段階のトラフィック分割についていくつか気になる点があります。

Azure CLI やPowerShell などのCLI 操作

現時点ではAzure CLI などのCLI 操作でトラフィック分割の設定や割合の変更はできずAzure Portal から手動操作を行う必要があります。CLI 操作ができるようになれば、CI/CD のパイプラインへ組み込むなども行いやすくなるため、カナリアリリース時の自動化やその他操作を行いやすくなるのではないかと考えています。

コスト面について

プレビュー機能のため、現在トラフィック分割は無料で利用できます。今後GA された後などでどの程度の料金感になるかが気になります。コスト面においてあまり気にならないようであれば使いやすいですが、あまりコストがかかるようであれば使いにくくなる懸念もあります。ただ、ASWA 自体がそこまでコストのかかるサービスではないため、個人的にはあまりコストは掛からないのではないかと考えています。

ブランチ構成について

ASWA のトラフィック分割はブランチ環境を前提としているため、場合によってはブランチの構成を変更する必要があります。新規で開発を行う場合であればこのあたりを考慮した構成にするのも一つですが、既存のブランチ構成については他の開発者やサービスに影響を与える可能性もあるため、トラフィック分割を検討する時はこのあたりも考慮する必要がありそうです。

まとめ

• Azure Static Web Apps のトラフィック分割は運用環境とブランチ環境でトラフィック割合に応じたアクセス分散を行う機能
• 現在はプレビュー機能のため無料だが、利用にはホスティングプランをStandard にする必要がある
• Azure Static Web Apps 単体でA/B テストやカナリアリリースを行えるため、ロードバランサーやCDN を配置するまでもない小規模のサービスでも導入しやすい
• 2023年12月16日現在ではAzure CLI などで設定できないため、トラフィック分割を利用するためにはAzure Portal から設定を行う

参考資料

• Azure Static Web Apps でのトラフィックの分割 (プレビュー)