Remix Vite部署Kong Gateway时base配置资源路径错误排查

问题场景 #

• Remix版本：2.8.1，Vite版本：5.0.1
• 部署架构：Remix应用运行在Docker容器（IP：10.20.30.40:3000），通过Kong网关映射到mydomain.com/myapp
• 目标部署结构：
  • mydomain.com → 空映射或其他应用
  • mydomain.com/app1 → 10.20.30.40:3000（当前Remix应用）
  • mydomain.com/app2 → 10.20.30.50:3000（其他应用）

现有两种Vite base配置均存在问题：

1. base设为/remix/
   • 本地：所有路由/remix/<routes>和资源/remix/<assets>正常，深层路径如localhost:4000/remix/dashboard/users/internal可正常访问
   • 服务器：路由mydomain.com/myapp/dashboard可访问，但资源路径错误变为mydomain.com/myapp/myapp/assets/<assetfile>，Kong映射路径与Vite base叠加导致重复
2. base设为""或"./"
   • 首页（如localhost:3000/dashboard或mydomain.com/myapp/dashboard）路由和资源正常，资源路径为localhost:3000/assets/<assetfile>或mydomain.com/myapp/assets/<assetfile>
   • 访问深层路径（如localhost:3000/dashboard/users）时，资源路径变为localhost:3000/dashboard/assets/<assetfile>，资源无法找到

当前使用的Vite配置：

export default defineConfig({
  base: "/remix/", // 或base: "",
  ...
  other configs
});

临时方案缺陷：将Kong路径设为/，配合base:/remix/可访问mydomain.com/remix/*，但根路径返回404，且会干扰同域名下其他应用的路由匹配。

解决方案 #

1. 配置Vite的base为Kong映射的子路径 #

将Vite的base设置为Kong实际映射的子路径（比如/app1/，对应目标结构中的mydomain.com/app1），确保资源引用的基础路径和网关映射路径一致。

修改Vite配置：

export default defineConfig({
  base: "/app1/",
  // 保留其他原有配置
});

2. 配置Remix的basename适配子路径 #

在Remix的remix.config.js中添加basename配置，自动为所有路由添加前缀，确保转发过来的请求能匹配到正确的路由：

export default {
  basename: "/app1",
  publicPath: "/app1/build/",
  // 其他原有配置
};

3. 调整Kong网关的路由配置 #

在Kong中配置路由时，确保：

• paths设置为/app1
• strip_path设为false，这样mydomain.com/app1/dashboard的请求会完整转发到http://10.20.30.40:3000/app1/dashboard，和Remix的路由匹配

4. 验证构建结果 #

执行构建后，检查生成的dist/index.html中的资源引用，确认资源路径为/app1/assets/xxx.js这类绝对路径，无论访问哪个深层路由，资源都会从/app1/assets/加载，不会出现路径错误。

原理说明 #

• Vite的base决定了资源文件的基础URL，必须和Kong的映射子路径一致，避免资源路径叠加或跳转错误
• Remix的basename会自动给所有路由、资源引用添加前缀，保证请求路径和应用内部路由匹配
• Kong的strip_path: false确保请求路径完整转发，避免路径截断导致的路由不匹配

内容的提问来源于stack exchange，提问作者A-SM