Rust Wasm Linux开发环境搭建

一、Linux 镜像版本

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

选择 GNOME Desktop 版本，

配置远程连接（可选），

nmtui

激活连接 enp0s3 ，查看 ip 地址，

绑定端口转发， 

通过 ssh 连接，

ftp 连接，

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

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

二、安装Rust

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

 输入 1 默认安装就好。

修改 Rust 镜像源，

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

三、更换软件源

# 更换阿里源 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 

四、安装 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

遇到问题：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

又遇到编译器版本过低问题，

只能先按照提示，把软件都安装升级一下；

在安装了 python3 、升级了 gmake 、gcc 之后，再执行安装，无报错，

# 参考以下连接
# 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

最终安装成功，

有时候GitHub连不上，多试几次就好了，wapm 可以不用安装， 

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

首次安装后，需要重开一个终端打开才生效，

wasmer

五、安装 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

六、安装 wasm 编译环境

# 新增 nightly 编译模式
rustup default nightly

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

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

七、安装 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

八、安装脚手架 cargo-generate

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

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

九、创建一个 WASM 项目 

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

# 打包
wasm-pack build --target web

可以看到在 pkg 下生成了 wasm 文件和胶水 js 代码。

十、创建一个 Vue 项目

# 使用 Vite
cnpm create vite@latest

将 pkg 文件夹复制到前端项目根路径下，

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

 页面引用 wasm 文件，

<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

十一、编译运行

npm run build
npm run dev

宿主主机访问，chrome，正常

Firefox，报错，低版本火狐浏览器不兼容正则表达式，

把  gs 改成 g 即可，

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

或者选择升级火狐浏览器，

# 下载
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

十二、Rust + WASI【运行在浏览器之外】

# 必须先添加 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 

十三、通过 Wasmer 访问 OS 资源 

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();
}

运行时，因为wamser相当于一个容器，容器内的路径要绑定映射到宿主主机的路径，才能访问到宿主主机的资源，

wasmer run -h

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

十四、编译成二进制可执行文件 

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

可以看到，编译为可执行文件成功，

执行 testexe 成功！