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

はじめに

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

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

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

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

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 にアクセスする構成にしているため、スタンダードプランである必要があります。

[参考: 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 を構成する