Nginx反向代理SolidJS应用至子目录遇路径问题求助

1. 先配置SolidJS应用的基础路径 #

SolidJS（基于Vite构建）默认以根路径/作为资源基准，必须先修改应用配置，让它适配子目录运行环境：

在项目根目录的vite.config.js中添加base配置：

import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';

export default defineConfig({
  plugins: [solidPlugin()],
  base: '/myapp/', // 关键：设置应用的基础路径为目标子目录
  build: {
    target: 'esnext',
  },
});

修改后重新构建应用：

npm run build

2. Nginx反向代理配置 #

以下是适配子目录的完整Nginx配置，覆盖生产/开发场景，包含SPA路由、静态资源、WebSocket支持：

server {
    listen 443 ssl;
    server_name example.com;

    # SSL证书配置（替换为你的实际证书路径）
    ssl_certificate /path/to/your/cert.pem;
    ssl_certificate_key /path/to/your/privkey.pem;

    # 生产环境：直接托管SolidJS构建后的静态资源
    location /myapp/ {
        root /path/to/your/solidjs-app/dist;
        try_files $uri $uri/ /myapp/index.html; # 处理SPA路由刷新404问题
    }

    # 开发环境：反向代理到本地3000端口的开发服务（保留HMR支持）
    location /myapp/ {
        rewrite ^/myapp/(.*)$ /$1 break;
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # 强制HTTP跳转HTTPS
    listen 80;
    server_name example.com;
    return 301 https://$server_name$request_uri;
}

配置说明 #

• 静态资源托管：生产环境建议直接让Nginx托管dist目录，比反向代理更高效；开发环境则保留代理以支持热更新。
• SPA路由 fallback：try_files规则确保SolidJS客户端路由刷新时不会返回404。
• WebSocket支持：proxy_http_version及相关头配置用于适配开发时的热模块替换（HMR），生产环境可移除，但不影响功能。

排查要点 #

• 静态资源404：检查SolidJS构建后的资源路径是否以/myapp/开头，确认vite.config.js的base配置生效。
• 页面空白：打开浏览器控制台查看资源加载错误，通常是路径不匹配导致。
• API请求失败：检查rewrite规则是否正确转发了请求路径，确保后端服务能接收到正确的请求地址。

内容的提问来源于stack exchange，提问作者S. Yong