Static Web App の使い方

Transcript

1. Static Web Apps の使い⽅ (c) 2023 uraniwai
2. Static Web App とは • 2020 年 5 ⽉に発表された静的な Web サイト向け App Service の ホスティング⽅法の⼀種 • Hugo や Jekyll, Hexo などの静的サイトのジェネレータだけでなく React や Vue, Angular といったシングル・ページ・アプリケーショ ン(SPA)のホスティングを想定 • Azure Functions を Static Web Apps 内部でマネージすることもで き、また、外部の API へルーティングすることもできる • デプロイ⽅法として CI/CD パイプラインが前提 (c) 2023 uraniwai App Service で使⽤できる Static Web Apps シングル ページ ホスティング オプションのプレビューの開始 https://azure.microsoft.com/ja-jp/updates/static-web-apps-single-page-hosting-option-available-in-app-service-now-in-preview/
3. Static Web Apps の主な機能 • コンテンツ配信 • GitHub Actions や Azure Pipelines など CI/CD パイプライン からデプロイ • 単に静的サイトとしてホスティング するだけでなく App Service の EasyAuth などの機能が利⽤できる • リバースプロキシ • 特定のパス配下 (例えば /api) のリ クエストをバックエンドへ転送 • 静的サイトと同じ FQDN になるた め、 CORS の設定が不要 (c) 2023 uraniwai
4. Static Web Apps へのコンテンツのデプロイ⽅法 • Static Web Apps では GitHub や Azure DevOps との接続が必須 • 現在、提供しているデプロイ⽅法は３種類 • Visual Studio Code の拡張機能でデプロイ • Azure ポータルでデプロイ • Azure CLI でデプロイ • デプロイ時に設定する内容 • リソースグループ • リソース名 • 課⾦レベル • リージョン (組み込み Functions) • リポジトリの情報 (c) 2023 uraniwai
5. Static Web Apps へのコンテンツのデプロイ⼿順 (c) 2023 uraniwai Azure ポータル Azure CLI Visual Studio Code # 1. Azure にログイン $ az login # 2. リソースグループ作成 $ az group create --name my-swa-group --location ”japaneast” # 3. Static Web App 作成 $ az staticwebapp create --name my-first- static-web-app --resource-group my-swa- group --source “https://github.com/$GITHUB_USER_NAME/ my-first-static-web-app” --location “japaneast" --branch main --app-location "src" --login-with-github # 4. URL の取得 $ az staticwebapp show --name my-first- static-web-app --query "defaultHostname" 1. VSCode で「Azure Static Web Apps」拡張 機能をインストール 2. Azure メニューを選択してログイン 3. Static Web App を右クリックして「Create New Static Web App」を選択 4. 「The extension 'Azure Static Web Apps' wants to sign in using GitHub.」と表⽰され るので「allow」を選択 5. ブラウザが開きアクセス権を要求されるので 「Confirm」を選択 6. VSCode に戻って必要な項⽬を⼊⼒しt実⾏
6. GitHub Actions のパイプライン (React 向け) • Static Web Apps へ設置 • Azure/static-web-apps- deploy モジュールを利⽤ • フロントエンドや組み込み Function のパスを指定して 設置元を伝える • ビルド処理はパイプライン に記述せず package.json 内に記述 (c) 2023 uraniwai ・・・ 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.STATIC_WEB_APPS_API_TOKEN }} repo_token: ${{ secrets.GITHUB_TOKEN }} action: 'upload’ app_location: '/’ api_location: ’’ output_location: 'build’ production_branch: 'master’ env: SKIP_DEPLOY_ON_MISSING_SECRETS: true ・・・ パラメータ名 役割 例 app_location リポジトリ内のフロントエンドアプリのパス “/” api_location リポジトリ内の組み込み Functions のパス “/api” output_location フロントエンドアプリのビルド出⼒パス “build” production_branch リポジトリの対象ブランチ “master”
7. その他 (c) 2023 uraniwai
8. プランと価格 (c) 2023 uraniwai Free Standard 料⾦ $0 $9/month (730h) 帯域幅 100GB / Subscription 100GB / Subscription 帯域幅の超過 不可 $0.20/GB/Subscription カスタムドメイン 2 / app 5 / app SSL 証明書 無料 無料 サービス定義認証 可能 可能 カスタム認証 不可 可能 ストレージ容量 (アプリ全体) 0.50GB 2.00GB ストレージ容量 (デプロイ単位) 0.25GB 0.50GB API ホスティング 組み込み Functions のみ 独⾃ Functions や 他の Azure サービスも可能 エンタープライズグレードエッジ 不可 $17.52/month/app データベース接続 無料※GA後に課⾦の可能性あり 無料※GA後に課⾦の可能性あり SLA 設定なし 99.95%
9. リファレンスアーキテクチャ (外部向け Web サイト) • アプリケーションの構成 • SPA で構築された Web サイトは Static Web Apps に GitHub からデプロイ • API からデータやファイルを取得する際、 API Management を経由して Function にアクセス • ログ情報は Monitor で⼀元的に収集 (c) 2023 uraniwai サービス名 概要 Static Web Apps SPA (例: React) API Management API をホスティングするサービス Functions API の処理の実体 Cosmos DB NoSQL データベース Blob Storage ファイル Monitor ログの収集 GitHub ソースコード管理とデプロイの実⾏環境
10. (c) 2023 uraniwai