MacArm 用 Docker 安裝 WebAssembly 環境

需求

我正在配置 Qt wasm環境,
但是 emsdk 不支持 apple m1 issue 769 使用 Homebrew 安裝的 emsdk 一直報錯,
沒找到源碼編譯的 Guide 只好使用 Docker.

環境
MacOS Bigsur M1, nodejs

安裝 Docker Arm

官網指南: 點擊前往

根據官網的描述, Docker 是使用了 QEMU 來虛擬出 AMD/x86 的環境, 反正能正常工作.

首先需要安裝 Rosetta2, 應該都已經有了

 softwareupdate --install-rosetta

然後點擊下載 Docker Desktop RC3, 簡單的安裝後啟動, 會要求獲取 root 權限.

點擊 settings - Docker Engine, 在頁面中間的框框裡面加入這麼一行, 配置科大鏡像:

  "registry-mirrors": [
    "https://docker.mirrors.ustc.edu.cn/"
  ],

至此, Docker 配置完畢了.

安裝 emsdk

emscripten/emsdk : Docker Hub

以上是兩個所需鏡像, 第二個是可選項. 如果你不是配合 qt 使用的話, 只選第一個就可以了.

但是如果你要配合 qt 使用, 兩個都得裝, 原因會在下文提及.

首先先 拉取 emsdk 的鏡像, 根據 Qt官網 的描述, 我需要的版本是 1.39.8 , 所以我的命令是:

docker pull emscripten/emsdk:1.39.8

沒有特殊要求的話, 後面的 :1.39.8 可以改成 :latest, 或者根本不加, 直接拉取最新版本.

測試一下鏡像:

cd /tmp

# create helloworld.cpp
cat << EOF > helloworld.cpp
#include <iostream>
int main() {
  std::cout << "Hello World!" << std::endl;
  return 0;
}
EOF

# compile with docker image
docker run \
  --rm \
  -v $(pwd):$(pwd) \
  -u $(id -u):$(id -g) \
  emscripten/emsdk \
  emcc helloworld.cpp -o helloworld.js

# execute on host machine
node helloworld.js

如果看到 輸出 Hello World! 的話, 配置成功了.

設置快捷方式

每次使用打這麼一大串肯定不現實, 一般的思路是寫一個別名:

# vim ~/.zshrc
alias emcc='docker run \
  --rm \
  -v $(pwd):$(pwd) \
  -u $(id -u):$(id -g) \
  emscripten/emsdk \
  emcc'
alias em++='docker run \
  --rm \
  -v $(pwd):$(pwd) \
  -u $(id -u):$(id -g) \
  emscripten/emsdk \
  em++'

# 應用配置
source ~/.zshrc

這樣手敲就沒問題了, 但是用諸如 vscode 之類的工具配置環境會比較煩, 更加穩妥的方式是將其寫進 bash 腳本裡面:

echo '#!/bin/bash
/usr/local/bin/docker run \
  --rm \
  -v $(pwd):$(pwd) \
  -u $(id -u):$(id -g) \
  emscripten/emsdk \
  emcc $*' > /usr/local/bin/emcc

echo '#!/bin/bash
/usr/local/bin/docker run \
  --rm \
  -v $(pwd):$(pwd) \
  -u $(id -u):$(id -g) \
  emscripten/emsdk \
  em++ $*' > /usr/local/bin/em++

sudo chmod +x /usr/local/bin/emcc
sudo chmod +x /usr/local/bin/em++

至此, emsdk 的安裝已經基本完成.