10장: WebAssembly 타겟

# wasm-pack 설치
cargo install wasm-pack
 
# 프로젝트 생성
cargo new --lib wasm-utils
cd wasm-utils

[package]
name = "wasm-utils"
version = "0.1.0"
edition = "2024"
 
[lib]
crate-type = ["cdylib", "rlib"]
 
[dependencies]
wasm-bindgen = "0.2"
serde = { version = "1", features = ["derive"] }
serde-wasm-bindgen = "0.6"
js-sys = "0.3"
web-sys = { version = "0.3", features = ["console"] }

use wasm_bindgen::prelude::*;
use serde::{Deserialize, Serialize};
 
// JavaScript에서 호출 가능한 함수
#[wasm_bindgen]
pub fn validate_email(email: &str) -> bool {
    // 간단한 이메일 검증 로직
    let parts: Vec<&str> = email.split('@').collect();
    if parts.len() != 2 {
        return false;
    }
    let domain_parts: Vec<&str> = parts[1].split('.').collect();
    !parts[0].is_empty() && domain_parts.len() >= 2 && domain_parts.iter().all(|p| !p.is_empty())
}
 
#[wasm_bindgen]
pub fn calculate_price(base_price: f64, quantity: u32, discount_percent: f64) -> f64 {
    let subtotal = base_price * quantity as f64;
    let discount = subtotal * (discount_percent / 100.0);
    (subtotal - discount).max(0.0)
}
 
// 구조체를 JS로 노출
#[wasm_bindgen]
#[derive(Serialize, Deserialize)]
pub struct ValidationResult {
    valid: bool,
    errors: Vec<String>,
}
 
#[wasm_bindgen]
impl ValidationResult {
    #[wasm_bindgen(getter)]
    pub fn valid(&self) -> bool {
        self.valid
    }
 
    #[wasm_bindgen(getter)]
    pub fn errors(&self) -> Vec<String> {
        self.errors.clone()
    }
}
 
#[wasm_bindgen]
pub fn validate_user_input(name: &str, email: &str, age: u32) -> ValidationResult {
    let mut errors = Vec::new();
 
    if name.is_empty() || name.len() > 100 {
        errors.push("이름은 1-100자여야 합니다".to_string());
    }
 
    if !validate_email(email) {
        errors.push("유효한 이메일 주소를 입력하세요".to_string());
    }
 
    if age < 1 || age > 150 {
        errors.push("나이는 1-150 사이여야 합니다".to_string());
    }
 
    ValidationResult {
        valid: errors.is_empty(),
        errors,
    }
}

# npm 패키지로 빌드
wasm-pack build --target web --out-dir pkg
 
# 생성 파일:
# pkg/wasm_utils_bg.wasm  — Wasm 바이너리
# pkg/wasm_utils.js        — JS 글루 코드
# pkg/wasm_utils.d.ts      — TypeScript 타입 정의
# pkg/package.json         — npm 패키지 메타데이터

<script type="module">
  import init, { validate_email, calculate_price, validate_user_input } from './pkg/wasm_utils.js';
 
  async function main() {
    await init();
 
    // 이메일 검증
    console.log(validate_email('user@example.com')); // true
    console.log(validate_email('invalid'));            // false
 
    // 가격 계산
    const price = calculate_price(10000, 3, 15);
    console.log(`최종 가격: ${price}원`); // 25500원
 
    // 사용자 입력 검증
    const result = validate_user_input('Alice', 'alice@example.com', 25);
    console.log(`유효: ${result.valid}`);
    console.log(`오류: ${result.errors}`);
  }
 
  main();
</script>

rustup target add wasm32-wasip1

fn main() {
    println!("WASI에서 실행 중!");
 
    // 환경 변수 접근
    if let Ok(value) = std::env::var("MY_CONFIG") {
        println!("설정: {}", value);
    }
 
    // 파일 시스템 접근 (샌드박스 내에서)
    let data = std::fs::read_to_string("/data/input.txt")
        .unwrap_or_else(|_| "파일 없음".to_string());
    println!("데이터: {}", data);
}

# 빌드
cargo build --target wasm32-wasip1 --release
 
# Wasmtime으로 실행
wasmtime target/wasm32-wasip1/release/myapp.wasm
 
# 파일 시스템 디렉토리 매핑
wasmtime --dir /data::./local_data target/wasm32-wasip1/release/myapp.wasm

# Spin CLI 설치
curl -fsSL https://developer.fermyon.com/downloads/install.sh | bash
 
# Rust HTTP 핸들러 프로젝트 생성
spin new -t http-rust my-spin-app
cd my-spin-app

use spin_sdk::http::{IntoResponse, Request, Response};
use spin_sdk::http_component;
use serde::Serialize;
 
#[derive(Serialize)]
struct HealthResponse {
    status: String,
    runtime: String,
}
 
#[http_component]
fn handle_request(req: Request) -> anyhow::Result<impl IntoResponse> {
    let path = req.uri().path();
 
    match path {
        "/health" => {
            let body = serde_json::to_string(&HealthResponse {
                status: "healthy".to_string(),
                runtime: "spin-wasm".to_string(),
            })?;
 
            Ok(Response::builder()
                .status(200)
                .header("content-type", "application/json")
                .body(body)
                .build())
        }
        "/api/validate" => {
            // 요청 본문에서 데이터 추출
            let body = req.body();
            let input: serde_json::Value = serde_json::from_slice(body)?;
 
            let name = input["name"].as_str().unwrap_or("");
            let valid = !name.is_empty() && name.len() <= 100;
 
            let response = serde_json::json!({
                "valid": valid,
                "field": "name",
            });
 
            Ok(Response::builder()
                .status(200)
                .header("content-type", "application/json")
                .body(response.to_string())
                .build())
        }
        _ => {
            Ok(Response::builder()
                .status(404)
                .body("Not Found")
                .build())
        }
    }
}

spin_manifest_version = 2
 
[application]
name = "my-spin-app"
version = "0.1.0"
 
[[trigger.http]]
route = "/..."
component = "my-spin-app"
 
[component.my-spin-app]
source = "target/wasm32-wasip1/release/my_spin_app.wasm"
[component.my-spin-app.build]
command = "cargo build --target wasm32-wasip1 --release"

# 빌드 및 실행
spin build
spin up
 
# 테스트
curl http://localhost:3000/health
curl -X POST http://localhost:3000/api/validate \
  -H "Content-Type: application/json" \
  -d '{"name": "Alice"}'

workspace/
  Cargo.toml           # 워크스페이스 루트
  shared/              # 공유 비즈니스 로직
    Cargo.toml
    src/lib.rs
  server/              # Axum 서버
    Cargo.toml
    src/main.rs
  wasm-client/         # 브라우저 Wasm
    Cargo.toml
    src/lib.rs

[workspace]
members = ["shared", "server", "wasm-client"]
resolver = "2"

use serde::{Deserialize, Serialize};
 
#[derive(Debug, Clone, Serialize, Deserialize)]
pub struct Order {
    pub items: Vec<OrderItem>,
    pub coupon_code: Option<String>,
}
 
#[derive(Debug, Clone, Serialize, Deserialize)]
pub struct OrderItem {
    pub product_id: String,
    pub quantity: u32,
    pub unit_price: f64,
}
 
#[derive(Debug, Clone, Serialize, Deserialize)]
pub struct OrderSummary {
    pub subtotal: f64,
    pub discount: f64,
    pub tax: f64,
    pub total: f64,
}
 
// 이 함수는 서버와 브라우저 모두에서 동일하게 실행됨
pub fn calculate_order(order: &Order) -> OrderSummary {
    let subtotal: f64 = order
        .items
        .iter()
        .map(|item| item.unit_price * item.quantity as f64)
        .sum();
 
    let discount = match order.coupon_code.as_deref() {
        Some("WELCOME10") => subtotal * 0.10,
        Some("VIP20") => subtotal * 0.20,
        _ => 0.0,
    };
 
    let taxable = subtotal - discount;
    let tax = taxable * 0.10; // 10% 부가세
 
    OrderSummary {
        subtotal,
        discount,
        tax,
        total: taxable + tax,
    }
}
 
pub fn validate_order(order: &Order) -> Result<(), Vec<String>> {
    let mut errors = Vec::new();
 
    if order.items.is_empty() {
        errors.push("주문 항목이 비어 있습니다".to_string());
    }
 
    for (i, item) in order.items.iter().enumerate() {
        if item.quantity == 0 {
            errors.push(format!("항목 {}의 수량은 0보다 커야 합니다", i + 1));
        }
        if item.unit_price < 0.0 {
            errors.push(format!("항목 {}의 가격은 음수일 수 없습니다", i + 1));
        }
    }
 
    if errors.is_empty() {
        Ok(())
    } else {
        Err(errors)
    }
}

[profile.release]
opt-level = "z"      # 크기 최적화 (속도보다 크기 우선)
lto = true           # 링크 타임 최적화
codegen-units = 1    # 단일 코드 생성 유닛 (더 나은 최적화)
strip = true         # 디버그 심볼 제거
panic = "abort"      # 패닉 시 unwind 대신 abort (바이너리 크기 감소)

# wasm-opt로 추가 최적화 (binaryen 패키지)
wasm-opt -Oz -o output.wasm input.wasm
 
# 크기 확인
ls -lh pkg/*.wasm
 
# 크기 분석
cargo install twiggy
twiggy top pkg/wasm_utils_bg.wasm