LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@FUKUTAKA7938(FUKUTAKA)

AlmaLinux10.0とapache2.4とmod_wasm(WebAssemblyモジュール)の構築(2025/08/02修正)

Last updated at Posted at 2025-07-20

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

AlmaLinux10.0とapache2.4とmod_wasm(WebAssemblyモジュール)の構築(2025/08/02修正)

＊あくまでも構築の参考として見てください

OS : macOS 15.5
仮想システム: UTM 4.6.5
仮想OS: AlmaLinux 10.0
仮想メモリ: 2GB
SSD: 40GB(多いかもしれません)

mod_wasmモジュール構築までの流れ

  1. apacheサーバのインストール
  2. dockerのインストール
  3. 環境構築(rust、 make等)
  4. mod_wasmソースのダウンロード
  5. mod_wasmソースの今のバージョンに修正
  6. モジュールのbuildとインストール
  7. dockerの削除
  8. apacheサーバの設定
  9. セキュリティの設定

という流れになります
*AlmaLinux10.0のインストールは割愛させていただきます
最後の方に、Rustでのサンプルコードを載せています

1. apacheサーバのインストール

基本的なことなので割愛します

2.dockerのインストール(すみません、あまり詳しくはありません)

$sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo
$sudo dnf install -y docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
$sudo systemctl enable --now docker

$sudo docker run hello-world

3. 環境構築(rust make等)

make等のインストール

$sudo dnf groupinstall "Development Tools" -y
$sudo dnf install clang llvm llvm-devel clang-devel cmake -y make gcc gcc-c++ 
$sudo dnf -y install httpd-devel curl openssl-devel git pkg-config

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

$ export PATH="/root/.cargo/bin:${PATH}"
*これは、パスが通っていないときだけしてください

$ . ~/.bashrc

4. mod_wasmソースのダウンロード

vmware-labs/mod_wasm(mod_wasmのソースが置いてます)(2025/07/21変更)

からダウンロードしてください

ディレクトリ名は、mod_wasm-mainになると思います
このディレクトリを
/home/ユーザー名
に移しておいてください

5. mod_wasmソースの今のバージョンに修正

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

5-1
まずは、Dockerファイルの修正です

$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

へ

(2025/07/25追加修正)
さらに
RUN apt-get update && apt-get install make
↓
↓
を削除または # を追加

#RUN apt-get update && apt-get install make

Dockerfileの修正はこれで以上です

5-2
wasmライブラリの作成時に必要です
つづいてCヘッダーの修正
これは、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

5-3
現在の仕様は、Debian系のapacheでの設定になってるので
これをRHELクローン関係のインストール設定に変えます

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

HTTPD_DIR="${HTTPD_DIR:-/usr/include/apache2}"
↓
↓

HTTPD_DIR="${HTTPD_DIR:-/usr/include/httpd}"

$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

5-4
つづいて、wasm_rutime.hの変更

*2025/08/02修正

$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

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

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

6-1
いろいろなモジュールを作成

$cd ~/mod_wasm-main
$ sudo make

6-2
ライブラリを作成

$cd ~
$cd ./mod_wasm-main/wasm_runtime
$ cargo build -r

できあがった

$ ./mod_wasm-main/wasm_runtime/target/release

にあります

libwasm_runtime.so

を

/usr/lib64/

へコピー、そして

$sudo ldconfig

を実行(ライブラリを反映させます)

6-2
mod_wasmのインストール

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

できあがったら

~/mod_wasm-main/mod_wasm/modules/wasm/.libs

の中身にある

mod_wasm.so

を

/usr/lib64/httpd/modules/

へコピー
＊mod_wasm-main/mod_wasm/modules/wasm/.libsのディレクトリは隠しファイルになってます

7. dockerの削除

私のマシンでは少し重くなるみたいので、削除します

$sudo systemctl disable --now docker
$sudo dnf remove docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
$sudo rm -rf /var/lib/docker
$sudo rm -rf /var/lib/containerd

8. apacheサーバの設定

8-1
Webアプリを置くためにディレクトリを追加

$cd /var/www
$sudo mkdir wasm

8-2
wasm用のapacheの設定ファイルを追加

$cd /etc/httpd/conf.modules.d

のディレクトリに

$sudo vim 10-wasm.conf

(* 数字を付けてあとは自由にファイル名を設定していいです
この数字で、モジュールファイルを読み込む順番が変わります)

で
10-wasm.confに以下のものを作成

LoadModule wasm_module modules/mod_wasm.so

Listen 8081

<VirtualHost *:8081>
    DocumentRoot /var/www/wasm
</VirtualHost>

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

8080ポートではなく
8081ポートにしてます
＊通常ポートでなくてもできることをお伝えしてます

$ sudo httpd -t

で、構文があってるかチェック

OKなら

$sudo systemctl enable --now httpd

9. セキュリティの設定

9-1
firewalldの設定

sudo firewall-cmd --add-port=8081/tcp --permanent
sudo firewall-cmd --reload

9-2
SELinuxの設定で、semanageコマンドのインストール

$ sudo dnf install policycoreutils-python-utils

$ SELinuxでのポートの設定

$sudo semanage port -a -t http_port_t -p tcp 8081

これは、8081番ポートをWebサーバーで使いますよってことです

$sudo vim /etc/selinux/config 
SELINUX=enforcing

$ sudo reboot

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

一応ここまでが、mod_wasmの設定です
ここからは、Webファイルの構築

なお、いい加減かもしれませんが、今、RustのWebAssemblyを勉強してますので(2025/07/20時点)
Rustでやります

Webサーバ側で、
wasm-packというものをインストールします
$cargo install wasm-pack

WebAssemblyプロジェクトの作成
$cargo new プロジェクト名 --lib
で、libs.csへソースを書き込込みします
最後にRustファイルとhtmlのサンプルコードを載せております

コンパイルを

wasm-pack build --target web

でやればできます

あとは、htmlを構築して、
できたすべてのものを
私が載せたものであれば

/var/www/wasm

の中に入れたら良いです

ちなみに先ほどダウンロードしたmod_wasmのホームページに
PHP8.2.0
python 3.11に対応してるみたいなことが書かれてました

もし、これらでwasmをやりたいなら、ご自身でお調べください

で、ブラウザで、URL:"http://Webサーバーアドレス:8081"でアクセスしてみてください

簡単なサンプルコード(2つ作ってます)

サンプルその1
ボタン形式

$cargo new wasm-hello --lib

$cd ./wasm-hello

$vim Cargo.toml

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

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

[dependencies]
wasm-bindgen = "0.2"

に書き換える

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

#use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
}

use wasm_bindgen::prelude::*;
は一つだけ
そして

#[wasm_bindgen]
を使いたい関数ごとにそれぞれの頭に付けてください
これで、htmlファイルが認識するみたいです

コンパイル

$cd ~/wasm_hello
$wasm-pack build --target web

プロジェクトの内の
pkgディレクトリができます

でもhtmlファイルはできなく、あるもののみ作ります
javascriptファイルがあると思いますが、
このファイルにwasmファイルを読み込む設定がされてます
設定箇所はこのjavascriptファイルで開いて、
作ったRustの関数名で検索かけて確認ができると思います
もち、grepでも大丈夫です
なので、重要なファイルなので消さないようにしてください

では、htmlファイルです
保存箇所は、pkgディレクトリが良いと思います

index.html

#
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Rust WASM Demo</title>
</head>
<body>
    <h1>Rust WebAssembly Test</h1>
    <input id="name" placeholder="Your name" />
    <button onclick="sayHello()">Say Hello</button>
    <p id="result"></p>

    <script type="module">
        import init, { greet } from './wasm_hello.js';

        async function main() {
            await init();
            window.sayHello = () => {
                const name = document.getElementById('name').value;
                const result = greet(name);
                document.getElementById('result').innerText = result;
            };
        }

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

あとは、webサーバの/var/www/wasmディレクトリに、pkgディレクトリの中身をコピー
そして、Webサーバをリスタートさせて、ブラウザで
http://webサーバのドメイン:8081
でアクセスできると思います

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

サンプルその2
これは、ソースだけ載せておきます
内容は、ただ単純にボタンではなく、そのまま表示するやり方です

Cargo.toml

[package]
name = "hello"
version = "0.1.0"
edition = "2024"

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

[dependencies]
wasm-bindgen = "0.2"

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)
}


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 "./hello.js";

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

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

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?