ページへ戻る

− Links

 印刷 

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

xpwiki:技術系備忘録/Docker/Emscripten

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

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

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

Dockerfile anchor.png[3] 

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"
Page Top

使い方の例 anchor.png[4]

まずは普通に 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 を開くと確認できると思います。

Page Top

github anchor.png[5]

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

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

Last-modified: 2024-04-13 (土) 23:12:55 (JST) (33d) by takatsuka
ページ別名: 未設定
ページ作成: takatsuka
サイト管理: takatsuka

Links list

(This host) = https://thinkridge.com

  1. https://emscripten.org/
  2. https://www.boost.org/
  3. (This host)/modules/xpwiki/?%E6%8A%80%E8%A1%93%E7%B3%BB%E5%82%99%E5%BF%98%E9%8C%B2%2FDocker%2FEmscripten#n5f12043
  4. (This host)/modules/xpwiki/?%E6%8A%80%E8%A1%93%E7%B3%BB%E5%82%99%E5%BF%98%E9%8C%B2%2FDocker%2FEmscripten#r84cba85
  5. (This host)/modules/xpwiki/?%E6%8A%80%E8%A1%93%E7%B3%BB%E5%82%99%E5%BF%98%E9%8C%B2%2FDocker%2FEmscripten#d5f78452
  6. https://github.com/tr-takatsuka/emsdk-docker