URANIWAI | Static Web App へのアプリの設置方法

はじめに

この記事では、まず、サンプルアプリを Static Web App と関連するサービスに設置するリファレンスアーキテクチャを示します。その後、実際にアプリを設置していく際に必要な情報を説明します。

サンプルアプリのリファレンスアーキテクチャ

ここではサンプルアプリとして、 React で作成された SPA (Single Page Application) を対象にします。 SPA でアプリを提供する際、次のような構成になります。ここでは、前提条件として、ここで設置するサービスはインターネットを介して、一般のユーザーからアクセス可能な Web サービスとします。そのため、コンポーネント間の通信はパブリックなネットワークを通過します。

static web app reference architecture

この構成で登場する Azure のサービスの概要は以下の通りです。

サービス名	概要
Static Web Apps	SPA をホスティングする環境
API Management	API のホスティング
Function	API の処理の実体となる Function as a Service
Cosmos DB	NoSQL データベース
blob Storage	画像ファイルなどのファイルを保持する HTTP でアクセス可能なオブジェクトストレージ
Monitor	ログ情報を一元管理
GitHub	ソースコード管理とデプロイの実行環境

Static Web App について

Static Web Apps は、 2020 年 5 月に発表された Azure が提供する静的な Web サイトをホスティングする App Service の一つの形態として提供されているサービスです。

Static Web Apps は、通常の App Service とは異なり、特定のリージョンを指定して設置するサービスではなく、リージョンレスなサービスの一つです。 Azure ポータル上で Static Web Apps を設置する際にリージョンを指定する必要がありますが、これは、 Static Web Apps 上で利用可能な組み込み Azure Functions を設置するためのリージョンを指定するためのものです。

Static Web Apps は、GitHub や Azure DevOps に push されたコードを Azure Pipelines や GitHub Actions で自動的にビルドし、静的な Web アプリケーションとしてホスティングするサービスです。

現在、企業で Static Web App の導入の障壁になる点は、 Satic Web Apps がグローバルなサービスであり、 VNet の閉域の内側に設置できないことです。 Private Link の機能を利用して閉域の内部のプライベート IP アドレス経由でのみに通信経路を制限することは可能ですが、リソースが VNet の外側に存在しているため、 VNet の外側に自社コンテンツを置くことをセキュリティ部門が許可しないケースがあります。

加えて、 Static Web Apps に内包できる組み込み Azure Functions は、設置先に海外リージョンしか選択できないことも組み込み Azure Functions が使えない障壁になります。

Static Web App のプランについて

Static Web Apps は、 Free プランと Standard プランの 2 つのプランがあります。大きな違いとしては、 Free プランの場合、組み込みの Azure Functions しか利用できませんが、 Standard プランでは、Azure Functions を利用して、バックエンドの API を提供することができます。また、ロールによるアクセス制御が可能になる点や、プライベートエンドポイントによる閉域構成を取れる点も大きな違いです。

先に示したサンプルアプリでは、 API Management を経由して Function にアクセスする構成にしているため、スタンダードプランである必要があります。

機能	Free プラン	Standard プラン
Web ホスティング	あり	あり
GitHub との統合	あり	あり
Azure DevOps との統合	あり	あり
グローバルに分散した静的コンテンツ	あり	あり
SSL 証明書の無料の自動更新	あり	あり
ステージング環境	アプリあたり 3	アプリあたり 10
カスタムドメイン	アプリあたり 2	アプリあたり 5
Azure Functions による API	マネージド	マネージドまたは独自の持ち込み関数
アプリの最大サイズ	アプリあたり 250 MB	アプリあたり 500 MB
認証プロバイダの統合	事前構成済み	カスタム登録
関数を使用したカスタムロールの割り当て	なし	あり
プライベートエンドポイント	なし	あり
サービスレベルアグリーメント (SLA)	なし	99.95%
含まれる帯域幅	サブスクリプションあたり 100 GB/月	サブスクリプションあたり 100 GB/月
超過帯域幅	利用不可	0.20 USD/GB
Azure サブスクリプションあたりのアプリ数	10	制限なし
ストレージ	すべてのステージング環境と運用環境で最大 500 MB , アプリあたり最大 250 MB	すべてのステージング環境と運用環境で最大 2 GB , アプリあたり最大 500 MB
許可された IP 範囲	利用不可	25
承認 (組み込みロール)	組み込みの authenticated ロールで認証できる無制限のエンドユーザー	組み込みの authenticated ロールで認証できる無制限のエンドユーザー
承認 (カスタムロール)	招待によってカスタムロールに属することができる最大 25 人のエンドユーザー	招待によってカスタムロールに属することができる最大 25 人のエンドユーザー、またはサーバーレス機能によってカスタムロールを割り当てられる無制限のエンドユーザー
要求サイズの制限	30MB	30MB
ファイル数	15,000	15,000

[参考: Azure Static Web Apps ホスティングプラン, Azure Static Web Apps のクォータ]

Static Web App へのアプリの設置方法

今回、uraniwai を Static Web App に設置する方法を説明します。 uraniwai は React で作成された SPA (Single Page Application) です。 React アプリを Static Web App に設置する方法は、以下のドキュメントに記載されています。

React アプリを Static Web Apps にデプロイする

Static Web App へアプリを設置する GitHub Actions のワークフロー例

ここでは、uraniwai を Static Web App に設置する GitHub Actions のワークフロー例を紹介します。以下に Azure ポータルを介して作成した GitHub Actions のワークフローの中で、 Static Web Apps の設置に関わる部分を示します。

Static Web App を設置するために、 GitHub Actions には「Azure/static-web-appsdeploy」というモジュールが提供されています。(link)

・・・

jobs:
  build_and_deploy_job:
    ・・・
    steps:
    ・・・
    - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }}
          action: 'upload'
          app_location: '/'
          api_location: ''
          output_location: 'build'
          production_branch: 'main'
        env:
          SKIP_DEPLOY_ON_MISSING_SECRETS: true

ここでポイントになるのが、 app_location と api_location という 2 つのパラメータです。これらのパラメータは、それぞれ、配信する静的コンテンツのリポジトリ内でのパスと組み込み Functions へ配置するコードのリポジトリ内でのパスを指定するパラメータです。

これらを指定することで、 GitHub Actions は、指定したパスにあるコードを Static Web App にそれぞれを設置することができます。

Static Web App のマネージド Azure Functions を利用する場合

uraniwai は、Azure Functions を利用して、バックエンドの API を提供しています。そのため、uraniwai を Static Web App に設置する場合は、Standard プランを利用する必要があります。

マネージド Functions を React アプリから呼び出す方法

マネージド Functions の制約

現在、マネージド Functions には、 HTTP トリガーのみ利用可能という制約があります。そのため、 HTTP トリガー以外のトリガーを利用する場合は、独自の Functions を持ち込む必要があります。

また、マネージド Functions は、消費量プランのみがサポートされています。これは、マネージド Functions が、 VNet 統合など閉域環境で利用できないことを意味します。

Azure Functions v4 の実装方法

Azure Functions: Version 4 of the Node.js programming model is in preview

Static Web App の閉域化

Blob ストレージへの静的コンテンツの配置

Azure CDN を利用したキャッシュの最適化

Blob ストレージでは、カスタムドメインに対して、HTTPS でアクセスする時の証明書を発行することができません。一方で、 Azure CDN には、カスタムドメインに対して証明書を発行して、 HTTPS でアクセスした時に証明書エラーが発生しないようにできるため、本投稿では Azure CDN を利用して Blob ストレージのコンテンツへアクセスするように設定します。

チュートリアル:Azure CDN カスタムドメインで HTTPS を構成する