nodejs | 反向代理设置

环境

现在本地通过 npm run build 构造好了生产环境的代码。代码结构大致如下。

# ./build
├── asset-manifest.json
├── assets
│   └── favicon.png
├── index.html # 入口
└── static
    ├── css
    │   ├── main.92b86eff.css
    │   └── main.92b86eff.css.map
    ├── js
    │   ├── main.f8d2757a.js
    │   ├── main.f8d2757a.js.LICENSE.txt
    │   └── main.f8d2757a.js.map
    └── media
        ├── bar.xxx.png
        └── ...

现在我们要在本地启动 build 下生成的文件。可以简单写个 nodejs 脚本，使用 express 服务，指定端口号为 3000。

express 启服务

这里，使用 express 这个比较成熟的 web 框架。

const express = require("express");

const app = express();
app.use(express.static("./build/"));

app.listen(3000, () => {
  console.log("服务开启在3000端口");
});

但是一般情况下，前端在本地调用后台的服务，一般需要反向代理，比如前端是 http://localhost:3000，后端一般是另外的地址比如 https://test.com/api/xxx 。需要将访问 api 路径下的内容打到后端地址。使用中间件 http-proxy-middleware 进行反向代理。

反向代理

在上面的代码基础上增加下面的反向代理部分。

const { createProxyMiddleware } = require("http-proxy-middleware");

app.use(
  createProxyMiddleware("/api", {
    target: "https://test.com/",
    changeOrigin: true,
  }),
);

现在启动 node server.js 的可以通过 http://localhost:3000 就可以正常访问页面了。