シンクリッジ - : 技術系備忘録/Docker/Emscripten

WebAssembly を使うと JavaScript 以外をブラウザで動かすことが出来ておもしろいです。

Emscripten は C/C++ から WebAssembly (wasm) へのコンパイルをしてくれるもので、環境構築も難しくはありませんが docker になってると便利かなと思い作ってみました。

そして C++ ならやはり Boost C++ を使いたいと考え、ヘッダのみという制限はあるものの、一応使えるようにしました。Emscripten の Docker 自体は既に存在している中で自作した理由がコレです。
なお、Boost は Emscripten を公式にはサポートしていないので（OSS なのでそもそも論的にも）自己責任ではありますが、ヘッダオンリーのライブラリについては動く可能性が高そうな感じです。

Dockerfile

FROM ubuntu:22.04

RUN apt update \
 && apt -y upgrade \
 && apt clean && rm -rf /var/lib/apt/lists/*

# timezone Asia/Tokyo ############
RUN apt update \
 && apt -y install tzdata \
 && apt clean && rm -rf /var/lib/apt/lists/*
ENV TZ=Asia/Tokyo

# build-essential ####################
RUN apt update \
 && apt -y install --no-install-recommends build-essential \
 && apt clean && rm -rf /var/lib/apt/lists/*

# tools ##########################
RUN apt update \
 && apt -y install git cmake wget python3 \
 && apt clean && rm -rf /var/lib/apt/lists/*

# emscripten ##########################
ARG EMSCRIPTEN_VERSION=3.1.56
ARG EMSDKDIR=/opt/emsdk
RUN git clone https://github.com/emscripten-core/emsdk.git ${EMSDKDIR}
RUN cd ${EMSDKDIR} \
 && ./emsdk install ${EMSCRIPTEN_VERSION} \
 && ./emsdk activate ${EMSCRIPTEN_VERSION}
RUN echo "source ${EMSDKDIR}/emsdk_env.sh" >> ~/.bash_profile
RUN echo '#!/bin/bash\nexec /bin/bash -l -c "$*"' > /opt/entrypoint.sh \
 && chmod +x /opt/entrypoint.sh
ENTRYPOINT ["/opt/entrypoint.sh"]


# boost ##########################
ARG BOOST_VERSION=1.84.0
RUN wget https://github.com/boostorg/boost/releases/download/boost-${BOOST_VERSION}/boost-${BOOST_VERSION}.tar.xz \
 && tar xvf boost-${BOOST_VERSION}.tar.xz \
 && cd boost-${BOOST_VERSION} \
 && ./bootstrap.sh \
 && ./b2 headers \
 && mkdir -p /opt/include \
 && cp -rl boost /opt/include/boost/ \
 && cd ..\
 && rm -f boost*.tar.xz \
 && rm -rf boost-${BOOST_VERSION} 
ENV EMCC_CFLAGS="-I /opt/include"

使い方の例

まずは普通に docker build して image を構築します。

> docker build -t emsdk .

こんな感じでビルドできます。ビルドに必要なソースフォルダ(この例では ./sample)をマウントして emcc でビルドです。

> docker run --rm --name emsdk -v $(pwd)/sample:/opt/vol -w /opt/vol -it emsdk emcc main.cpp -s WASM=1 -o index.html

- なお Windows では "$(pwd)" はNGですが、"${pwd}" にすると動くようです。ただし普通のコマンドプロンプトではなく PowerShell かターミナルであることが条件なのでしょうか。いまいちよくわかっていません。

さらに Emscripten のサーバー機能を利用するとブラウザでの確認も容易です。

> docker run --rm --name emsdk -v $(pwd)/sample:/opt/vol -w /opt/vol -p 8080:8080 -it emsdk emrun --no_browser --port 8080 .

手元のブラウザで localhost:8080 を開くと確認できると思います。

github

github にも公開しておりますので、もしお役に立ちそうなら使ってみてください。
https://github.com/tr-takatsuka/emsdk-docker
使い方の事例や CMake を利用したサンプルコードも軽く掲載しています。
問題点やご助言などなど何かありましたら御一報いただけると幸いです。

Emscripten と Boost の関係者の方々に感謝です。

Attach file:

Page Info
Page Name :	技術系備忘録/Docker/Emscripten
Page aliases :	None
Page owner :	takatsuka
Can Read
Groups :	All visitors
Users :	All visitors
Can Edit
Groups :	No one
Users :	No one

Counter: 667, today: 4, yesterday: 3

Princeps date: 2024-04-13 (Sat) 20:58:55

Last-modified: 2024-04-13 (Sat) 23:12:55 (JST) (180d) by takatsuka

recent(30)

技術系備忘録​/Docker​/Emscripten

Dockerfile

使い方の例

github

技術系備忘録/Docker/Emscripten