Skip to content
/ try-deploy-blazor-wasm-app Public

🧪📝 Blazor wasm アプリを Azure static web apps, GitHub Pages, Cloudflare Pages へデプロイしてみます。

brave-stone-0645cc000.2.azurestaticapps.net

License

MIT license
4 stars 1 fork Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

MareMare/try-deploy-blazor-wasm-app

BranchesTags

Repository files navigation

try-deploy-blazor-wasm-app

Blazor wasm アプリを次のホスティングサービスへデプロイしてみます。

  • Azure static web apps
  • GitHub Pages
  • Cloudflare Pages

Azure Static Web Apps CI/CD GitHub Pages CI/CD

実際にデプロイしたサイト

前提条件

  • Azure アカウント
  • GitHub アカウント
  • Cloudflare アカウント

アプリケーションの作成

サクッと dotnet CLI で作ります。ついでなのでソリューションも追加しビルドしておきます。

mkdir TryAzureStaticBlazorApp; cd TryAzureStaticBlazorApp
dotnet new blazorwasm
cd ..
dotnet new sln
dotnet sln add TryAzureStaticBlazorApp
dotnet build

VSCode の準備

launch.json と tasks.json の各ファイルを準備します。

アプリケーションを作成したら、一度VSCodeを再起動すると次のメッセージが表示されるので「Yes」を選択すると、VSCodeの環境設定ファイルが用意されるので捗ります。

01

ただ VSCode では、既定のブラウザが Chrome であるので、Edge で Blazor WebAssembly アプリを起動してデバッグするには、以下のように browser に edge を指定します。

  • launch.json
{
    // Use IntelliSense to find out which attributes exist for C# debugging
    // Use hover for the description of the existing attributes
    // For further information visit https://github.com/OmniSharp/omnisharp-vscode/blob/master/debugger-launchjson.md
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch and Debug Standalone Blazor WebAssembly App",
            "type": "blazorwasm",
            "request": "launch",
            "cwd": "${workspaceFolder}/TryAzureStaticBlazorApp",
            // "hosted": true,
            // "program": "${workspaceFolder}/TryAzureStaticBlazorApp/bin/Debug/netstandard2.1/TryAzureStaticBlazorApp.dll",
            "browser": "edge"
        }
    ]
}

Azure Static Web Apps の作成

  1. 静的 Web アプリの作成

    Azure portal へサインインして「静的 Web アプリの作成(プレビュー)」を作成します。

    02

    ここでは次を設定し「確認および作成」をクリックします。

    項目 設定値 備考
    サブスクリプション 無料試用版
    リソースグループ (新規) TryAzureStaticBlazorApp_group
    名前 TryAzureStaticBlazorApp
    地域 East Asia
    SKU Free
    GitHubアカウント 自分のGitHubアカウント
    組織 自分の組織
    リポジトリ try-azure-static-blazor-app
    分岐 master
    ビルドのプリセット Blazor
    アプリの場所 Client
    APIの場所 Api
    アプリの成果物の場所 wwwroot

    作成後にリポジトリの名前を変更しても追従してくれるみたい。

  2. 静的 Web アプリの設定内容の確認

    03

    とりあえず「作成」をクリックすると、デプロイが開始されるのでしばらく待ちます。

  3. 静的 Web アプリのデプロイ

    デプロイ完了した後でリソースへ移動します。

    04

    Azure 静的 Web アプリをご利用いただき、ありがとうございます。サイトのコンテンツをまだ受け取っていません。ここをクリックして、GitHub アクション実行の状態をご確認ください。

    上記のメッセージが表示されている場合、GitHub アクションが実行されていない、または失敗しているので、GitHub のリポジトリで確認します。

  4. GitHub アクションの修正と実行

    GitHub リポジトリを Azure Static Web Apps にリンクすると、そのリポジトリに GitHub アクションのワークフローファイルが追加されます。 既定では次のファイルが追加されています。

    • .github/workflows/azure-static-web-apps-<RANDOM_NAME>.yml

      name: Azure Static Web Apps CI/CD

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

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@v2
        with:
          submodules: true
      - 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_BRAVE_STONE_0645CC000 }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match your app   requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.  ms/swaworkflowconfig
          app_location: "/TryAzureStaticBlazorApp" # App source code path
          api_location: "Api" # Api source code path - optional
          output_location: "wwwroot" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######

close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_BRAVE_STONE_0645CC000 }}
          action: "close"

    今回の環境用に Build And Deploy の設定を次のように変更してコミットします。

    項目 修正前 修正後
    app_location "Client" "/TryAzureStaticBlazorApp"
    api_location "Api" "Api"
    app_artifact_location "wwwroot" "wwwroot" 
    ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
app_location: "/TryAzureStaticBlazorApp" # App source code path
api_location: "Api" # Api source code path - optional
output_location: "wwwroot" # Built app content directory - optional
###### End of Repository/Build Configurations ######

    コミットすると自動で GitHub アクションが実行されるのでしばらく待ちます。

    05

  5. 動作確認

    GitHub アクション実行に成功すると、静的 Web アプリの概要は次のようになります。

    06

    ここで「URL」または「参照」をクリックすると、デプロイされた Web アプリが次のように表示されます。

    07

GitHub Pages へのデプロイ準備

GitHub Pages へ発行するには次の調整が必要になるらしい。

  • .nojekyll ファイルの追加
  • .gitattribute ファイルの調整
  • index.html などに含まれるベースURLの変更
  • 404.html の追加

この煩わしい調整を NuGet Gallery | PublishSPAforGitHubPages.Build という素晴らしいパッケージを利用すると自動化してくれる。

使い方は次の通り：

  1. PublishSPAforGitHubPages.Build Nuget パッケージ参照を追加

  2. GitHub Actions でワークフローで GHPages MSBuild プロパティを指定して発行

    gh-pages ブランチへ発行

  3. GitHub Pages の設定

その他：

  • ベースURLを自分で指定したい
    • GHPagesBase MSBuild プロパティで指定できるらしい

      If you want to specify the base URL by yourself, you can do it by setting the base URL to MSBuild property explicitly.

    • -p:GHPages=true -p:GHPagesBase="/ベースURL/"
  • favicon
    • index.html で <link href="favicon.ico" rel="icon" /> を指定

GitHub Pages へのデプロイ

peaceiris/actions-gh-pages: GitHub Actions for GitHub Pages 🚀 Deploy static files and publish your site easily. Static-Site-Generators-friendly.

発行された gh-pages ブランチから GitHub Pages へデプロイしてくれるアクションを使用。

  • CNAME を指定したい

    ⭐️ Add CNAME file cname

    - name: Deploy
  uses: peaceiris/actions-gh-pages@v3
  with:
    github_token: ${{ secrets.GITHUB_TOKEN }}
    publish_dir: ./public
    cname: github.com  // 👈 これ

ワークフローの例：

name: GitHub Pages CI/CD

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

env:
  CONFIGURATION: Release
  DOTNET_VERSION: 8.0.x
  WORKING_DIRECTORY: TryAzureStaticBlazorApp

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    - name: 🛒 Checkout
      uses: actions/[email protected]
    - name: ✨ Setup .NET
      uses: actions/setup-dotnet@v4
      with:
        dotnet-version: ${{ env.DOTNET_VERSION }}
    - name: ⚙️ Install wasm-tools
      run: dotnet workload install wasm-tools
    - name: 🚚 Restore
      run: dotnet restore "${{ env.WORKING_DIRECTORY }}"
    - name: 🛠️ Build
      run: dotnet build "${{ env.WORKING_DIRECTORY }}" --configuration ${{ env.CONFIGURATION }} --no-restore
    - name: 📦 Publish
      run: dotnet publish "${{ env.WORKING_DIRECTORY }}" --configuration ${{ env.CONFIGURATION }} --no-build -p:GHPages=true -p:GHPagesBase="/try-deploy-blazor-wasm-app/" --output publish
    - name: 🚀 Deploy to GitHub Pages
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_dir: publish/wwwroot
        force_orphan: true

Cloudflare Pages

Deploy a Blazor Site · Cloudflare Pages docs deploy

詳細：

  • ビルドの構成
    • ビルドコマンド 
      curl -sSL https://dot.net/v1/dotnet-install.sh > dotnet-install.sh;
chmod +x dotnet-install.sh;
./dotnet-install.sh -c 8.0 -InstallDir ./dotnet8;
./dotnet8/dotnet --version;
./dotnet8/dotnet workload install wasm-tools;
./dotnet8/dotnet publish "TryAzureStaticBlazorApp" -c Release -o output;
    • ビルド出力ディレクトリ 
      /output/wwwroot

Run Blazor Web Assembly locally

参考サイト

About

🧪📝 Blazor wasm アプリを Azure static web apps, GitHub Pages, Cloudflare Pages へデプロイしてみます。

brave-stone-0645cc000.2.azurestaticapps.net

Topics

github-pages csharp blazor-webassembly azure-static-web-apps cloudflare-pages

Resources

Readme

License

MIT license
Activity

Stars

4 stars

Watchers

3 watching

Forks

1 fork
Report repository

Releases

No releases published

Packages

No packages published

Contributors 3

  •  
  •  
  •  

Languages