远程服务器Docker化Vite应用：Apache反向代理HTTPS访问问题求助

1. 确认Vite项目Base URL配置 #

确保vite.config.js中已正确设置子路径作为base，注意末尾斜杠：

// vite.config.js
export default {
  base: '/project_name/',
  // 其他原有配置
}

重新构建项目后，dist目录内的资源路径会自动带上/project_name/前缀。

2. 调整Docker内的Nginx配置 #

修改Nginx配置以适配子路径，确保单页应用路由和静态资源正常加载：

server {
    listen 80;
    server_name localhost;

    location /project_name/ {
        root /usr/share/nginx/html;
        index index.html;
        # 适配单页应用路由，找不到文件时返回项目根index.html
        try_files $uri $uri/ /project_name/index.html;
    }

    # 静态资源缓存优化（可选）
    location /project_name/assets/ {
        root /usr/share/nginx/html;
        expires 30d;
        add_header Cache-Control "public, immutable";
    }
}

修改后重启Docker容器，验证http://[server-ip]:3000/project_name/仍可正常访问。

3. 修正Apache反向代理配置（HTTPS虚拟主机） #

先启用必要模块 #

a2enmod proxy proxy_http proxy_html rewrite ssl

在HTTPS虚拟主机中添加代理规则 #

找到你的域名SSL配置文件（通常路径为/etc/apache2/sites-available/[domain]-le-ssl.conf），添加以下内容：

<VirtualHost *:443>
    ServerName [domain].com

    # 反向代理规则
    ProxyPass /project_name http://127.0.0.1:3000/project_name
    ProxyPassReverse /project_name http://127.0.0.1:3000/project_name

    # 修正Cookie路径（可选，避免跨路径Cookie问题）
    ProxyPassReverseCookiePath /project_name /project_name

    # 原有SSL证书配置
    SSLCertificateFile /path/to/fullchain.pem
    SSLCertificateKeyFile /path/to/privkey.pem
</VirtualHost>

重启Apache生效 #

systemctl restart apache2

4. 验证流程 #

1. 测试本地端口访问：http://[server-ip]:3000/project_name/ 确认应用正常
2. 测试HTTPS子路径访问：https://[domain].com/project_name/，检查静态资源加载、页面路由跳转（刷新页面无404）是否正常

常见问题排查 #

• 静态资源404：检查Vite的base配置是否与Nginx的location路径完全匹配
• 代理返回503：确认Apache代理模块已启用，且服务器本地能通过curl http://127.0.0.1:3000/project_name访问应用
• 路由刷新404：检查Nginx的try_files规则是否指向/project_name/index.html

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