Azure Static Web Apps に Blazor WebAssembly を配置する

先日のMicrosoft BuildでApp ServiceStatic Web Appsという静的Webサイト（+ Azure Functions）をホスティングできるサービスのプレビューが発表された。

azure.microsoft.com

SPA向けに構成されている性質上、チュートリアルはJavaScriptのフレームワーク（Next.jsとNuxt.js）向けに作られている。

しかし、同じBuildでBlazor WebAssemblyのGAも発表された。

であるなら、これをホスティングしたくなるのが人情だ。

という訳でデプロイを試してみた。

Static Web Appsデプロイのステップ（Azure/static-web-apps-deploy）前にデプロイ対象をビルドしておき、それを配置するように指定すればデプロイされた。やったね。BlazorもStatic Web Appsできるぜ！　はやくチュートリアルに載せてくれ！！！

ワークフロー 抜粋。

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
    - uses: actions/checkout@v1
    - name: Set up .NET Core
      uses: actions/setup-dotnet@v1
      with:
        dotnet-version: '3.1.100'
    - name: Build Blazor Application
      run: dotnet publish -c Release ./BlazorAppSandbox/bazor-app-sandbox.csproj
    - name: Build And Deploy
      id: builddeploy
      uses: Azure/static-web-apps-deploy@v0.0.1-preview
      with:
        azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_BRAVE_ISLAND_0D044B21E }}
        repo_token: ${{ secrets.GITHUB_TOKEN }} 
        action: 'upload'
        app_location: 'BlazorAppSandbox/bin/Release/netstandard2.1/publish/bazor-app-sandbox/dist' # App source code path
        #api_location: 'api' # Api source code path - optional
        #app_artifact_location: '' # Built app content directory - optional

デプロイ先：https://brave-island-0d044b21e.azurestaticapps.net/

ダイナミックルート（404ページをいい感じにSPAするやつ）は設定していない（そもそもできるのか知らない）のでルート以外へのアクセスは404する状態だし、そもそも手元にあったデプロイできそうなBlazorのプロジェクトはプレビュー版なのでGAした版をデプロイしたわけではない。

本当にとりあえずデプロイしただけ！　しかし、今後に期待できる結果で満足だ。

GA前にはFunctionsのランタイムに.NETも頼む。

---

2020-07-26追記：

ダイナミックルート（404ページをいい感じにSPAするやつ）は設定していない（そもそもできるのか知らない）のでルート以外へのアクセスは404する状態だし、そもそも手元にあったデプロイできそうなBlazorのプロジェクトはプレビュー版なのでGAした版をデプロイしたわけではない。

これ、半端な状態だったので解消しておいた。

アプリはプレビュー版ママだけれど、Static Web Appsのルート設定をした。

docs.microsoft.com

さしあたってリソースが存在しなったパスへのアクセスに対して index.html を返却して、パスに応じた動作をクライアントサイドでさせるなら　routes.json にその旨の設定をするだけで期待通りの動きをしてくれた。

{
  "routes": [
    {
      "route": "/*",
      "serve": "/index.html"
    }
  ]
}

対応PR（他のコミットも混ざってるけれど） Staticwebapp update by 7474 · Pull Request #58 · 7474/bazor-app-sandbox · GitHub