code-server使用proxy快速预览

Code-Server 快速预览指南：开发与构建双场景

在使用 Code-Server 进行远程开发时，若需在外网快速预览项目效果，可借助其自带的端口代理服务实现。以下分开发热更新预览和构建打包后预览两种场景详细说明。

---

一、开发过程中预览（支持热更新）

此场景适用于开发阶段，利用项目自带的热更新能力，实时查看代码修改效果。

步骤 1：启动本地开发服务

在项目根目录下执行启动命令：

npm run dev

步骤 2：确认内网服务地址

启动成功后，终端会输出内网访问地址，例如：

VITE v5.0.0  ready in 500 ms

➜  Local:   http://127.0.0.1:3010/
➜  Network: use --host to expose

记录下端口号（本例为 3010）。

步骤 3：通过 Code-Server 代理在外网访问

Code-Server 提供了统一的代理路径规则，只需将内网端口映射到外网路径即可：

https://你的Code-Server域名/code/proxy/3010

说明：将路径末尾的 3010 替换为你实际的开发服务端口，即可在外网浏览器中实时预览开发效果，且支持热更新。

---

二、构建打包后预览

此场景适用于验证生产构建产物的效果，需借助静态文件服务工具。

步骤 1：全局安装 http-server

http-server 是一个轻量级的 Node.js 静态文件服务工具，用于快速托管构建产物：

npm install -g http-server

步骤 2：进入构建产物目录并启动服务

假设项目构建产物输出在 dist 目录下：

# 进入构建产物目录
cd path/to/your/dist

# 启动静态服务，指定端口为 4000（可自定义）
http-server -p 4000

启动成功后，终端会提示服务已在 http://127.0.0.1:4000 运行。

步骤 3：通过代理在外网访问

同样使用 Code-Server 的代理规则，将端口替换为 4000：

https://你的Code-Server域名/code/proxy/4000

---

三、补充说明

除了使用 Code-Server 自带的代理服务，你也可以通过 Nginx 等反向代理工具自行配置端口转发，实现更灵活的访问控制（如添加身份验证、自定义域名路径等）。

---

关键提示

1. 端口一致性：确保代理路径中的端口与本地启动的服务端口完全一致；
2. 服务存活：预览期间需保持 npm run dev 或 http-server 进程在 Code-Server 终端中运行；
3. 防火墙规则：若无法访问，可检查服务器防火墙是否放行了相关端口（Code-Server 代理通常无需额外放行内网端口）。