WSLを使ってC++をEmscriptenでWebAssemblyにコンパイルしたい
目標
WSLを使ってC++をEmscriptenでWebAssemblyにコンパイル
環境
Windows 10 Home
方法
1. WSLを有効,Ubuntuのインストール
1.1 WSLを有効にする
コントロールパネル > プログラム > Windowsの機能の有効化または無効化
Windows Subsystem for LINUX
にチェックを入れる
1.2 Ubuntuのインストール
Microsoft Store
を開いてUbuntu
と検索
3つくらい似た名前のソフトがヒットしましたが,僕は無印のUbuntuをインストールしました
1.3 ホームディレクトリを変更する
Windows側からWSL側のディレクトリにアクセスするのが非常に面倒だったのでC:直下にubuntu_home
ディレクトリを作ってそちらにホームディレクトリを変更しました
やりかたは【WSL】Ubuntuのホームディレクトリを変更する _ IT土方の奮闘記を参考にしました
めっちゃわかりやすい
2. Emscriptenのインストール
2.1 インストール
基本的に公式チュートリアル通りにやったので使ったコマンドだけ書いておきます
$ git clone https://github.com/emscripten-core/emsdk.git
$ cd emsdk
$ ./emsdk install latest
$ ./emsdk activate latest
2.2 PATHを通す
いつでもどこでもemccコマンドを呼びたいのでパスを通します
試しに
$ source ./emsdk_env.sh
と入力するとこんな感じで追加するPATHや環境変数が返ってきます
Adding directories to PATH:
PATH += /{user}/c/ubuntu_home/Projects/emsdk
PATH += /{user}/c/ubuntu_home/Projects/emsdk/upstream/emscripten
PATH += /{user}/c/ubuntu_home/Projects/emsdk/node/12.9.1_64bit/bin
Setting environment variables:
EMSDK = /{user}/c/ubuntu_home/Projects/emsdk
EM_CONFIG = /{user}/c/ubuntu_home/.emscripten
EM_CACHE = /{user}/c/ubuntu_home/Projects/emsdk/upstream/emscripten/cache
EMSDK_NODE = /{user}/c/ubuntu_home/Projects/emsdk/node/12.9.1_64bit/bin/node
まず/{user}/c/ubuntu_home
内の.profile
をVisual Codeなどのエディタで開いて一番下あたりにこれらを追記していく
# For Emscripten
# Adding directories to PATH:
PATH="/{user}/c/ubuntu_home/Projects/emsdk:$PATH"
PATH="/{user}/c/ubuntu_home/Projects/emsdk/upstream/emscripten:$PATH"
PATH="/{user}/c/ubuntu_home/Projects/emsdk/node/12.9.1_64bit/bin:$PATH"
# Setting environment variables:
EMSDK="/{user}/c/ubuntu_home/Projects/emsdk"
EM_CONFIG="/{user}/c/ubuntu_home/.emscripten"
EM_CACHE="/{user}/c/ubuntu_home/Projects/emsdk/upstream/emscripten/cache"
EMSDK_NODE="/{user}/c/ubuntu_home/Projects/emsdk/node/12.9.1_64bit/bin/node"
最初そのままコピペしたんだけどうまくいかなくて
- =前後のスペースを消す
- 中身を""で囲う
- PATHは最後に
:$PATH
をダブルクォーテーションの前に付け足す
てことをやったらうまくいきました.
シェルを再起動して
$ emcc -v
が通ればOK!
3. EmscriptenでCをコンパイル
コンパイル
公式チュートリアルにもあるようにまずはシンプルなCファイルのコンパイルからやってみた
以下のファイルを作成
作業用フォルダとして適当にtest_emsdk
を作ってそこに保存していく
#include <stdio.h>
int main(int argc, char *argv[]){
printf("Hello, world!\n");
return 0;
}
以下のコマンドでコンパイル
$ emcc hello.c -s WASM=1 -o hello.html
-s WASM=1
で出力をWASMに指定して
-o hello.html
でコードを実行するためのHTMLを指定している
うまくいけばhello.c
と同じ階層に以下のファイルが生成される
- hello.html
- hello.js
- hello.wasm
さっそくhello.html
をブラウザで開いてみる
今回はChromeを使った
エラー
公式チュートリアルにこんなことが書いてあった
要するにXHRリクエストに対応してないからローカルのwebサーバーを立ち上げてそこで開く必要があるらしい
というわけでNode.jsを使ってローカルサーバーを起動します
4. WSLにNode.jsをインストール
apt-getを使うと古いバージョンがインストールされるとかっていう噂を見かけたので別のやり方でやりました
WSL install Node
ここにまさにやりたいことがドンピシャで書いてあったので丸々参考にした
まず,
nvm-sh_nvm_ Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions
ここのページのInstall & Update Script
の項目に書かれている
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
をホームディレクトリにて実行.(バージョンが変わってるかもしれないので実際に上のページに行ってコピペすることを推奨します)
次に以下のコマンドを実行してインストール
$ source ~/.bashrc // バッシュの再読み込み
$ nvm install node // nodeのインストール
確認
$ node --version
v14.2.0
OK!
5. 簡易的にローカルサーバー起動
http-serverというものを使えばお手軽にサーバー起動できるみたいなので採用してみた
インストール
$ npm install -g http-server
起動
作業用のtest_emsdk
ディレクトリ上で以下のコマンドを実行
$ http-server -o
この-o
オプションをつけると起動後自動的にブラウザを開いてくれる
6. あらためてhello.htmlを開く
今しがたhttp-server
で起動したサーバーからhello.html
にアクセス
今度はうまくいった!!
次の目標
本来の目標である複数cppファイルのコンパイルとかやりたい
参考
Author And Source
この問題について(WSLを使ってC++をEmscriptenでWebAssemblyにコンパイルしたい), 我々は、より多くの情報をここで見つけました https://qiita.com/avitim/items/47f3fa9009bb63f5e084著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .