Rust+WebAssembly(WASM)の実装をGitHub Pagesに載せる方法

18 April, 2021

Rust+WebAssembly(wasm)の実装をGitHub Pagesに載せるのに苦労したのでやり方を解説します。

前提

まずはこちらの記事から、「4.2. Hello,World!」まで進め、ローカル環境でRust+wasmのHello,Worldが表示できるところまで進めましょう。 https://rustwasm.github.io/docs/book/

また、有志の方が途中まで和訳したページもあるのでそちらを参照するのもよいかと思います。
https://moshg.github.io/rustwasm-book-ja/

手っ取り早くHello,Worldまでいきたいという人のためにテンプレートを用意したので、こちらのリポジトリをgit cloneして頂いても大丈夫です。
https://github.com/eda3/rust-wasm-template

上記のリポジトリを扱う場合についてコマンドベースで説明します。

以下のコマンドを実行し、リポジトリをclone
```
git clone https://github.com/eda3/rust-wasm-template.git
```
cloneしたリポジトリに移動
```
cd rust-wasm-template
```
ブラウザ表示用のディレクトリに移動
```
cd www
```
wasm用にHello,Worldのソースをビルドする
```
wasm-pack build
```
wasm用のパッケージインストールを実行
```
npm install
```
ローカル確認用にサーバの始動を実行
```
npm start
```
https://localhost:8080/ を確認し、以下の文章が表示されることを確認
```
Hello, rust-wasm-template!
```
※上記メッセージはrust-wasm-template/src/lib.rsで変更できます

GitHub Pagesで結果を確認する場合、上記の方法では確認することが出来ません。wwwディレクトリをGitHubにpushした場合でも、以下のとおりHello,Worldは実行されません。
リポジトリ： https://github.com/eda3/rust-wasm-template/tree/master/www
GitHub Pages: https://eda3.github.io/rust-wasm-template/www/

GitHub Pagesで結果を確認する場合、wwwディレクトリで以下のコマンドを実行する必要があります。
npm run-script build

上記コマンド実行後、www/distの内容をGitHubにpushすればWebサーバ側でも確認することが出来ます。
リポジトリ： https://github.com/eda3/rust-wasm-template/tree/master/www/dist
GitHub Pages: https://eda3.github.io/rust-wasm-template/www/dist