企业官网建设流程全解析

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/<port>with a path” 小节描述的正是这个场景：通过absproxy提供应用，同时 code-server 本身部署在域名中非根路径的位置。

为什么子路径部署下 absproxy 需要单独配置

code-server 内置的路径代理有两种形式（见 docs/guide.md “Accessing web services” 部分）：

• /proxy/<port>：code-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-app（React）

必须使用/absproxy/<port>，并通过$PUBLIC_URL告知create-react-app服务路径、通过$WDS_SOCKET_PATH告知 webpack socket 路径：

PUBLIC_URL=/absproxy/3000 \ WDS_SOCKET_PATH=$PUBLIC_URL/sockjs-node \ BROWSER=none yarn start

Vue

1. 添加vue.config.js
2. 数值按下面修改（端口可用任意空闲端口）：

module.exports = { devServer: { port: 3454, sockPath: "sockjs-node", }, publicPath: "/absproxy/3454", }

Angular

1. 在src/index.html中使用<base href="./.">
2. 在package.json的ng serve命令中加入--serve-path /absproxy/4200

Svelte

如果没有svelte.config.js则新建一个，并将配置改为（端口可用任意空闲端口）：

const config = { kit: { paths: { base: "/absproxy/5173", }, }, }

验证：访问代理后的应用

文档的验证方式是直接打开访问路径，看到应用通过 code-server 被暴露出来。访问路径模板为<code-server-root>/absproxy/<port>，文档示例为http://localhost:8080/absproxy/3454（code-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