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

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

82 Commits

.devcontainer

.devcontainer

 
 

.github

.github

 
 

.vscode

.vscode

 
 

TryAzureStaticBlazorApp

TryAzureStaticBlazorApp

 
 

images

images

 
 

.gitignore

.gitignore

 
 

LICENSE

LICENSE

 
 

README.md

README.md

 
 

renovate.json

renovate.json

 
 

try-azure-static-blazor-app.pdf

try-azure-static-blazor-app.pdf

 
 

try-azure-static-blazor-app.sln

try-azure-static-blazor-app.sln

 
 

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