blazor_webassembly_on_cloudflare_pages.md (9249B)
1 --- 2 title: Blazor WebAssembly on Cloudflare Pages 3 tags: 4 - csharp 5 - blazor 6 - cloudflarepages 7 private: false 8 updated_at: 2025-07-28 01:06 9 id: null 10 organization_url_name: null 11 slide: false 12 --- 13 # TL;DL 14 [リポジトリ](https://github.com/minerva-jupiter/webtools-mj) 15 ビルド設定は 16 17 |key|value| 18 |-|-| 19 |ビルドコマンド|chmod +x build.sh && ./build.sh| 20 |ビルド出力|output/wwwroot| 21 22 /build.sh 23 ```sh 24 #!/bin/sh 25 curl -sSL https://dot.net/v1/dotnet-install.sh > dotnet-install.sh 26 chmod +x dotnet-install.sh 27 ./dotnet-install.sh -c 9.0 -InstallDir ./dotnet 28 ./dotnet/dotnet --version 29 ./dotnet/dotnet publish -c Release -o output 30 ``` 31 ## 参考 32 - [CloudflareのBlazor WebAssemblyドキュメント](https://developers.cloudflare.com/pages/framework-guides/deploy-a-blazor-site/) 33 - [Permission denied on build scriptへの回答](https://community.cloudflare.com/t/permission-denied-on-build-script/295840/3) 34 # 経緯 35 WASMを使ってランダムパスワードジェネレーターを作りたいなと思ったので、このプロジェクトが始まりました。最初はNext.js + WASM(Rust) on Cloudflareしようと思ってました。 36 `create next app`して、cloudflare pagesに入れたら`nodejs_compat`がいるよって言われた。 37 そこでworkersに入れようと思ったら、純粋なnext.jsとWASMの扱いが違ったので、cloudflareに適したWASMを含むセットアップを探してWranglerにたどり着いた。 38 ただ、WranglerがWindowsだとうまく動いてくれなかったので、断念。 39 Windowsのpowershellで動かすとWranglerが`C:\`みたいなパスはだめだからWSLで動かしてねって言われて、WSLで動かすと「そのファイルパスは許可してないからcmd.exeで実行するね。あとついでにファイルパスは標準の'C:\Windows\'以下だよ」って言われて、permissionエラー(当然)で、諦めて退散しました。(ここまで4日かかった) 40 ということで、私は諦めて、サークルの先輩が使ってたBlazorでWASMを実現することにしました。~~ほんとはRustを使いたかったんだけど。~~ 41 42 # 手順 43 ## 使用環境 44 |key|value| 45 |-|-| 46 |IDE|VisualStudio2022| 47 |ソースコード管理|GitHub| 48 |ライセンス|MIT| 49 |デプロイ先|Cloudflare Pages| 50 51 ## Create Blazor Project 52 VisualStudio(以下VSと略)を起動して`新規プロジェクトを作成`から`Blazor WebAssembly スタンドアロン アプリ`を選択して、作成。残りはよしなに。 53 `プログレッシブWebアプリケーション`って項目があって、何かと思って調べたら、ネイティブアプリみたいに独立したウィンドウとして表示できる機能？みたい。間違ってたらごめんなさい。Next.jsだったかReactでも似たような機能あるよね。アプリとしてインストールってやつ。 54 55 ## Setting up git 56 VSはgit clientも付いている超優秀な子です。上のツールバーの`Git`項目にマウスを持っていくと、リポジトリを作るところまでやってくれます。昔はこんな項目があった覚えがないのだけど。 57 58 ## Push to GitHub 59 上の手順でやると、勝手にコミットメッセージ込みでプッシュしてくれます。~~しやがります~~ 60 `プロジェクト ファイルを追加します。`というコミットメッセージ付きです。~~日本語コミットメッセージやめて~~ 61 ただ、VSのデフォルト設定だと`master`ブランチが作られます。ただ、近年の差別的な言葉を避ける運動により`main`ブランチにしましょうという流れらしいです。 62 個人的にはbridgeのslaveとか言ったりするし分かり易い表現だと思うので、すべて変える必要があるとは思いませんが、ブランチに関してはmasterでもmainでも可用性に差があるように感じないので`main`ブランチにしときます。 63 64 ## Ready for deploy 65 Cloudflare Pagesにデプロイするために必要な手順がひとつ残っています。 66 参考に挙げた[CloudflareドキュメントCreate the build script](https://developers.cloudflare.com/pages/framework-guides/deploy-a-blazor-site/#create-the-build-script)に書いてあるとおり、ビルド用のスクリプトを書きます。一応再掲。 67 ```sh 68 #!/bin/sh 69 curl -sSL https://dot.net/v1/dotnet-install.sh > dotnet-install.sh 70 chmod +x dotnet-install.sh 71 ./dotnet-install.sh -c 9.0 -InstallDir ./dotnet 72 ./dotnet/dotnet --version 73 ./dotnet/dotnet publish -c Release -o output 74 ``` 75 なお、4行目の9.0のところは各々が新規プロジェクト作成の際に選択したSDKバージョンを入れてください。 76 Window上のneovimを使ってこれを書いたところ、なんかバグったので、WSLでnanoやらvimやら使って書くことをおすすめします。 77 書けたら、そのファイルも含めてGitHubに上げときます。上げるっていうのは含めてコミットするわけで...VSのgit clientはcliにラッパーが被さった程度のものなので、プロジェクトのルートディレクトリ内にスクリプトを置いとけば、Add&Commitする欄に出てくるので、"適当に"コミットメッセージを書いてCommit&&Pushします。 78 79 ## いざDeploy 80 CloudflareにログインしてDashboardからPages(表示は`コンピューティング(Workers)`)に飛んで、作成を押して、プロジェクトのリポジトリを選択します。 81 ビルドコマンドのところに"Cloudflareのドキュメント通りに" 82 |Configuration option|Value| 83 |-|-| 84 |Production branch|main| 85 |Build command|./build.sh| 86 |Build directory|output/wwwroot| 87 してみます。 88 ```log 89 23:10:29.350 Executing user command: ./build.sh 90 23:10:29.358 /bin/sh: 1: ./build.sh: Permission denied 91 23:10:29.359 Failed: Error while executing user command. Exited with error code: 126 92 23:10:29.366 Failed: build command exited with code: 1 93 23:10:33.878 Failed: error occurred while running build command 94 ``` 95 らしいです。そう言えば公式ドキュメントに 96 > Your build.sh file needs to be executable for the build command to work. You can make it so by running chmod +x build.sh. 97 98 って書いてありました。ね。 99 ### バカの遠回り 100 バカな私はローカルで`ls -l`してpermissionを確認し始めました。 101 ``` 102 -rwxrwxrwx 1 <user> <user> 1094 Jul 28 00:13 LICENSE.txt 103 -rwxrwxrwx 1 <user> <user> 13 Jul 27 22:36 README.md 104 -rwxrwxrwx 1 <user> <user> 223 Jul 27 23:12 build.sh 105 drwxrwxrwx 1 <user> <user> 4096 Jul 27 22:33 webtools-mj 106 -rwxrwxrwx 1 <user> <user> 1146 Jul 27 22:33 webtools-mj.sln 107 ``` 108 あれ、おかしいですね、実行権限どころか、他の権限まであるじゃないですか。 109 なんでだろうなと思いながら`chmod +x build.sh`を実行します。 110 まあ、何も変わるわけがなくてですね、英語の読み間違いかなと思って日本語に翻訳をかけました。 111 > ビルドコマンドを機能させるには、ファイルが実行可能である必要があります。実行することでそうすることができます. `build.sh chmod +x build.sh` 112 113 ん？じゃあ`build.sh chmod +x build.sh`を実行すればいいんだな？と思い、実行しました。 114 するとどうでしょう、ルートディレクトリ内に.NET SDKがインストールされました！ 115 それをGitHubに上げて、Cloudflareがdeployしようとすると…… 116 既に.NET SDKがあります！ってエラーが。まあ当然ですわな。 117 それから私は何をトチ狂ったか、インストールされている.NET SDKファイルらを削除してみたり、`build.sh`すら消してみたり色々とやりました。GitHubさん、本当にごめんなさい。 118 ### 結局は…… 119 そろそろ公式ドキュメントを信用しなくなってきた私はググりました。そして見つけたのです。 120 [Permission denied on build scriptへの回答](https://community.cloudflare.com/t/permission-denied-on-build-script/295840/3) 121 > The only way would be to change the build command from `./build.sh` to `chmod +x build.sh && ./build.sh` 122 123 天才か？ 124 つまり、Cloudflareのサーバがgit cloneしてる時点でこっちのファイルのpermissionなんて向こうに関係ないわけでして、そのサーバ内でのpermissionを変更するにはこれしかないという、至極真っ当な答えでしたとさ。 125 126 |Configuration option|Value| 127 |-|-| 128 |Production branch|main| 129 |Build command|`chmod +x && ./build.sh`| 130 |Build directory|output/wwwroot| 131 132 ## Deployの成功と今後 133 やっとのことでDeployが成功しましたとさ。 134 今後は、このWEBページの機能と見た目を開発していけたらいいなと思ってます。 135 136 # 反省 137 - 公式ドキュメントはきっちり読む(翻訳に頼らずに) 138 - 公式ドキュメントで詰まったらググってみてもよい 139 - 無知。よい勉強になりました 140 141 以上、長々と、私の右往左往の失敗談でした。