设置Surge代理服务器的步骤如下

1. 安装Surge CLI： 使用npm安装Surge工具。

   npm install -g surge

2. 初始化Surge项目： 在项目根目录下运行以下命令，生成surge.json配置文件。

   surge init

   这会自动创建一个surge.json文件,按照提示填写项目名称和域名信息。

3. 配置域名和项目信息： 打开surge.json文件,确保包含以下内容：

   {
     "project": "your-project-name",
     "domain": "your-domain.com",
     "static": "static",
     "routes": [{
       "from": "/app",
       "to": "http://localhost:300"
     }]
   }

   • project：项目名称。
   • domain：配置的域名。
   • static：静态文件目录，默认为static。
   • routes：路由规则,指定哪些路径需要转发到本地服务器。

4. 配置本地代理： 确保routes数组中包含正确的本地代理设置，如果你使用本地Express服务器在300端口,你可以这样配置：

   {
     "project": "your-project-name",
     "domain": "your-domain.com",
     "static": "static",
     "routes": [{
       "from": "/app",
       "to": "http://localhost:300"
     }]
   }

   这样，当访问http://your-domain.com/app时，会被转发到http://localhost:300。

5. 启动Surge代理服务器： 使用surge serve命令启动代理服务器,Surge会为你生成一个临时域名。

   surge serve

   这将根据surge.json配置文件生成一个新的临时域名，例如your-domain.surge.sh。

6. 访问代理服务器： 在其他设备上访问刚刚生成的域名，

   http://your-domain.surge.sh

   这样,你就可以通过浏览器看到本地服务器的内容了。

7. 管理多个环境： 如果需要为不同的环境（如开发、测试、生产）配置不同的域名和设置，可以重复上述步骤，为每个环境创建一个surge.json文件，并运行surge serve命令。

8. 验证路径映射： 确保前端路径正确映射到静态文件目录，如果你的应用是单页应用，可能需要在routes中添加到静态目录的映射,或者确保所有静态资源都被正确访问。

9. 测试和调试： 在配置过程中,遇到问题时可以检查Surge的日志输出，

   surge help

   这会显示Surge的所有帮助信息和命令。

通过以上步骤，你可以轻松设置Surge代理服务器,方便地在本地或多个环境中测试和部署你的项目。