🦖
【Azure Static Web Apps】SPAのWebアプリケーションの最低限の構築
1. 記事の範囲
Azure Static Web AppsでSPAのWebアプリケーションを構築する際の、最低限の構成と課題を記載。
2. 背景
SPAのWebアプリケーションを作成する。機能としてファイルをアップロードが後に求められる。
3. 内容
構成
Azure Static Web Apps、APIにAzure Functionsを利用して、SPAのWebアプリケーションを構築。認証には Azure Active Directory B2Cを利用するため、SWAの作成後に、テナントにて「アプリケーション」「ユーザーフロー」を設定し、SWAの環境変数とstaticwebapp.config.jsonに値を設定した。
| 項目 | 詳細 | 参照 |
|---|---|---|
| フレームワーク | React | Reactアプリ |
| API | Azure Functionsを利用したAPIサポート | APIバックエンド |
| ドメイン | 外部で取得したドメインを指定 | カスタムドメインの設定 |
| DB | Azure Database for MySQL | DB接続 |
| 認証 | Azure Active Directory B2C | カスタム認証 |
| 検証環境 | SWAのブランチプレビュー環境を作成 | プレビュー環境 |
課題
ブラウザからファイルを選択しAzure Blob Strageに格納する「ファイルアップロード機能」を用意した。リクエストのサイズが30MBを超えている場合、SWAはステータスコード413を返してしまった。リクエスト エンティティが大きすぎるとの事で、リクエストサイズの上限が30Mであることを知った。数GBのコンテンツを扱いたいため、結果的にStatic Web Appsをやめ、React + .NET Coreに技術を選定した。
Discussion