Nginx：多项目开发配置跨域代理

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

简述Nginx应用场景（前后端）

当我们开发 vue 项目中可以通过 proxyTable 进行跨域，但如果是原生的 html+css+js ，或者其他没有跨域插件的项目中，想要跨域就要引入配置许多的外部包，整个流程操作起来耗时耗力耗资源，这时应用场景就很适合 Nginx 出场了。

Nginx 通用性很强，甚至可以为一个简单的html项目开启服务并实现 http 代理，但是这种应用场景一般存在服务器中由后端开发人员来控制。并且也可以同时代理多个来自不同域名的服务，近年来后端热门的 微服务 概念就可以通过Nginx服务实现。nginx也可以通过反向代理将本地文件的引用指向远程服务器中的某一文件，后端开发应该都已经很熟悉这个工具。

前端的应用场景不需要这么复杂，只需要在没有且不需要引入proxyTable这样的插件时想起Nginx这一工具即可，因为当前端项目打包与后端服务放在生产环境的同一服务器中，便不存在跨域理念，所以我们只需要在本地能够调用接口服务保证自己的页面没问题就可以了，Nginx的灵活性也体现在此。

Nginx配置 - ./nginx-1.6.0-ems/conf/nginx.conf

 1 #user  nobody;

 2 worker_processes  4;

 3 #error_log  logs/error.log;

 4 #error_log  logs/error.log  notice;

 5 #error_log  logs/error.log  info;

 6

 7 #pid        logs/nginx.pid;

 8

 9

10 events {

11     worker_connections  1024;

12 }

13

14

15 http {

16     include       mime.types;

17     default_type  application/octet-stream;

18

19     #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '

20     #                  '$status $body_bytes_sent "$http_referer" '

21     #                  '"$http_user_agent" "$http_x_forwarded_for"';

22

23     #access_log  logs/access.log  main;

24

25     sendfile        on;

26     #tcp_nopush     on;

27

28     #keepalive_timeout  0;

29     keepalive_timeout  65;

30

31     #gzip  on;

32

33     include E:/nginx-1.6.0-ems/conf/my_system_v4.conf;

34 }

行2 工作进程数默认 - 1，可依据电脑的配置，开任务管理器 -> 性能看到CPU配置，如电脑是双核4线程CPU，就可以设置为4，启动Nginx后打开任务管理器，Nginx共启动了5个进程，我一直以为应该是4个进程，这里我也不太清楚为什么有5个进程，猜测是多出一个主程序进程。

行11 单个工作进程可以允许同时建立外部连接的数量，数字越大能同时处理的连接越多，默认 - 1024，如有需要可依据配置调大到 - 100000。worker_connections的配置有两个指标：

1) 内存 - 每个连接分别对应一个read_event、一个write_event事件，两个事件占用96字节，一个连接数大概占用232字节，总计328 byte，因此，100k 连接数 * 328 byte / 1024 / 1024 = 31 M，这只是nginx启动时connections连接数所占用的。

2) 进程最大可打开文件数 - 进程最大可打开文件数受限于操作系统，通过 ulimit -n 命令查询，以前是1024，现在是65535.

行33 内文件的代码也可以直接写在 nginx.conf 中，分开是为了在开发多个项目时通过引入不同文件能够快速切换代理链接。

Nginx配置 - ./nginx-1.6.0-ems/conf/my_system_v4.conf

 1 # 负载均衡

 2  upstream my-sys-pool {

 3     server localhost:8787;

 4  }

 5  server {

 6         listen       9920;

 7         server_name  localhost;

 8         client_max_body_size 10m;

 9         location ^~ /saveTemp/ {

10         proxy_pass http://218.***.***.***:8080;

11         proxy_set_header HOST $host;

12         proxy_set_header X-Real-IP $remote_addr;

13         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

14         proxy_cache_key $host$uri$is_args$args; }

15

16     # html

17     location ~ \.(html|gif|jpg|jpeg|png|bmp|swf|eot|svg|ttf|woff|js|css|json|txt|xml|pdf|mp4|mp3)$ {

18         #root   E:/workSpace/myProject;

19         proxy_pass http://localhost:8686;

20         proxy_set_header X-Real-IP $remote_addr;

21         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

22         proxy_cache_key $host$uri$is_args$args;

23     }

24

25     location ^~ /my-sys/ {

26         proxy_pass http://218.***.***.***:8080;

27         proxy_set_header HOST $host;

28         proxy_set_header X-Real-IP $remote_addr;

29         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

30         proxy_cache_key $host$uri$is_args$args;

31     }

32 }

行6 是代理成功后的地址，也就是说假设project运行在localhost的8686端口，这时9920应该是无服务项目的，访问结果是localhost拒绝我们的访问请求。而8686端口因为请求的是其他服务器的api，虽然页面和样式成功渲染，但api请求一直是pending直到请求超时，通过Nginx成功代理后访问9920端口则会成功返回调用正确接口的project项目。

行9 内代码块作用是重定向本地文件地址，当页面请求本地文件夹 /saveTemp目录中文件时，重定向至请求218.***.***.***:8080的同路径文件。这样请求的就是服务器中文件而不是本地文件，浏览器地址栏仍显示本地 /saveTemp。

行17* 作用是将 8686端口的服务中转代理到 9920端口，在运行项目时不通过 localhost:8686 而是运行 localhost:9920 即可。

行18 为本地静态资源启动服务.

行25 将/my-sys这个开头的接口请求代理到http://218.***.***.***:8080.