在探討 WASM 在服務端的巨大潛力時，我們提到 WASM 的一大優勢就是支持有影響力的新銳編程語言，例如 Rust 。這篇文章將展示如何編寫並執行一個 Wasm Rust 程序，只有代碼。
本文作者： Second State 的研究員、開源核心開發 Tim McCallum。
以下爲正文：
該演示是使用 Ubuntu Linux 操作系統和 Google 的 Chrome 瀏覽器進行的。其他組合尚未經過測試。
![image]()
第1步：安裝 Apache2 和 Rust
運行以下所有 Ubuntu 系統設置命令（更新，安裝 Apache2 和 Rust ）
sudo apt-get update
sudo apt-get -y upgrade
sudo apt-get -y install apache2
sudo chown -R $USER:$USER /var/www/html
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
source $HOME/.cargo/env
rustup target add wasm32-wasi
rustup override set nightly
第2步：創建一個新的 Rust 項目
創建一個快速的 Rust 項目
cd ~
cargo new --lib triple
cd triple
第3步：爲 Wasm 配置 Rust
通過將下面的配置添加到 〜/ triple / Cargo.toml 文件的 lib 部分來配置 rust
[lib]
name = "triple_lib"
path = "src/triple.rs"
crate-type =["cdylib"]
第4步：指定構建目標
通過在 〜/ .cargo.config 中創建一個新文件並添加以下配置來完成 Rust 的配置
[build]
target = "wasm32-wasi"
第5步：寫 Rust
編寫一個快速的 Rust 程序並將其保存爲 Triple.rs（在 〜/ triple / src 目錄中）
#[no_mangle]
pub extern fn triple(x: i32) -> i32 {
return 3 * x;
}
第6步：構建 Wasm 代碼
將 Rust 代碼構建到 Wasm 中，然後將 Wasm 文件複製到 Apache2 Web 服務器區域
cd ~/triple
cargo build - release
cp -rp ~/triple/target/wasm32-wasi/release/triple_lib.wasm /var/www/html/triple.wasm
第7步：製作 HTML 網頁
在 var / www / html / 目錄中創建一個名爲 Triple.html 的新文件，並使用以下代碼填充它。
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
<script>
if (!('WebAssembly' in window)) {
alert('you need a browser with wasm support enabled :(');
}
(async () => {
const response = await fetch('triple.wasm');
const buffer = await response.arrayBuffer();
const module = await WebAssembly.compile(buffer);
const instance = await WebAssembly.instantiate(module);
const exports = instance.exports;
const triple = exports.triple;
var buttonOne = document.getElementById('buttonOne');
buttonOne.value = 'Triple the number';
buttonOne.addEventListener('click', function() {
var input = $("#numberInput").val();
alert(input + ' tripled equals ' + triple(input));
}, false);
})();
</script>
</head>
<body>
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4">
<b>Rust to Wasm in under 5 minutes - Triple the number</b>
</div>
<div class="col-sm-4"></div>
</div>
<hr />
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-4">Place a number in the box</div>
<div class="col-sm-4"> Click the button</div>
<div class="col-sm-2"></div>
</div>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-4">
<input type="text" id="numberInput" placeholder="1", value="1">
</div>
<div class="col-sm-4">
<button class="bg-light" id="buttonOne">Triple the number</button>
</div>
<div class="col-sm-2"></div>
</div>
</body>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
</html>
第8步：單擊鼠標執行寫好的 Rust 代碼
在 triple HTML 頁面：http://12.345.456.78/triple.html 上訪問計算機的IP。
然後單擊 “Triple the number” 按鈕。
將顯示以下提示。
（如圖所示：8的三倍等於24）
到這裏我們就完成了一個Rust + WebAssembly 程序，你也來試試吧！
作者：Tim McCallum
鏈接：https://juejin.im/post/5de62000e51d4557f852a141