Ubuntu环境下使用Docker配置反向代理的问题咨询

首先修正一个明显的配置错误：你当前Apache配置的反向代理前缀是/tutorials，但对外访问路径是/tutorial，两边前缀不匹配，这是触发404的直接原因之一，需先将两边路径前缀统一为同一个值，比如统一为/tutorial。

问题根源 #

该教程站项目默认适配根路径部署，所有静态资源、前端路由规则在构建阶段就硬编码了根路径前缀，仅手动修改index.html的base标签无法覆盖js、css文件内的路径规则，因此会出现首页加载正常但后续资源404的问题。

可选解决方案（按实施成本从低到高排序） #

方案1：二级域名部署（零代码改动，优先推荐）

如果域名支持新增二级域名，直接配置tutorial.abc.xyz.com指向服务器，Apache反向代理直接配置根路径即可，无需修改任何项目代码：

<VirtualHost *:80>
    ServerName tutorial.abc.xyz.com
    ProxyPass / http://10.35.34.35:8000/
    ProxyPassReverse / http://10.35.34.35:8000/
</VirtualHost>

方案2：Apache自动改写响应路径（无需改动项目代码）

如果只能使用子路径部署，启用Apache的mod_proxy_html模块自动替换上游返回内容中的路径，不需要修改项目源码：

1. 先启用必需的Apache模块：

a2enmod proxy proxy_http proxy_html xml2enc
systemctl restart apache2

2. 替换原有反向代理配置为以下内容：

<Location /tutorial>
    ProxyPass http://10.35.34.35:8000
    ProxyPassReverse http://10.35.34.35:8000
    ProxyHTMLEnable On
    ProxyHTMLURLMap / /tutorial/
    ProxyHTMLCharsetOut *
    RequestHeader set Accept-Encoding ""
</Location>

该配置会自动把上游服务返回的所有根路径资源链接替换为带/tutorial前缀的路径，完美适配子路径访问。

方案3：修改构建参数（永久适配子路径部署）

如果需要长期固定部署在/tutorial子路径下，直接修改项目构建参数一次性解决：

1. 构建项目时传入PATH_PREFIX环境变量指定路径前缀：

PATH_PREFIX=/tutorial yarn build

2. 取消你之前手动修改的index.html base标签配置，构建完成后所有静态资源、前端路由路径都会自动带上/tutorial前缀，配合基础的反向代理配置即可正常运行。

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