如何在树莓派上托管WASM文件并公网部署Blazor WebAssembly应用

1. 本地发布文件传输到树莓派 #

首先确认Visual Studio发布生成的Release文件夹完整，包含wwwroot子目录和所有依赖文件，选以下任意一种方式传输即可：

• 同局域网下用系统自带scp传输：Windows打开PowerShell、macOS/Linux打开终端，执行命令：
  scp -r "你本地发布的Release文件夹完整路径" pi@树莓派内网IP:/home/pi/blazor-app
  执行后输入树莓派pi用户的密码，等待文件传输完成即可。
• 图形化传输：同局域网下用SFTP类工具，连接树莓派的22端口（账号pi、对应密码），直接把本地Release文件夹的所有内容拖拽上传到树莓派/home/pi/blazor-app目录下。

2. 树莓派本地静态服务配置 #

Blazor WebAssembly是纯前端静态应用，不需要在树莓派安装.NET运行时，用Nginx做静态托管即可：

1. 安装Nginx
   树莓派连接SSH后执行命令：
   sudo apt update && sudo apt install nginx -y
2. 修改Nginx站点配置
   执行命令打开默认站点配置文件：
   sudo nano /etc/nginx/sites-available/default
   清空文件原有内容，替换为以下配置：

   server {
       listen 80 default_server;
       listen [::]:80 default_server;
       root /home/pi/blazor-app/wwwroot;
       index index.html;
   
       # 处理Blazor前端路由，避免子页面刷新404
       location / {
           try_files $uri $uri/ /index.html;
       }
   
       # 补全WASM文件MIME类型，避免资源加载失败
       types {
           application/wasm wasm;
           application/dll dll;
           application/json json;
       }
   }
   

   按Ctrl+O回车保存，再按Ctrl+X退出编辑器。
3. 配置目录权限并重启服务
   给Nginx运行账号授予站点目录读取权限：
   sudo chown -R www-data:www-data /home/pi/blazor-app/
   校验Nginx配置合法性：
   sudo nginx -t
   终端输出test is successful后，重启Nginx生效：
   sudo systemctl restart nginx
   配置Nginx开机自启，避免树莓派重启后服务失效：
   sudo systemctl enable nginx
   这一步完成后，同局域网内任意设备访问树莓派内网IP，就能正常打开Blazor应用。

3. 公网访问配置 #

根据你家宽带的网络情况选对应方案：

• 宽带有公网IP（可联系运营商确认开通）：
  1. 登录家里的光猫/路由器管理后台，配置端口映射：将公网端口（可选80、443或其他高位端口，注意部分运营商会封禁家用宽带80/443端口）映射到树莓派内网IP的80端口。
  2. 如果有自有域名，将域名A/AAAA记录解析到你家的公网IP即可；如果是动态公网IP，在树莓派安装DDNS客户端定时更新解析记录即可。需要HTTPS的话可以在Nginx里配置SSL证书。
• 宽带无公网IP：
  用内网穿透方案，在树莓派上部署内网穿透客户端，将本地80端口映射到公网隧道，通过穿透服务分配的公网地址即可访问应用。

常见问题排查 #

• 打开页面白屏：先检查传输的文件是否完整，确认wwwroot/_framework目录存在；再检查Nginx配置里的站点根路径是否正确指向wwwroot目录。
• 控制台报wasm/dll文件加载错误：确认Nginx配置里补全了对应的MIME类型，同时检查站点目录权限是否配置正确。
• 子页面刷新404：确认Nginx里配置了try_files $uri $uri/ /index.html;路由回退规则。
• 公网访问超时：检查路由器端口映射规则是否生效，树莓派防火墙是否放行80端口，公网IP是否和路由器出口IP一致。

内容的提问来源于stack exchange，提问作者Sreehan