【Rust × WebAssembly】GitHub Pagesにデプロイする方法

背景

RustでWebAssemblyをやってみたいと思い、こちらを参考に進めていました。

コードが完成して動作も確認できたため、デプロイしようと考えました。

一番手軽そうなGitHub Pagesでデプロイしていこうと思います。

環境

node: v17.0.1
npm: 8.15.1

前提

• ローカル上で動作することを確認できている

  • wasm-pack buildしてnpm run startした時にきちんと動作する状態

• サーバ処理を含んでいない

  • GitHub Pagesなのでフロントエンドのみの処理

• gitを使っており、GitHubにリモートリポジトリを作成済み

やり方

1. npm run-script buildしてビルドする

2. npmで作った方の.gitignoreからdistディレクトリを除外しておく

3. mainブランチでコミットする

4. git subtree push --prefix www/dist origin gh-pagesコマンドでgh-pagesブランチをpushする

   • ここでは、wwwがnpmプロジェクトディレクトリであるため、各々のプロジェクト名に書き換えが必要

5. GitHubの設定画面でPagesの欄からGitHub Pagesを有効にする

以上の作業が終われば無事デプロイできているかと思います。

おまけ

ビルドしたものがちゃんと動くか確かめたいという時の方法です。
package.jsonに下記を追加してビルドすると、ローカルで動作するかテストできます。
自分の場合は、VSCodeのLiveServerで動作確認しました。

"homepage":"./",