code-server 部署在子路径时如何用 --abs-proxy-base-path 代理 Web 应用【免费下载链接】code-serverVS Code in the browser项目地址: https://gitcode.com/GitHub_Trending/co/code-server当 code-server 没有部署在域名根路径而是挂在某个子路径下例如mydomain.com/code或my-code-server.com/user/123/workspace你仍然可以用它内置的/absproxy/port代理把同机本地端口上的 Web 应用暴露出去——但需要额外告诉 code-server 它所处的子路径即--abs-proxy-base-path参数。官方文档 docs/guide.md 的 “Prefixing/absproxy/portwith a path” 小节描述的正是这个场景通过absproxy提供应用同时 code-server 本身部署在域名中非根路径的位置。为什么子路径部署下 absproxy 需要单独配置code-server 内置的路径代理有两种形式见 docs/guide.md “Accessing web services” 部分/proxy/portcode-server 会把/proxy/port从请求路径中剥掉再转发。应用使用相对 URL 即可不需要知道自己被部署在哪个绝对路径下/absproxy/port路径原样透传例如/absproxy/3000/my-app-path被代理的应用必须知道自己被部署在哪个路径下需要你在应用里显式配置 serve path。有些框架只能用/absproxy/port——文档明确说明create-react-app必须使用/absproxy/port并要通过环境变量告知它实际的服务路径。当 code-server 自身又位于子路径下时--abs-proxy-base-path负责把这些子路径前缀加到所有 absproxy 请求上它在命令行定义中的描述是 “The base path to prefix to all absproxy requests”见 src/node/cli.ts。路由实现中该参数只传给/absproxy/:port的 HTTP 与 WebSocket 路由见 src/node/routes/index.ts因此它只影响 absproxy 这条路径。第一步把 code-server 挂到子路径如果你的反向代理是 Caddy文档给出的子路径配置如下mydomain.com需替换为你的域名mydomain.com/code/* { uri strip_prefix /code reverse_proxy 127.0.0.1:8080 }然后重载 Caddy该命令会使 Caddy 重新加载配置并短暂应用新规则需要 root 权限sudo systemctl reload caddy此时 code-server 通过https://mydomain.com/code访问。--abs-proxy-base-path要填的值就是这一段子路径本例中为/code。使用 NGINX 等其他反向代理时同理以浏览器看到的 code-server 子路径为准。第二步启动 code-server 并加上 --abs-proxy-base-path启动 code-server 时带上--abs-proxy-base-path开关值设为 code-server 所在的子路径。文档给出的原例是code-server --abs-proxy-base-path/user/123/workspace其中/user/123/workspace应替换为你实际的子路径对应第一步中 Caddy 示例则为--abs-proxy-base-path/code。第三步按框架配置被代理的应用文档给出了四种框架的配置方式serve path 统一写成/absproxy/port端口可使用任意空闲端口create-react-appReact必须使用/absproxy/port并通过$PUBLIC_URL告知create-react-app服务路径、通过$WDS_SOCKET_PATH告知 webpack socket 路径PUBLIC_URL/absproxy/3000 \ WDS_SOCKET_PATH$PUBLIC_URL/sockjs-node \ BROWSERnone yarn startVue添加vue.config.js数值按下面修改端口可用任意空闲端口module.exports { devServer: { port: 3454, sockPath: sockjs-node, }, publicPath: /absproxy/3454, }Angular在src/index.html中使用base href./.在package.json的ng serve命令中加入--serve-path /absproxy/4200Svelte如果没有svelte.config.js则新建一个并将配置改为端口可用任意空闲端口const config { kit: { paths: { base: /absproxy/5173, }, }, }验证访问代理后的应用文档的验证方式是直接打开访问路径看到应用通过 code-server 被暴露出来。访问路径模板为code-server-root/absproxy/port文档示例为http://localhost:8080/absproxy/3454code-server 位于根路径时。在子路径部署下code-server-root就是 code-server 的子路径地址。文档对--abs-proxy-base-path/user/123/workspace场景给出的最终访问示例为http://my-code-server.com/user/123/workspace/my-app文档示例React 场景则验证访问https://my-code-server-address.io/absproxy/3000能看到应用。如果打开后应用页面或静态资源 404优先核对两处--abs-proxy-base-path的值是否与第一步中浏览器实际看到的子路径一致以及应用侧配置的/absproxy/port路径是否与实际端口匹配。限制与注意事项文档对子路径 absproxy 这种方式给出的替代建议是使用子域名方式--proxy-domain domain例如8080.domain.tld原文为 “We highly recommend using the subdomain approach instead to avoid this class of issue.”子路径方案适用于无法配置子域名的场景。启用认证auth时code-server 默认会认证所有被代理的请求包括 preflight 请求而 preflight 请求通常不携带凭证可能造成问题。使用--skip-auth-preflight可让所有 preflight 请求不经过认证直接通过代理。扩展与端口面板想使用自己的代理时可设置VSCODE_PROXY_URI支持相对路径如./proxy/{{port}}这会替代内置的基于子路径的代理行为与本文的 absproxy 配置属于两条独立路径按需选择其一即可。【免费下载链接】code-serverVS Code in the browser项目地址: https://gitcode.com/GitHub_Trending/co/code-server创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考