###### tags: `raspberrypi` # Raspberry Pi 4（Ubuntu Server）で Rust & WebAssembly ## やりたいこと Ubuntu Server をインストールした Raspberry Pi 4 に Rust 開発環境と WebAssembly 開発環境を整備する。 「実践Rustプログラミング入門」の「Chapter 6 WebAssembly」の内容を実行する。 https://www.shuwasystem.co.jp/book/9784798061702.html ## 準備するもの - Raspberry Pi 4（RAM 8GB） ## やったこと - Ubuntu Server のインストール - Rust の開発環境セットアップ - WebAssembly の開発環境セットアップ ## Ubuntu Server のインストール Raspberry Pi 向け Ubuntu のページ https://ubuntu.com/download/raspberry-pi Ubuntu Server 20.04.1 LTS Raspberry Pi 4 64-bit をインストール インストールガイド https://ubuntu.com/tutorials/how-to-install-ubuntu-on-your-raspberry-pi#1-overview ヘッドレスでインストールするには `system-boot/network-config` を編集してねと書いてあるが、うまくいかなかった。 Raspberry Pi OS と同様に `wpa_supplicant.conf` を使って設定できた。 ## Rust の開発環境セットアップ ### Rust のインストール ssh で Raspberry Pi 4 にログインし、以下のコマンドを実行する。 途中で聞かれるインストール番号は default の 1 `（1) Proceed with installation (default)）` を入力する。 インストールが終了したら、`source` でパスを通す。 ```bash $ curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh $ source $HOME/.cargo/env ``` バージョンを確認する。 ```bash $ cargo --version cargo 1.48.0 (65cbdd2dc 2020-10-14) $ rustc --version rustc 1.48.0 (7eac88abb 2020-11-16) ``` ### リモート開発環境整備 VSCode の `Remote - SSH` Extension を使って、Raspberry Pi 4 にログインしてセットアップした。 Rust 関連の Extension は `rust-analyzer`、`CodeLLDB`、`Better TOML` をインストールした。 ## WebAssembly の開発環境セットアップ ### npm のインストール nvm、npm をインストールする。 ```bash $ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash $ source ~/.bashrc $ nvm install --lts $ npm --version 6.14.8 ``` ### cargo-generate のインストール cargo-generate のインストールに必要なパッケージをインストールした後、cargo-generate をインストールする。 ```bash $ sudo apt install gcc clang make openssl pkg-config libssl-dev $ cargo install cargo-generate ``` ### cargo-generate でプロジェクト作成 cargo-generate でプロジェクトを作成する。 プロジェクト名を `wasm_example` と入力する。 ```bash $ cargo generate --git https://github.com/rustwasm/wasm-pack-template Project Name: wasm_example ``` wasm のプロジェクトが作成される。 ### wasm-pack のインストール wasm-pack をインストールする。 ```bash $ cargo install wasm-pack ``` > Raspberry Pi 4 では install shell がエラーになってしまったので、`cargo install` でインストールしました。 https://rustwasm.github.io/wasm-pack/installer/# ### wasm バイナリのビルド wasm バイナリをビルドする。 ```bash $ cd wasm_example $ wasm-pack build ``` 以下のようなエラーが出た。 ``` Error: no prebuilt wasm-opt binaries are available for this platform: Unrecognized target! To disable `wasm-opt`, add `wasm-opt = false` to your package metadata in your `Cargo.toml`. ``` `Cargo.toml` に、以下のオプションを記載する。 `wasm_example/Cargo.toml` ```toml [package.metadata.wasm-pack.profile.release] wasm-opt = false ``` 再度ビルドする。 `pkg/wasm_example_bg.wasm` が作成されていれば OK 。 ``` $ wasm-pack build ... [INFO]: :-) Your wasm pkg is ready to publish at /***/wasm_example/pkg. ``` ### Web アプリケーションの作成 npm コマンドで Web アプリケーションを作成する。 ```bash $ npm init wasm-app www npx: installed 1 in 3.417s 🦀 Rust + 🕸 Wasm = ❤ $ cd www $ npm install ``` localhost 以外からも参照できるように `wasm_example/www/package.json` を編集する。 ```json ... "scripts": { "build": "webpack --config webpack.config.js", "start": "webpack-dev-server" ↓↓↓ "start": "webpack-dev-server --host 0.0.0.0" }, ... ``` ### Web アプリケーションの実行 Web アプリケーションを実行する。 ```bash $ npm run start ... ℹ ｢wdm｣: Compiled successfully. ``` ブラウザから、`http://<Raspberry Pi 4 の IP アドレス>:8080` にアクセスする。 「Hello, hello-wasm-pack!」が表示されれば成功。 <img src=https://i.imgur.com/1I3KOG4.png width=300px>