###### 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` でパスを通す。

$ curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
$ source $HOME/.cargo/env

バージョンを確認する。

$ 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 をインストールする。

$ 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 をインストールする。

$ sudo apt install gcc clang make openssl pkg-config libssl-dev
$ cargo install cargo-generate

### cargo-generate でプロジェクト作成

cargo-generate でプロジェクトを作成する。
プロジェクト名を `wasm_example` と入力する。

$ cargo generate --git https://github.com/rustwasm/wasm-pack-template
Project Name: wasm_example

wasm のプロジェクトが作成される。

### wasm-pack のインストール

wasm-pack をインストールする。

$ cargo install wasm-pack

> Raspberry Pi 4 では install shell がエラーになってしまったので、`cargo install` でインストールしました。
https://rustwasm.github.io/wasm-pack/installer/#

### wasm バイナリのビルド

wasm バイナリをビルドする。

$ 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`

[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 アプリケーションを作成する。

$ npm init wasm-app www
npx: installed 1 in 3.417s
🦀 Rust + 🕸 Wasm = ❤
$ cd www
$ npm install

localhost 以外からも参照できるように `wasm_example/www/package.json` を編集する。

...
  "scripts": {
    "build": "webpack --config webpack.config.js",
    "start": "webpack-dev-server"
    ↓↓↓
    "start": "webpack-dev-server --host 0.0.0.0"
  },
...

### Web アプリケーションの実行

Web アプリケーションを実行する。

$ 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>