WASM 边缘计算与 CDN 落地实践

name = "edge-image-processor"
main = "src/index.js"
compatibility_date = "2026-09-01"

# 方式一：wasm 模块绑定
[wasm_modules]
image_proc = "./image_proc.wasm"

import imageProc from "./image_proc.wasm";   // 通过 [wasm_modules] 绑定

export default {
  async fetch(request, env, ctx) {
    const url = new URL(request.url);
    if (url.pathname.startsWith("/resize")) {
      const bytes = await request.arrayBuffer();
      const { width, height } = Object.fromEntries(url.searchParams);
      // 调用 WASM 模块：重设尺寸 + 转 WebP
      const result = imageProc.resize(
        new Uint8Array(bytes),
        parseInt(width), parseInt(height),
      );
      return new Response(result, {
        headers: { "content-type": "image/webp" },
      });
    }
    return new Response("Edge WASM running", { status: 200 });
  },
};

// 编译目标：wasm32-unknown-unknown，配合 wasm-bindgen
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn resize(data: &[u8], width: u32, height: u32) -> Vec<u8> {
    // 用 image 库解码 → 重采样 → 编码 WebP/JPEG
    let img = image::load_from_memory(data).unwrap();
    let resized = img.resize(width, height, image::imageops::FilterType::Lanczos3);
    let mut out = Vec::new();
    resized.write_to(&mut std::io::Cursor::new(&mut out), image::ImageFormat::WebP).unwrap();
    out
}

npx wrangler login
npx wrangler deploy
# 输出：https://edge-image-processor.<你的子域>.workers.dev
# 全球 300+ PoP 自动生效，无需关心基础设施

# 安装并初始化（内部就是 wasm32-wasip1 + wasi-http）
fastly compute init
fastly compute serve    # 本地开发
fastly compute deploy   # 部署到边缘

// src/main.rs —— 使用 fastly 官方 crate（基于 wasi-http）
use fastly::{Request, Response, Error};
use fastly::http::StatusCode;

#[fastly::main]
fn main(req: Request) -> Result<Response, Error> {
    let path = req.get_path();

    match path.as_str() {
        "/hello" => {
            Ok(Response::from_status(StatusCode::OK)
                .with_body_text_plain("Hello from Fastly Compute (WASM)!"))
        }
        "/status" => {
            // 边缘健康检查
            Ok(Response::from_json(&serde_json::json!({
                "status": "ok",
                "pop": env!("FASTLY_POP", ""),
            }))?)
        }
        _ => Ok(Response::from_status(StatusCode::NOT_FOUND)
            .with_body_text_plain("Not found")),
    }
}

// 边缘（Worker/边缘函数）加载 ONNX 模型做推理
import * as ort from "onnxruntime-web";

const session = await ort.InferenceSession.create("./model.onnx", {
  executionProviders: ["wasm"],       // 或 ["webgpu"]
  graphOptimizationLevel: "all",
});

const tensor = new ort.Tensor("float32", floatArray, [1, 224, 224, 3]);
const results = await session.run({ input: tensor });
// 结果在几十毫秒内返回，无需回源 GPU 集群

# wasmcloud.yaml —— 应用描述
apiVersion: core.oam.dev/v1beta1
kind: Application
metadata:
  name: edge-gateway
spec:
  components:
    - name: gateway
      type: actor
      properties:
        image: ghcr.io/wasmcloud/gateway:v0.1.0   # WASM actor 镜像
      traits:
        - type: spreadscaler
          properties:
            replicas: 50           # 边缘多节点分布
        - type: linkdef
          properties:
            target: wasmcloud:httpserver
            values:
              address: "0.0.0.0:8080"
    - name: redis-provider
      type: capability
      properties:
        image: wasmcloud.azurecr.io/redis:latest

wash up                            # 启动本地 lattice
wash app deploy wasmcloud.yaml     # 部署应用
wash app list                      # 查看边缘分布