Azure Static Web Apps についてよく寄せられる質問

Static Web Apps では、以下を自動的にビルドできます。

• React、Vue.js、Angular、Blazor WebAssembly など、一般的なシングルページ アプリケーション (SPA)
• Next.js、Nuxt.js、Gatsby、Hugo、Jekyll、Eleventy など、一般的に使用される静的サイト ジェネレーター

詳細については、フロントエンド フレームワークの構成に関する記事を参照してください。

Azure Static Web Apps のビルド エンジンは、Oryx を利用してアプリのフロントエンドと API をビルドします。

アプリをビルドするときに、Oryx によってビルド ステップが自動的に検出され、実行されます。 たとえば、アプリで Node.js を使用している場合、npm または Yarn を使用してパッケージがインストールされます。 次に、アプリの package.json ファイルで指定されている build または build:azure スクリプトが実行されます。

アプリのビルド方法を完全に制御する場合は、アプリの GitHub ワークフローまたは Azure DevOps パイプラインで独自のビルド ステップを構成できます。 その後、Static Web Apps GitHub Actions または Azure Pipelines タスクを使用してアプリをデプロイできます。 必ず skip_app_build を true に設定します。 詳細については、ビルド構成に関する記事を参照してください。

現在、skip_app_build コマンドは、フロントエンド アプリでのみサポートされています。 API アプリは、Azure Static Web Apps GitHub Actions または Azure Pipelines タスクによってビルドする必要があります。

現在、Azure Static Web Apps では、GitHub Actions と Azure DevOps がサポートされています。 今後、さらに多くのデプロイ オプションが追加される予定です。

アプリで create-react-app を使用した場合、そのビルド コマンドは、GitHub Actions や Azure Pipelines などの継続的インテグレーション (CI) 環境で実行されるときに警告をエラーとして扱います。 アプリで警告が発生した場合、ビルドに失敗します。 これらの問題を修正するには、アプリを変更して警告を削除します。 警告が発生してもビルドが成功するようにしたい場合、package.json 内のビルド スクリプトを更新して、CI 環境変数の設定を解除します。

"scripts": {
  "build": "CI= react-scripts build"
}

ビルドおよびデプロイ元のブランチを変更するには、アプリの GitHub ワークフローでブランチ名を更新します。 たとえば、release という名前のブランチからビルドおよびデプロイするようにアプリを変更する場合は、ワークフローの on セクションを次のように更新します。

on:
  push:
    branches:
      - release
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - release

プレビュー期間中に作成された静的 Web アプリの場合、デプロイ トークンをリセットすることが必要な場合があります。

Azure Static Web Apps のビルド エンジンは、Linux Docker コンテナーで実行されるので、Linux ビルド エージェントでのみ実行できます。

GitHub ワークフローで、LFS を有効にするように actions/checkout アクションを構成します。

- uses: actions/checkout@v2
  with:
    submodules: true
    lfs: true

Azure Static Web Apps では、キャッシュの無効化を自動的に処理します。 デプロイが完了すると、すべての要求に最新バージョンのファイルが提供されます。 ただし、ユーザーのブラウザーまたは CDN (構成済みの場合) にファイルをキャッシュすることもできます。 ブラウザーおよび CDN でコンテンツをキャッシュする方法を制御するには、アプリの構成ファイルで適切なヘッダーを構成します。

現在、実稼働前環境は、GitHub Actions でのみサポートされています。

apex ドメインなど、カスタム ドメインを使用するようにアプリを構成できます。 Static Web Apps では、カスタム ドメインを追加すると、無料の TLS 証明書が自動的に提供されます。 詳細については、無料の証明書を使用したカスタム ドメインの設定に関する記事を参照してください。

構成ファイルの responseOverrides セクションを使用して、カスタム エラー ページを構成できます。

Azure Static Web Apps はグローバル サービスです。 アプリの静的アセットはグローバルに分散されます。 アプリを作成するときに、マネージド Azure Functions アプリがデプロイされているリージョンを選択します。 マネージド関数をサポートしていないリージョンで Functions アプリが必要な場合は、個別にデプロイする Functions アプリで独自の Functions アプリの持ち込み機能を使用できます。

Azure Static Web Apps では、アプリの静的アセットがグローバルに分散されます。 グローバル展開を最大限に活用する場合や高度な機能が必要な場合は、専用のコンテンツ配信ネットワーク (CDN) または Azure Application Gateway を追加できます。

特定の CDN へのトラフィックを制限するには、定義済みのシークレット値を含むヘッダーをすべての要求に追加するように CDN を構成し、そのヘッダーを要求するように Static Web Apps を構成します。 Azure Application Gateway へのトラフィックを制限するには、その Application Gateway の IP からのトラフィックのみを許可するようにアプリを構成します。

また、CDN または Application Gateway のホスト名の転送を許可するようにアプリを構成します。

Azure Front Door の構成については、このチュートリアルを参照してください。

.html、.css、.js など、一般的なテキスト形式のファイル拡張子を持つアセットの場合、Azure Static Web Apps では、クライアントがサポートしていれば、静的アセットの Gzip または Brotli 圧縮バージョンが自動的に提供されます。

他のファイルの種類の場合、Static Web Apps を使用すると、.br 拡張子が付けられた Brotli 圧縮バージョンのファイルを含めることができます。 たとえば、app.wasm という名前の圧縮されていないファイルがある場合、app.wasm.br という名前の圧縮バージョンをアプリに追加できます。 このバージョンは、Brotli をサポートするクライアントが app.wasm を要求すると自動的に提供されます。

React、Angular、Blazor WebAssembly などのほとんどのフロントエンド フレームワークでは、クライアント側ルーティングを使用してナビゲーションを処理します。 クライアント側ルートは、ブラウザーで実行されているアプリにのみ認識されます。 Static Web Apps からクライアント側ルートを要求した場合、そのルートはアプリのデプロイ済みアセットに存在しないため、404 エラーが返されます。 この問題を解決するには、アプリの構成ファイルにフォールバック ルートを追加します。

アプリに設定できる環境変数にはさまざまな種類があります。 アプリのビルド構成で、アプリのフロントエンド ビルド プロセスに影響を与える変数を構成します。 アプリの API で使用される変数を構成するには、アプリケーション設定を使用します。 詳細については、「構成の概要」を参照してください。

Static Web Apps ではマネージド ID がサポートされていますが、Key Vault からの認証シークレットの取得にのみ使用されます。

API でマネージド ID または Key Vault 参照が必要な場合は、独自の Functions アプリの持ち込み機能を使用して、マネージド ID を使用する別の Functions アプリを使用します。

Static Web Apps では、アプリにログインできるユーザーの数に制限はありません。 組み込みの招待システムを使用して、最大 25 人のユーザーにカスタム ロールを割り当てることができます。 さらに多くのユーザーにカスタム ロールを割り当てる必要がある場合は、API 関数を使用してプログラムでロールを割り当てることができます。

ロール管理に API 関数を使用すると、ユーザーのアクセス トークンと要求を取得できます。

Static Web Apps の組み込みの認証を使用する場合、ユーザーはサポートされている ID プロバイダーのいずれかを使用してログインできます。 ユーザーが特定の ID プロバイダーでログインできないようにしたい場合は、それをブロックできます。

カスタム認証を使用している場合は、1 つ以上の ID プロバイダーを構成できます。

Static Web Apps のマネージド関数アプリでは、Azure Functions でサポートされているすべての言語または言語バージョンがサポートされているわけではありません。 独自の Functions アプリの持ち込み機能を使用して、別の Functions アプリを静的 Web アプリにリンクすることができます。

Static Web Apps のマネージド関数アプリは API のシナリオに最適化されており、HTTP トリガーのみがサポートされています。 cron ジョブなどに対応する Azure Functions またはステートフル ワークフロー向けの Durable Functions でサポートされている他のトリガーの種類を使用する必要がある場合は、独自の Functions アプリの持ち込み機能を使用して、別の Functions アプリを静的 Web アプリにリンクすることができます。

Free プランには、グローバル分散、カスタム ドメイン、無料の TLS 証明書、マネージド API 関数など、Standard プランと同じ機能が多数含まれています。 ただし、より多くの帯域幅、サービス レベル アグリーメント (SLA)、または高度な機能が必要な場合は、Standard プランを検討してください。 詳細については、ホスティング プランに関する記事とクォータに関する記事を参照してください。

Free プランから Standard プランにいつでもアップグレードできます。 Standard プランを必要とする機能を使用していない場合は、Standard プランから Free プランにダウングレードすることもできます。

ほとんどのフロントエンド フレームワークでは、アプリをローカルで実行するための開発サーバーが提供されます。 ただし、認証や API 関数を使用する場合は、アプリを Azure にデプロイせずにアプリのすべての機能をテストするのは難しい可能性があります。 アプリをローカルで実行するには、Static Web Apps コマンド ライン インターフェイス (CLI) を使用します。これは、認証などのクラウド エクスペリエンスをエミュレートし、Azure Functions Core Tools と統合されて API 関数を実行します。 また、アプリを Azure にデプロイする際に使用できる Static Web Apps Visual Studio Code 拡張機能も用意されています。

サポートが必要な場合や提案がある場合は、Static Web Apps GitHub リポジトリでイシューを作成できます。

問題解決にサポートがすぐに必要な場合は、Azure サポートにお問い合わせください。