Ubuntu24.04LTSとWebAssemblyモジュールの構築(2025/08/09修正)

Last updated at 2025-08-09Posted at 2025-08-08

Ubuntu24.04LTSとWebAssemblyモジュールの構築(2025/08/08記載)(2025/08/09修正)

あくまで、参考までによろしくお願いします

OS : macOS 15.5
仮想システム: UTM 4.6.5
仮想OS: Ubuntu 24.04LTS(arm64で構築しましたが、x86_64でも一部変えて記載してます)
仮想メモリ: 2GB
SSD: 40GB

build-essentialのインストール
libtoolのインストール
libtoolコマンドの確認
mod_wasmのソースダウンロード
いろいろなパッケージ(環境構築関係)のインストール
Dockerのインストール
Rustのインストール
Apacheのインストール(ご自身で入れておいてください)
Dockerfileの修正
Cヘッダーの修正
mod_wasm.so作成時に必要です
モジュールのbuildとインストール
ライブラリの作成
mod_wasmのインストール
apache2へのwasm.conf(ご自由に名前をつけてください)などの設定
wasmzファイルの設置場所
webページへアクセス
wasmサンプル(あくまで参考までに -- AlmaLinux版の２つ目とほぼ同じです)

ふぅ〜大変だぁ・・・

Ubuntu24.04LTS、apache2(必ず入れておいてください)のインストールは割愛させていただきます
ufwなどの設定は、大変申し訳無いですが、今回してません、たぶん、ポートで設定したら大丈夫だと思います
*すみません、いいかげんで(_ _)

1. build-essentialのインストール

$ sudo apt install -y build-essential

2. libtoolのインストール

$ sudo apt install -y libtool-bin

*build-essentialを入れないと、インストールできません

3. libtoolコマンドの確認

$ which libtool

4. mod_wasmを下記のサイトよりダウンロードしていてください

mod_wasm ダウンロード

ダウンロードしたら
ご自身のホームディレクトリ(/home/ユーザ名)に展開しておいてください

5. いろいろなパッケージ(環境構築関係)のインストール

$ sudo apt install -y clang llvm llvm-dev clang-tools cmake make gcc g++
$ sudo apt install -y apache2-dev libssl-dev git pkg-config

6. Dockerのインストール

$ sudo apt update
$ sudo apt install ca-certificates curl
$ sudo install -m 0755 -d /etc/apt/keyrings
$ sudo curl -fsSL https://download.docker.com/linux/ubuntu/gpg -o /etc/apt/keyrings/docker.asc
$ sudo chmod a+r /etc/apt/keyrings/docker.asc

$ echo \
  "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.asc] https://download.docker.com/linux/ubuntu \
  $(. /etc/os-release && echo "${UBUNTU_CODENAME:-$VERSION_CODENAME}") stable" | \
sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

$ sudo apt update

$ sudo apt install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin

$ sudo docker run hello-world

7. Rustのインストール

$ curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
$ . ./.bashrc

8. Apacheのインストール

標準でインストールしてますので、インストールは割愛します

Dockerfileの修正

これは、そのままで、makeするとバージョンが古くエラーが出ます
その修正です

$ cd ~
$ cd ./mod_wasm-main/image
$ sudo vim ./Dockerfile

この中に

FROM $IMAGE_REPOSITORY/library/rust:1.68 as builder-wasm_runtime.so

というふうに書かれてるところがあると思います
この中の1.68というところをRustをインストールしたバージョンに書き換えてください
私は、rustのバージョンは1.88なので

FROM $IMAGE_REPOSITORY/library/rust:1.88 as builder-wasm_runtime.so

にします

さらに、このDockerfileの

RUN cargo install cbindgen
↓
↓

RUN cargo install cbindgen --locked

へ

つづいて、warningの修正(必要ならやってください)
Dockerfileの古い形式のENVやLABEL、FROMだったらしので、

101行目の
LABEL org.opencontainers.image.source https://github.com/vmware-labs/mod_wasm
↓
↓

LABEL org.opencontainers.image.source="https://github.com/vmware-labs/mod_wasm"

へ

ENVの書き換え
48行目の
ENV PHP_7_3_33_SHA1 a1daaeebc6cf27819ab9fde7ebf8e1df2e0df832
↓
↓

ENV PHP_7_3_33_SHA1=a1daaeebc6cf27819ab9fde7ebf8e1df2e0df832

へ

同様に
ENV に関して：
48, 52, 56, 60, 65, 71, 77, 83, 90行目を
=
を付け加えてください

FROMの書き換え
対象行は
13, 27, 44, 100 行目

FROM $IMAGE_REPOSITORY/library/rust:1.88 as builder-wasm_runtime.so
↓
↓

FROM $IMAGE_REPOSITORY/library/rust:1.88 AS builder-wasm_runtime.so

のように

13, 27, 44, 100 行
書き換えてください
*これは、1.68から1.88に書き換えたあとにしてます、同時にしていただいても構いません

まとめると

101行目
LABEL key value を LABEL key="value" に変更

48, 52, 56, 60, 65, 71, 77, 83, 90行目の
ENV A B を ENV A=B に変更

13, 27, 44, 100行目の
as を AS に変更

です

10. Cヘッダーの修正

wasmライブラリの作成時に必要です

これは、cbindgenが用意されていたバージョンではならなかったため
新しいのに書き換えました

$ cd ~
$ cd ./mod_wasm-main/wasm_runtime/include
$ sudo vim ./version.h

#define WASM_RUNTIME_VERSION "0.12.2"
#define WASM_RUNTIME_VERSION_MAJOR 0`
#define WASM_RUNTIME_VERSION_MINOR 12
#define WASM_RUNTIME_VERSION_PATCH 2

↓
↓

#define WASM_RUNTIME_VERSION "0.29.0"
#define WASM_RUNTIME_VERSION_MAJOR 0
#define WASM_RUNTIME_VERSION_MINOR 29
#define WASM_RUNTIME_VERSION_PATCH 0

続いて、wasm_runtime.hの変更

$cd ~
$cd ./mod_wasm-main/wasm_runtime/include
$sudo vim ./wasm_runtime.h

一番下に
このヘッダーの中身を追加

/////////////////////////////////////

#ifndef WASM_RUNTIME_H
#define WASM_RUNTIME_H

#ifdef __cplusplus
extern "C" {
#endif

int wasm_config_entrypoint_set(const char *config_id, const char *entrypoint);

#ifdef __cplusplus
}
#endif

#endif // WASM_RUNTIME_H

/////////////////////////////////////

11. mod_wasm.so作成時に必要です

mod_wasm.hヘッダーの変更

$ cd ~
$ cd ./mod_wasm-main/mod_wasm/modules/wasm
$ sudo vim mod_wasm.h

#define MOD_WASM_VERSION_MAJOR 0
#define MOD_WASM_VERSION_MINOR 12
#define MOD_WASM_VERSION_PATCH 2
↓
↓

#define MOD_WASM_VERSION_MAJOR 0
#define MOD_WASM_VERSION_MINOR 29
#define MOD_WASM_VERSION_PATCH 0

12. モジュールのbuildとインストール

$ cd ~
$ cd/mod_wasm-main

$ sudo make

13. ライブラリの作成

そのままでは、ファイル権限によりbuildできませんので、ディレクトリとユーザー名を変更

$ cd ~
$ cd ./mod_wasm-main

(2025/08/09修正)

$ sudo chown -Rf ユーザ名:グループ名 ./wasm_runtime

$cd ./wasm_runtime
$ cargo build -r

build後に

$ cd ~
$ cd ./mod_wasm-main

再度

$ sudo chown -Rf root:root ./wasm_runtime

できあがったところは、

$ mod_wasm-main/wasm_runtime/target/release

に
libwasm_runtime.so
このままでは、実行ファイルとして
ファイルがのこりますので
これの権限を変えます

$ sudo chmod 644 ./libwasm_runtime.so

そしてこれをライブラリとして

OSが
x86_64なら

/usr/lib/x86_64-linux-gnu/

aarch64なら

/usr/lib/aarch64-linux-gnu

へ追加します

そのあと、ライブラリを反映させるため

$ sudo ldconfig

を実行

14. mod_wasmのインストール

$cd ~
$cd ./mod_wasm-main/mod_wasm
$ sudo ./build.sh

モジュールは

mod_wasm-main/dist/modules

にあります

これを
まずは、権限を変えて

$sudo chmod 644 ./mod_wasm.so

そして

/usr/lib/apache2/modules

へコピーして

15. apache2へのwasm.conf(ご自由に名前をつけてください)などの設定

$cd /etc/apache2
$sudo vim ports.conf

Listen 8080

を追加


$ cd /etc/apache2/mods-available
$ sudo vim ./wasm.load

下記で追加


LoadModule wasm_module /usr/lib/apache2/modules/mod_wasm.so

$cd /etc/apache2/mods-available

へ
wasm.conf(仮)
へ下記を追加


<VirtualHost *:8080>
    DocumentRoot /var/www/wasm
    AddType applicaiton/wasm .wasm
</VirtualHost>

<Directory "/var/www/wasm">
    Options +Indexes
    AllowOverride All
    Require all granted
</Directory>

$ apachectl configtest

Syntax OK
とでれば大丈夫です

$ cd /usr/lib/apache2/modules
$ sudo a2enmod wasm

Enabling module wasm. To activate the new configuration, you need to run: systemctl restart apache2
とでれば大丈夫です

$ sudo systemctl restart apache2

$ apache2ctl -M | grep wasm

で、
wasm_module (shared)
がでれば大丈夫です

16. wasmzファイルの設置場所

上記の例でいうと
/var/www/wasmになりますの
/var/wwwディレクトリに
wasmディレクトリを作成してください

あとは、この中にwasmファイルを含んだwebファイルを入れて、apache2を再起動するだけです

17. webページへアクセス

URL: http://URLアドレス:8080

で大丈夫かと思います

18. wasmサンプル(あくまで参考までに -- AlmaLinux版の２つ目と同じです)

$cargo install wasm-pack

$cargo new wasm-add --lib

$cd ./wasm-add
$ vim Cargo.toml

内容

[package]
name = "wasm-add"
version = "0.1.0"
edition = "2024"

[lib]
crate-type = ["cdylib", "rlib"]

[dependencies]
wasm-bindgen = "0.2"

$ cd ~
$ vim ./wasm_add/src/Libs.rs

libs.rs

use wasm_bindgen::prelude::*;

fn add_one(value: i32)->i32{
    value + 1
}

#[wasm_bindgen]
pub fn add_two(value: i32) -> i32{
    let value2 = add_one(value);
    add_one(value2)
}

$ vim index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WASM add_two Demo</title>
</head>
<body>
    <h1 id="output">Loading...</h1>

    <script type="module">
    import init, { add_two } from "./wasm_add.js";

    async function run() {
      await init(); // wasm を初期化
      const result = add_two(3); // Rust の関数呼び出し
      document.getElementById("output").textContent = `Result: ${result}`;
    }

    run();
    </script>
</body>
</html>

$ wasm-pack build --target web

/home/ユーザー名/mod_wasm-main/pkg

ディレクトリにできますので、
これを
私の構築では、/var/www/wasm に入れたら良いです(たぶん、全部入れたら安心)

ここをクリックすると他の技術投稿の目次に行きます

UbuntuLinux24.04LTSとWebAssemblyモジュールの構築(2025/08/08記載)