{"id":22725652,"url":"https://github.com/maremare/try-deploy-blazor-wasm-app","last_synced_at":"2025-07-22T16:07:11.088Z","repository":{"id":60703385,"uuid":"299476308","full_name":"MareMare/try-deploy-blazor-wasm-app","owner":"MareMare","description":"🧪📝 Blazor wasm アプリを Azure static web apps, GitHub Pages, Cloudflare Pages へデプロイしてみます。","archived":false,"fork":false,"pushed_at":"2025-07-10T15:02:10.000Z","size":8937,"stargazers_count":4,"open_issues_count":2,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-10T21:23:22.818Z","etag":null,"topics":["azure-static-web-apps","blazor-webassembly","cloudflare-pages","csharp","github-pages"],"latest_commit_sha":null,"homepage":"https://brave-stone-0645cc000.2.azurestaticapps.net","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MareMare.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2020-09-29T01:47:15.000Z","updated_at":"2025-07-10T14:58:29.000Z","dependencies_parsed_at":"2024-03-12T18:29:29.554Z","dependency_job_id":"e82fdb03-3436-4c10-b7f8-86457ac1a327","html_url":"https://github.com/MareMare/try-deploy-blazor-wasm-app","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/MareMare/try-deploy-blazor-wasm-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MareMare%2Ftry-deploy-blazor-wasm-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MareMare%2Ftry-deploy-blazor-wasm-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MareMare%2Ftry-deploy-blazor-wasm-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MareMare%2Ftry-deploy-blazor-wasm-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MareMare","download_url":"https://codeload.github.com/MareMare/try-deploy-blazor-wasm-app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MareMare%2Ftry-deploy-blazor-wasm-app/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266525053,"owners_count":23942866,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-22T02:00:09.085Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["azure-static-web-apps","blazor-webassembly","cloudflare-pages","csharp","github-pages"],"created_at":"2024-12-10T16:13:27.573Z","updated_at":"2025-07-22T16:07:11.065Z","avatar_url":"https://github.com/MareMare.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# try-deploy-blazor-wasm-app\nBlazor wasm アプリを次のホスティングサービスへデプロイしてみます。\n* Azure static web apps\n* GitHub Pages\n* Cloudflare Pages\n\n![Azure Static Web Apps CI/CD](https://github.com/MareMare/try-deploy-blazor-wasm-app/workflows/Azure%20Static%20Web%20Apps%20CI/CD/badge.svg?branch=main)\n[![GitHub Pages CI/CD](https://github.com/MareMare/try-deploy-blazor-wasm-app/actions/workflows/deploy-to-ghpages.yml/badge.svg?branch=main)](https://github.com/MareMare/try-deploy-blazor-wasm-app/actions/workflows/deploy-to-ghpages.yml)\n\n## 実際にデプロイしたサイト\n\n* [Azure Static Web Apps (https://brave-stone-0645cc000.2.azurestaticapps.net/)](https://brave-stone-0645cc000.2.azurestaticapps.net/)\n* [GitHub Pages (https://maremare.github.io/try-deploy-blazor-wasm-app/)](https://maremare.github.io/try-deploy-blazor-wasm-app/)\n* [Cloudflare Pages (https://try-deploy-blazor-wasm-app.pages.dev/)](https://try-deploy-blazor-wasm-app.pages.dev/)\n\n## 前提条件\n\n* Azure アカウント\n* GitHub アカウント\n* Cloudflare アカウント\n\n## アプリケーションの作成\n\nサクッと `dotnet` CLI で作ります。ついでなのでソリューションも追加しビルドしておきます。\n\n```ps\nmkdir TryAzureStaticBlazorApp; cd TryAzureStaticBlazorApp\ndotnet new blazorwasm\ncd ..\ndotnet new sln\ndotnet sln add TryAzureStaticBlazorApp\ndotnet build\n```\n\n### VSCode の準備\n\n`launch.json` と `tasks.json` の各ファイルを準備します。\n\n\u003e アプリケーションを作成したら、一度VSCodeを再起動すると次のメッセージが表示されるので「Yes」を選択すると、VSCodeの環境設定ファイルが用意されるので捗ります。\n\u003e \n\u003e ![01](images/01.png)\n\nただ VSCode では、既定のブラウザが Chrome であるので、Edge で Blazor WebAssembly アプリを起動してデバッグするには、以下のように `browser` に `edge` を指定します。\n\n* `launch.json`\n\n```json\n{\n    // Use IntelliSense to find out which attributes exist for C# debugging\n    // Use hover for the description of the existing attributes\n    // For further information visit https://github.com/OmniSharp/omnisharp-vscode/blob/master/debugger-launchjson.md\n    \"version\": \"0.2.0\",\n    \"configurations\": [\n        {\n            \"name\": \"Launch and Debug Standalone Blazor WebAssembly App\",\n            \"type\": \"blazorwasm\",\n            \"request\": \"launch\",\n            \"cwd\": \"${workspaceFolder}/TryAzureStaticBlazorApp\",\n            // \"hosted\": true,\n            // \"program\": \"${workspaceFolder}/TryAzureStaticBlazorApp/bin/Debug/netstandard2.1/TryAzureStaticBlazorApp.dll\",\n            \"browser\": \"edge\"\n        }\n    ]\n}\n```\n\n## Azure Static Web Apps の作成\n\n1. 静的 Web アプリの作成\n\n    [Azure portal](https://portal.azure.com/) へサインインして「静的 Web アプリの作成(プレビュー)」を作成します。\n\n    ![02](images/02.png)\n\n    ここでは次を設定し「確認および作成」をクリックします。\n\n    |項目|設定値|備考|\n    |---|---|---|\n    |サブスクリプション|無料試用版|\n    |リソースグループ|(新規) TryAzureStaticBlazorApp_group|\n    |名前|TryAzureStaticBlazorApp|\n    |地域|East Asia|\n    |SKU|Free|\n    |GitHubアカウント|自分のGitHubアカウント|\n    |組織|自分の組織|\n    |リポジトリ|try-azure-static-blazor-app|\n    |分岐|master|\n    |ビルドのプリセット|Blazor|\n    |アプリの場所|Client|\n    |APIの場所|Api|\n    |アプリの成果物の場所|wwwroot|\n\n    作成後にリポジトリの名前を変更しても追従してくれるみたい。\n    \n2. 静的 Web アプリの設定内容の確認\n\n    ![03](images/03.png)\n\n    とりあえず「作成」をクリックすると、デプロイが開始されるのでしばらく待ちます。\n\n3. 静的 Web アプリのデプロイ\n    \n    デプロイ完了した後でリソースへ移動します。\n\n    ![04](images/04.png)\n\n    \u003e Azure 静的 Web アプリをご利用いただき、ありがとうございます。サイトのコンテンツをまだ受け取っていません。ここをクリックして、GitHub アクション実行の状態をご確認ください。\n\n    上記のメッセージが表示されている場合、GitHub アクションが実行されていない、または失敗しているので、GitHub のリポジトリで確認します。\n\n4. GitHub アクションの修正と実行\n\n    GitHub リポジトリを Azure Static Web Apps にリンクすると、そのリポジトリに GitHub アクションのワークフローファイルが追加されます。\n    既定では次のファイルが追加されています。\n\n    * `.github/workflows/azure-static-web-apps-\u003cRANDOM_NAME\u003e.yml`\n    \n        ```yml\n        name: Azure Static Web Apps CI/CD\n\n        on:\n          push:\n            branches:\n              - main\n          pull_request:\n            types: [opened, synchronize, reopened, closed]\n            branches:\n              - main\n\n        jobs:\n          build_and_deploy_job:\n            if: github.event_name == 'push' || (github.event_name == 'pull_request' \u0026\u0026 github.event.action != 'closed')\n            runs-on: ubuntu-latest\n            name: Build and Deploy Job\n            steps:\n              - uses: actions/checkout@v2\n                with:\n                  submodules: true\n              - name: Build And Deploy\n                id: builddeploy\n                uses: Azure/static-web-apps-deploy@v1\n                with:\n                  azure_static_web_apps_api_token: ${{ secrets.  AZURE_STATIC_WEB_APPS_API_TOKEN_BRAVE_STONE_0645CC000 }}\n                  repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)\n                  action: \"upload\"\n                  ###### Repository/Build Configurations - These values can be configured to match your app   requirements. ######\n                  # For more information regarding Static Web App workflow configurations, please visit: https://aka.  ms/swaworkflowconfig\n                  app_location: \"/TryAzureStaticBlazorApp\" # App source code path\n                  api_location: \"Api\" # Api source code path - optional\n                  output_location: \"wwwroot\" # Built app content directory - optional\n                  ###### End of Repository/Build Configurations ######\n\n        close_pull_request_job:\n            if: github.event_name == 'pull_request' \u0026\u0026 github.event.action == 'closed'\n            runs-on: ubuntu-latest\n            name: Close Pull Request Job\n            steps:\n              - name: Close Pull Request\n                id: closepullrequest\n                uses: Azure/static-web-apps-deploy@v1\n                with:\n                  azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_BRAVE_STONE_0645CC000 }}\n                  action: \"close\"\n        ```\n    \n    今回の環境用に `Build And Deploy` の設定を次のように変更してコミットします。\n\n    |項目|修正前|修正後|\n    |---|---|---|\n    |app_location|\"Client\"|\"/TryAzureStaticBlazorApp\"|\n    |api_location|\"Api\"|\"Api\"|\n    |app_artifact_location|\"wwwroot\"|\"wwwroot\"|\n\n    ```yml\n    ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######\n    # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig\n    app_location: \"/TryAzureStaticBlazorApp\" # App source code path\n    api_location: \"Api\" # Api source code path - optional\n    output_location: \"wwwroot\" # Built app content directory - optional\n    ###### End of Repository/Build Configurations ######\n    ```\n\n    コミットすると自動で GitHub アクションが実行されるのでしばらく待ちます。\n\n    ![05](images/05.png)\n\n5. 動作確認\n\n    GitHub アクション実行に成功すると、静的 Web アプリの概要は次のようになります。\n\n    ![06](images/06.png)\n\n    ここで「URL」または「参照」をクリックすると、デプロイされた Web アプリが次のように表示されます。\n\n    ![07](images/07.png)\n\n## GitHub Pages へのデプロイ準備\n\nGitHub Pages へ発行するには次の調整が必要になるらしい。\n* `.nojekyll` ファイルの追加\n* `.gitattribute` ファイルの調整\n* `index.html` などに含まれるベースURLの変更\n* `404.html` の追加\n\nこの煩わしい調整を\n[NuGet Gallery \\| PublishSPAforGitHubPages\\.Build](https://www.nuget.org/packages/PublishSPAforGitHubPages.Build/#readme-body-tab) という素晴らしいパッケージを利用すると自動化してくれる。\n\n使い方は次の通り：\n1. `PublishSPAforGitHubPages.Build` Nuget パッケージ参照を追加\n2. GitHub Actions でワークフローで `GHPages` MSBuild プロパティを指定して発行\n\n    `gh-pages` ブランチへ発行\n\n3. GitHub Pages の設定\n\n    ![](images/08.png)\n\nその他：\n* ベースURLを自分で指定したい\n  * `GHPagesBase` MSBuild プロパティで指定できるらしい\n    \u003e If you want to specify the base URL by yourself, you can do it by setting the base URL to MSBuild property explicitly.\n  * `-p:GHPages=true -p:GHPagesBase=\"/ベースURL/\"`\n* favicon\n  * `index.html` で `\u003clink href=\"favicon.ico\" rel=\"icon\" /\u003e` を指定\n\n## GitHub Pages へのデプロイ\n\n[peaceiris/actions\\-gh\\-pages: GitHub Actions for GitHub Pages 🚀 Deploy static files and publish your site easily\\. Static\\-Site\\-Generators\\-friendly\\.](https://github.com/peaceiris/actions-gh-pages)\n\n発行された `gh-pages` ブランチから GitHub Pages へデプロイしてくれるアクションを使用。\n\n* CNAME を指定したい\n\n    [⭐️ Add CNAME file cname](https://github.com/peaceiris/actions-gh-pages#%EF%B8%8F-add-cname-file-cname)\n    ```yml\n    - name: Deploy\n      uses: peaceiris/actions-gh-pages@v3\n      with:\n        github_token: ${{ secrets.GITHUB_TOKEN }}\n        publish_dir: ./public\n        cname: github.com  // 👈 これ\n    ```\n\nワークフローの例：\n```yml\nname: GitHub Pages CI/CD\n\non:\n  push:\n    branches:\n      - main\n  pull_request:\n    branches:\n      - main\n\nenv:\n  CONFIGURATION: Release\n  DOTNET_VERSION: 8.0.x\n  WORKING_DIRECTORY: TryAzureStaticBlazorApp\n\njobs:\n  build-and-deploy:\n    runs-on: ubuntu-latest\n    steps:\n    - name: 🛒 Checkout\n      uses: actions/checkout@v4.1.1\n    - name: ✨ Setup .NET\n      uses: actions/setup-dotnet@v4\n      with:\n        dotnet-version: ${{ env.DOTNET_VERSION }}\n    - name: ⚙️ Install wasm-tools\n      run: dotnet workload install wasm-tools\n    - name: 🚚 Restore\n      run: dotnet restore \"${{ env.WORKING_DIRECTORY }}\"\n    - name: 🛠️ Build\n      run: dotnet build \"${{ env.WORKING_DIRECTORY }}\" --configuration ${{ env.CONFIGURATION }} --no-restore\n    - name: 📦 Publish\n      run: dotnet publish \"${{ env.WORKING_DIRECTORY }}\" --configuration ${{ env.CONFIGURATION }} --no-build -p:GHPages=true -p:GHPagesBase=\"/try-deploy-blazor-wasm-app/\" --output publish\n    - name: 🚀 Deploy to GitHub Pages\n      uses: peaceiris/actions-gh-pages@v3\n      with:\n        github_token: ${{ secrets.GITHUB_TOKEN }}\n        publish_dir: publish/wwwroot\n        force_orphan: true\n```\n\n## Cloudflare Pages\n[Deploy a Blazor Site · Cloudflare Pages docs](https://developers.cloudflare.com/pages/framework-guides/deploy-a-blazor-site/#creating-the-build-script)\ndeploy\n\u003cdetails\u003e\n\u003csummary\u003e詳細：\u003c/summary\u003e\n\n![](images/cloudflare-pages-config.png)\n\n\u003c/details\u003e\n\n* ビルドの構成\n  * ビルドコマンド\n    ```sh\n    curl -sSL https://dot.net/v1/dotnet-install.sh \u003e dotnet-install.sh;\n    chmod +x dotnet-install.sh;\n    ./dotnet-install.sh -c 8.0 -InstallDir ./dotnet8;\n    ./dotnet8/dotnet --version;\n    ./dotnet8/dotnet workload install wasm-tools;\n    ./dotnet8/dotnet publish \"TryAzureStaticBlazorApp\" -c Release -o output;\n    ```\n  * ビルド出力ディレクトリ\n    ```sh\n    /output/wwwroot\n    ```\n\n## Run Blazor Web Assembly locally\n* [natemcmaster/dotnet\\-serve: Simple command\\-line HTTPS server for the \\.NET Core CLI](https://github.com/natemcmaster/dotnet-serve)\n  ```ps1\n  dotnet publish TryAzureStaticBlazorApp -c release -o publish\n  dotnet serve -o -S -p:7014 -b -d:publish/wwwroot\n  ```\n\n## 参考サイト\n* [チュートリアル:Azure Static Web Apps での Blazor を使用した静的 Web アプリのビルド \\| Microsoft Docs](https://docs.microsoft.com/ja-jp/azure/static-web-apps/deploy-blazor?WT.mc_id=-blog-scottha)\n* [Azure Static Web Apps with \\.NET and Blazor \\| ASP\\.NET Blog](https://devblogs.microsoft.com/aspnet/azure-static-web-apps-with-blazor/)\n* [Blazor WebAssembly を触ってみる \\- その②デバッグしてみる \\- Qiita](https://qiita.com/chyonek/items/ef76e97d18904053fcf6)\n* [ASP\\.NET Core Blazor WebAssembly をデバッグする \\| Microsoft Docs](https://docs.microsoft.com/ja-jp/aspnet/core/blazor/debug?view=aspnetcore-3.1\u0026tabs=visual-studio-code)\n* [Azure Static Web Apps の GitHub Actions ワークフロー \\| Microsoft Docs](https://docs.microsoft.com/ja-jp/azure/static-web-apps/github-actions-workflow#build-and-deploy)\n* [Blazor WASM Publishing to GitHub Pages \\- I ❤️ DotNet](https://ilovedotnet.org/blogs/blazor-wasm-publishing-to-github-pages/)\n* [jsakamoto/PublishSPAforGitHubPages\\.Build: The NuGet package that provides post published processing to deploy the ASP\\.NET Core SPA project \\(such as Blazor WebAssembly\\) as a GitHub pages site\\.](https://github.com/jsakamoto/PublishSPAforGitHubPages.Build)\n* [Deploy a Blazor Site · Cloudflare Pages docs](https://developers.cloudflare.com/pages/framework-guides/deploy-a-blazor-site/#creating-the-build-script)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaremare%2Ftry-deploy-blazor-wasm-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaremare%2Ftry-deploy-blazor-wasm-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaremare%2Ftry-deploy-blazor-wasm-app/lists"}