Rust + WebAssembly 生产部署指南

1 · 最小可行部署（MVP）

1. 前端打包

   wasm-pack build --target web --release      # 生成 .wasm + JS 包装器  
   npm run build / vite build / webpack …       # 打包 HTML/CSS/JS 资源
   

2. 拷贝产物 到生产服务器的站点目录

   dist/
   ├── index.html
   ├── pkg/
   │   ├── my_app_bg.wasm
   │   └── my_app.js
   └── assets/…
   

3. 配置 HTTP 服务器（Nginx / Apache / …）确保：
   • 正确的 Content‑Type: application/wasm
   • gzip / brotli 压缩（Wasm 可再减 ~‑50 %）
   • 长效缓存（ETag 或 immutable hash 文件名）

2 · 为什么必须设置 application/wasm？

浏览器的 WebAssembly.instantiateStreaming 会在网络下载的同时编译 Wasm —— 前提 是服务器返回头部 Content‑Type: application/wasm。
否则它会回退到 fetch + ArrayBuffer，不仅额外一次内存拷贝，还失去编译/下载流水线带来的启动提速。

3 · Nginx 示例

http {
    include       mime.types;
    types {
        application/wasm wasm;   # <‑‑ 新增
    }

    gzip            on;          # 建议同时开启 brotli
    gzip_types      application/wasm;

    server {
        listen 80;
        root /var/www/my_site/dist;
        location / {
            try_files $uri $uri/ =404;
        }
        # 高优缓存策略（可选）
        location ~* \.wasm$ {
            add_header Cache-Control "public, max-age=31536000, immutable";
        }
    }
}

4 · Apache 示例（两种方式）

4.1 修改全局 /etc/mime.types

application/wasm   wasm

然后 sudo systemctl restart apache2。

4.2 站点级 .htaccess

<FilesMatch "\.wasm$">
  AddType application/wasm .wasm
  # 强缓存
  Header set Cache-Control "max-age=31536000, public, immutable"
</FilesMatch>

5 · 加速技巧

6 · 持续集成到持续部署（CI/CD）

name: build‑and‑deploy
on:
  push:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions-rs/toolchain@v1
        with:
          toolchain: stable
          target: wasm32-unknown-unknown
      - run: wasm-pack build --release --target web
      - run: npm ci && npm run build
      - uses: actions/upload-artifact@v4
        with: { name: dist, path: dist }

  deploy:
    needs: build
    runs-on: ubuntu-latest
    environment: production
    steps:
      - uses: actions/download-artifact@v4
        with: { name: dist, path: ./dist }
      # 示例：推送到 Nginx 服务器
      - run: rsync -avz ./dist/ user@server:/var/www/my_site/

• cargo check --target wasm32-unknown-unknown 放在 build 阶段，确保每次 PR 都维持可编译状态。
• 完整端到端测试可用 wasm-pack test --node 或 --headless 结合 Puppeteer/Cypress。

7 · 常见“跑不动”排查清单

1. 浏览器控制台报 “MIME type incorrect”
   → 确认服务器确实返回 Content-Type: application/wasm。
2. 跨域 CORS 错误
   → .wasm 与 .js 静态资源同源最省事；否则设置 Access‑Control‑Allow‑Origin。
3. 文件路径 404
   → 构建工具（Vite/Webpack/Rollup）别忘了 publicPath 或 base 选项。
4. Worker/Service Worker 加载失败
   → Worker 脚本也需要正确 MIME (text/javascript)；Wasm 可用 instantiateStreaming 内嵌或预加载。

参考

• Nginx 配置 MIME‑TYPE 示例
• Apache 为 Wasm 添加 application/wasm 示例
• 另一份通用 MIME 文件修改笔记（适用于 Apache & Nginx）

部署 Rust + Wasm 的思路其实与任何现代前端项目别无二致：产物静态托管 + 正确 MIME + 压缩缓存。只要把握这三点，你就能让基于 Rust 的高性能 Web 应用在生产环境中飞速加载、稳定运行。祝部署顺利，用户体验拉满！