Rust WASM : Portage CLI vers le navigateur

Migration d'un outil CLI Rust vers WebAssembly avec déploiement sur GitLab Pages

Une application console pour générer des prédictions textuelles a été portée vers WebAssembly en utilisant Rust. La logique de calcul est isolée dans un module WASM, tandis que l'interface est implémentée sous forme de page HTML statique avec une expérience utilisateur de type terminal. Le déploiement via GitLab Pages permet un accès instantané à la démo sans aucune installation requise.

Le projet comprend une bibliothèque Rust pour la logique principale, un frontend construit avec JavaScript vanilla et CSS, ainsi que les artefacts wasm-pack. Cette approche est idéale pour les utilitaires légers qui n'ont pas besoin d'accès au système de fichiers ou d'API spécifiques à une plateforme.

Architecture du projet

La structure est divisée en trois composants :

• src/lib.rs — Logique principale en Rust avec fonctions exportées.
• public/index.html, styles.css, app.js — Interface de style terminal.
• public/pkg/ — Fichiers WASM compilés et wrappers JavaScript.

L'absence de dépendances au système d'exploitation rend le portage simple : l'application accepte des commandes et renvoie du texte.

Exportation de Rust vers WASM

La fonction principale est exportée en utilisant #[wasm_bindgen] :

#[wasm_bindgen]
pub fn generate_reading_text() -> String {
    // Générer et formater le résultat
}

Construction avec la commande :

wasm-pack build --target no-modules --release --out-dir public/pkg

Résultat : iching_wasm.js et iching_wasm_bg.wasm. L'option --target no-modules simplifie l'intégration sans bundlers.

Intégration de WASM dans le navigateur

Dans app.js, le module est chargé de manière synchrone avec le WASM intégré en base64 pour fonctionner avec file:// :

const wasmBytes = base64ToBytes(window.ICHING_WASM_BASE64);
wasm_bindgen.initSync({ module: wasmBytes });

const text = wasm_bindgen.generate_reading_text();
output.textContent = text;

Dans index.html, les éléments suivants sont inclus :

• ./pkg/iching_wasm.js — Runtime.
• ./pkg/iching_wasm_bg_base64.js — WASM en base64.
• app.js — Logique de l'interface utilisateur.

JavaScript appelle WASM, et le résultat est rendu dans le DOM.

Interface utilisateur de style terminal

Interface sans framework :

• Conteneur avec bordure et titre de fenêtre.
• Police à chasse fixe (par exemple, JetBrains Mono).
• Thème sombre avec texte vert.
• <pre> pour la sortie.
• Entrée pour les commandes comme ./generate_reading.

Imite visuellement et comportementalement une console. Un bouton déclenche l'appel WASM.

CI/CD pour la construction et le déploiement

.gitlab-ci.yml automatise le processus :

image: rust:slim

create-pages:
  pages:
    publish: public
  rules:
    - if: '$CI_COMMIT_REF_NAME == $CI_DEFAULT_BRANCH'
  before_script:
    - rustup target add wasm32-unknown-unknown
    - cargo install wasm-pack --locked
  script:
    - wasm-pack build --target no-modules --release --out-dir public/pkg
    - b64="$(base64 public/pkg/iching_wasm_bg.wasm | tr -d '\n')"
    - printf 'window.ICHING_WASM_BASE64 = "%s";\n' "$b64" > public/pkg/iching_wasm_bg_base64.js

Étapes : installer la cible, construire avec wasm-pack, encoder WASM en base64, publier public/ sur Pages.

Avantages de cette approche

• Accessibilité : La démo fonctionne dans n'importe quel navigateur sans Rust ou installation locale.
• Sécurité : L'isolation WASM élimine les risques du code natif.
• Simplicité : Hébergement statique, un seul job CI.
• Portabilité : Adapté aux outils CLI sans appels système.

Points clés à retenir

• La logique sans dépendances au système de fichiers ou aux API s'intègre parfaitement dans WASM — construction en quelques secondes.
• L'intégration en base64 de WASM résout les problèmes CORS et file://.
• GitLab Pages + wasm-pack CI fournit un pipeline prêt à l'emploi pour les prototypes.
• JavaScript/HTML vanilla pour l'interface utilisateur minimise la surcharge.
• #[wasm_bindgen] est la norme pour exporter Rust vers JavaScript.

— Editorial Team