之前发文说前端要懂点Nginx配置,那篇的例子too easy。
这回整个稍微复杂点点的,源于我实际工作中遇到的需求:若有两个后台服务的上下文是一毛一样的,如何通过Nginx配置把它们区分开。
1. 首先建立一个文件夹,用VSCODE打开,建立目录格式如下:
server
api
hello
index.html
然后在index.html里写一点东西作为接口返回。让VSCODE启动LiveServer
启动后访问URL: http://127.0.0.1:5500/api/hello
看到正常显示结果。
2. 复制server文件夹到server2,也用VSCODE起LiveServer,这时启动为http://127.0.0.1:5501/api/hello
3. 打开Nginx的配置文件,做如下配置(没有Nginx没法玩,去下一个吧):
server {
listen 8888;
location /api {
proxy_pass http://127.0.0.1:5500/api/;
}
location /newapi {
proxy_pass http://127.0.0.1:5501/api/;
}
}
然后启动,这时候再用Nginx的服务地址去访问两个接口:
http://127.0.0.1:8888/api/hello
http://127.0.0.1:8888/newapi/hello
你会看到都指向了正确的路径。
4. 我们前端的任务是根据一定的逻辑去判断是调新服务还是老服务,由于上下文是区分开的,你可以很容易写两个api函数,传URL参数时按需传api或是newapi,就能区分开了。
5. 有一个小思考题:如果第二个上下文newapi,改成api2,效果如何?