标签：http 静态 app proxy https 工具 方法 port

目录

为什么有这个小工具

实现原理

使用方法

自定义配置

为什么有这个小工具

webpack 里面的 devserver 插件，能够方便我们开发调试。但是为了开发一个简单的页面，而安装配置 webpack，未免大材小用，所以考虑把插件功能单独实现。

实现原理

使用 express 建立一个本地服务，托管静态资源，通过中间件 http-proxy-middleware 实现后台接口的反向代理。实现代码如下：

  const app = express();
  // 静态资源目录
  app.use(express.static(STATIC_DIR));
  // 代理后端接口
  app.use(createProxyMiddleware("/api", { target: PROXY_TARGET }));
  app.listen(app.get("port"), () => {});

使用方法

1. 下载 proxy 工具包 proxy.zip
2. 解压后，进入文件夹，将静态文件放置在dist目录
3. 双击文件运行 proxy.exe，如提示需要权限点击确认。停止服务，使用 ctl+c 或关闭 cmd 窗口即可

自定义配置

没有配置文件的话，默认静态文件目录为同级目录dist文件夹，默认http端口 8000 ，https端口为 4430。同级目录下的 config.js 未配置文件，格式如下：

{
  "port": 8000,
  "https_port": 4430,
  "static_dir":"/home/test/dist",
  "history": true,
  "open": false,
  "easyv": false,
  "proxy": {
    "/api": {
      "target": "http://192.168.204.193:8005",
      "changeOrigin": true,
      "ws": true,
      "pathRewrite": {
        "^/api": ""
      }
    }
  }
}

配置文件支持参数如下：

• port：http服务端口
• https_port：https服务端口
• static_dir：静态文件路径
• history：try_files模式
• open：是否自动打开浏览器
• easyv：是否是easyv大屏静态资源文件
• proxy：用法同webpack的devserver

标签：http,静态,app,proxy,https,工具,方法,port
来源： https://blog.csdn.net/liuchuan38/article/details/122639782

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。