Building Rust Wasm Linux development environment

1. Linux image version

CentOS-7-x86_64-DVD-2009.iso，Virtual Box 7.0

Select the GNOME Desktop version,

Configure remote connections (optional),

nmtui

Activate the connection enp0s3 and view the ip address.

Bind port forwarding, 

Connect via ssh,

ftp connection,

# 也可以手动修改配置文件
# cd /etc/sysconfig/network-scripts/
# vim vi ifcfg-xxx

# ONBOOT=yes 则会自动开启网络

2. Install Rust

# 官网 https://www.rust-lang.org/
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

 Enter 1 for default installation.

Modify the Rust image source,

# $CARGO_HOME/.cargo/ 下创建 config.toml
$ touch config.toml
 
# 添加以下内容
 
[source.crates-io]
replace-with = 'ustc'
 
[source.ustc]
registry = "git://mirrors.ustc.edu.cn/crates.io-index"

3. Change the software source

# 更换阿里源 https://developer.aliyun.com/mirror/centos?spm=a2c6h.13651102.0.0.3e221b11e44Xyj
# 备份
mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup
# 拉取源文件
wget -O /etc/yum.repos.d/CentOS-Base.repo https://mirrors.aliyun.com/repo/Centos-7.repo
# 生成缓存
yum makecache 

4. Install WASMER

# 官网 https://wasmer.io/
# windows
iwr https://win.wasmer.io -useb | iex
# linux
curl https://get.wasmer.io -sSfL | sh -s "v3.3.0"
# 使用 cargo 安装
# cargo install wasmer-cli

Encountered a problem: version ·CLIBC_2.29· not found

解决方案：升级glibc

wget http://ftp.gnu.org/gnu/glibc/glibc-2.31.tar.gz

tar -xf glibc-2.31.tar.gz

cd glibc-2.31

mkdir build

cd build

../configure --prefix=/usr --disable-profile --enable-add-ons --with-headers=/usr/include --with-binutils=/usr/bin

make -j 8 --jobserver-style=pipe

make install

strings /lib64/libc.so.6 | grep GLIBC

make localedata/install-locales

ldd --version

I encountered the problem of the compiler version being too low again.

You can only follow the prompts to install and upgrade the software first;

After installing python3, upgrading gmake and gcc, and then executing the installation, no error was reported.

# 参考以下连接
# GCC 升级 https://blog.csdn.net/carefree2005/article/details/117559312
# MAKE 升级 https://blog.csdn.net/fengqiangname/article/details/121655919
# GLIBCXX问题解决 https://blog.csdn.net/qq_22948593/article/details/110877000
# 缺少libstdc++.so.6 库 https://blog.csdn.net/qianjiu520/article/details/129417730
# Cannot open jobserver 解决 https://github.com/crosstool-ng/crosstool-ng/issues/1858

The final installation was successful,

Sometimes GitHub cannot be connected, just try a few more times and it will be fine. There is no need to install wapm. 

# 下载地址 https://github.com/wasmerio/wasmer/releases/download/v3.3.0/wasmer-linux-amd64.tar.gz

After the first installation, you need to reopen a terminal for it to take effect.

wasmer

5. Install Visual Studio Code

# 官网 https://code.visualstudio.com/

sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc
sudo sh -c 'echo -e "[code]\nname=Visual Studio Code\nbaseurl=https://packages.microsoft.com/yumrepos/vscode\nenabled=1\ngpgcheck=1\ngpgkey=https://packages.microsoft.com/keys/microsoft.asc" > /etc/yum.repos.d/vscode.repo'

yum check-update

sudo yum install code

6. Install the wasm compilation environment

# 新增 nightly 编译模式
rustup default nightly

# 新增编译目标
rustup target add wasm32-unknown-unknown
rustup target add wasm32-wasi

# 安装 wasm 绑定
cargo install wasm-pack
# cargo install https

7. Install Node.js

# 下载
wget https://nodejs.org/dist/v18.16.0/node-v18.16.0-linux-x64.tar.gz

# 解压
tar -zxvf node-v18.16.0-linux-x64.tar.gz

# 新建安装目录
sudo mkdir /usr/local/nodejs

# 移动到 /usr/local/nodejs
sudo mv node-v18.16.0-linux-x64/* /usr/local/nodejs

# 建立软链接
sudo ln -s /usr/local/nodejs/bin/node /usr/local/bin/node
sudo ln -s /usr/local/nodejs/bin/npm /usr/local/bin/npm

# 测试
node -v
npm -v

# 安装 cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
sudo ln -s /usr/local/nodejs/bin/cnpm /usr/local/bin/cnpm

# 更换下载源
npm config set registry http://registry.npm.taobao.org

8. Install scaffolding cargo-generate

# 必须安装 openssl-devel
sudo yum install -y openssl-devel

# cargo-generate 用于快速生成 WASM 项目的脚手架（类似 create-react-app）
cargo install cargo-generate

9. Create a WASM project 

# 使用模板生成
cargo generate --git https://github.com/rustwasm/wasm-pack-template

# 打包
wasm-pack build --target web

You can see that the wasm file and glue js code are generated under pkg.

10. Create a Vue project

# 使用 Vite
cnpm create vite@latest

Copy the pkg folder to the root path of the front-end project,

[sam@localhost wasm-web-demo]$ cp -r ../wasm-demo/pkg/* pkg

 The page references the wasm file,

<script setup lang="ts">
import { onMounted, ref } from 'vue'

import init, { greet } from '../../pkg/mydemo.js'

defineProps<{ msg: string }>()

const count = ref(0)

onMounted(async () => {
  await init()
  greet()
})

# 开放端口
sudo iptables -I INPUT -p tcp --dport 5500 -j ACCEPT
sudo iptables -I INPUT -p tcp --dport 5173 -j ACCEPT

iptables -L -n

11. Compile and run

npm run build
npm run dev

Host host access, chrome, normal

Firefox, error message, lower version of Firefox browser is not compatible with regular expressions,

Just change gs to g.

解决方案参考 https://blog.csdn.net/qq_33183172/article/details/127770780

Or choose to upgrade Firefox browser,

# 下载
waget https://download-ssl.firefox.com.cn/releases/firefox/113.0/zh-CN/Firefox-latest-x86_64.tar.bz2
# 解压
tar -xjvf Firefox-latest-x86_64.tar.bz2
# 删除系统默认旧版本的 Firefox
sudo rm -rf  /usr/lib64/firefox
# 将解压后的新版本 Firefox 移动到 /usr/lib64
sudo mv firefox /usr/lib64
# 创建一个新的软链接
cd /usr/bin
sudo rm firefox
sudo ln -s  /usr/lib64/firefox/firefox   /usr/bin/firefox

12. Rust + WASI [running outside the browser]

# 必须先添加 wasm32-wasi
rustup target add wasm32-wasi
# 使用 wasm 运行时 wasmer 
iwr https://win.wasmer.io -useb | iex
# 创建项目
cargo new wasi-demo
# 编译
cargo build --release --target wasm32-wasi 
# 运行
wamser run 

13. Access OS resources through Wasmer 

use std::fs;
use std::io::prelude::*;

fn main() {
    let mut file = fs::File::create("/path/test.txt").unwrap();
    let mut array = String::new();
    array.push_str("你好，世界！");
    write!(file, "{}", array).unwrap();
}

When running, because wamser is equivalent to a container, the path in the container must be bound and mapped to the path of the host host in order to access the resources of the host host.

wasmer run -h

# 编译
cargo build --release --target wasm32-wasi
# 运行
wasmer run --mapdir /path:. target/wasm32-wasi/release/wasi-demo.wasm

14. Compile into binary executable file 

wasmer create-exe -o testexe target/wasm32-wasi/release/wasi-demo.wasm

# wasmer 下载地址 https://github.com/wasmerio/wasmer/releases/download/v3.3.0/wasmer-linux-amd64.tar.gz

# 遇到一个错误 error: cannot get prefix for atom wasi-demo
# 在 issue 上找到解决方案 https://github.com/wasmerio/wasmer/issues/3834
# 解决方案：需要将命名中的 - 改成 _
mv target/wasm32-wasi/release/wasi-demo.wasm target/wasm32-wasi/release/wasi_demo.wasm

# 如果遇到 fatal error: wasmer.h: No such file or directory ，则需要导入环境变量
# export WASMER_DIR=/home/user/.local/share/wasmer/

# 如果还是报 fatal error: wasmer.h: No such file or directory ，就把安装目录下的 include 文件夹所有文件复制到 /usr/include

As you can see, the compilation into an executable file was successful.

Executing testexe successfully!