NDPS(node-dynamic-proxy-server)
Brief intro
在一个比较大的Angular项目中,开发和测试的环境往往都会有很多。所以在Angular前端的开发过程中,有时需要经常性的切换后端环境。
在angular-cli工程和webpack工程中都提供了修改的方法:
- 在angular-cli工程中使用指令ng server -pc proxy.conf.json(.js)就能传入一个环境代理配置
- 在webpack工程中则可以在webpack.config.js中通过配置devServer的proxy来实现。
但是,不论是angular-cli工程还是webpack工程,在开发模式下每次更换代理往往都需要重新start工程来使代理生效,而重新start就意味着一个webpack compile的过程,这对一个大型Angular工程来说时间开消是很大的,严重影响开发效率。 有没有一种办法,能让Angular工程在更改完http代理后不需要重新start就能自动生效呢? 这时候NDPS(node-dynamic-proxy-serve)就能派上用场了!
NDPS(Node-Dynamic-Proxy-Server)是一个基于nodeJS的动态代理服务器,如果在npm start前启用了NDPS,Angular-cli内置的dev-server的目标代理(proxyTarget)就会被设定到NDPS(http://localhost:8181), 此时,NDPS则会读取和监听上面的环境配置,并根据配置的把http请求转发到对应的后端服务器上。 这样做的主要好处是方便Start后需要更换后端环境的场景,NDPS可以在start的状态下动态切换环境,避免了重新运行npm start的时间消耗。
Quick start
Make sure you have Node version >= 6.0 and NPM >= 3
Install
$ npm install --save-dev ndps
Config
//package.json
{
...
"scripts": {
"server": ng serve -pc proxy.conf.js
"mock": "node ./src/mock/mock.js",
"ndps": "node proxy.conf.js ndps",
"proxy": "node proxy.conf.js",
...
}
...
}
// proxy.conf.js
const ndpsServer = require('ndps');
var proxies = /*proxies*/{
0: 'http://localhost:8101',
1: 'http://10.93.128.155:10080',
2: 'http://10.62.107.136:10080',
}/*proxies*/;
var proxyTarget = proxies[ 0 ];
ndpsConf = {
ndpsPort: 8181,
proxiesAnchor: '/*proxies*/',
proxyIdxAnchor: 'proxies[',
proxyConfPath: __filename,
beforeProxyChange: (info, done) => {
//if (info.proxyIdx === 0 && !isMockStarted) {
// mockServer(!info.isInit, () => done());
// isMockStarted = true;
//} else {
// done();
//}
done();
}
};
var proxyConf = [{
context: ["/api"],
target: `http://localhost:${ndpsConf.ndpsPort}`,
secure: false
}];
// Start NDPS
ndpsServer(ndpsConf);
// Export Conf
module.exports = proxyConf;
Effect pictures
Start NDPS:
Change proxy target:
Some other case: