nginx 两个context的 模块执行顺序 nginx配置两个前端web服务

前后端分离部署-使用Nginx代理

• 安装Nginx

• 1.访问官网: http://nginx.org/en/download.html
• 2.直接解压下载文件
• 3.启动Nginx
• 4.引入自定义配置文件
• 5. 编写自定义配置文件，实现反向代理
• 补充：

最近公司要搞前后端分离，前端使用vue框架，后端使用spring boot作为REST接口服务。以前开发项目一般一个项目只需要部署一个WEB服务（Tomcat等），但是前后端分离后则需要部署两个Web服务。

部署两个Web服务会出现两个问题：

1. 跨域
2. ip以及端口问题

针对问题1，强大的前端同事，通过vue框架进行一系列骚操作的配置，已经解决了。
针对问题2，我们就需要用到Nginx的反向代理来实现了。

部署两个Web项目服务，如下：：

• 前端静态页面（vue） : http://localhost:8081/
• 后端接口服务（spring boot） : http://localhost:8082/

用户访问页面地址，如下：

http://localhost:8081/index.html

当页面使用ajax请求后端接口服务获取数据时候，一般URL都会写成

http://localhost:8082/getList

但是由于8081端口跟8082端口不一样，浏览器通常都会报跨域的错误。
前端vue框架为了解决跨域的问题，当页面需要通过ajax请求后端接口服务的时候，便把ajax的url改成了

http://localhost:8081/api/getList

那么现在问题来了，怎么做到以下URL的映射呢？

http://localhost:8081/api/getList  -->   http://localhost:8082/getList

没错，接下来就需要用到我们的Nginx的反向代理了。

安装Nginx

1.访问官网: http://nginx.org/en/download.html

2.直接解压下载文件

【喜欢输入命令的跳过这一步】解压完毕后我们不要着急运行nginx.exe文件，我们先在这个目录建立几个bat处理文件。方便我们以后快捷执行命令。直接新建一个txt文档，每个文档输入以下对应的简单的命令，然后把后缀改成bat文件即可。

1. 退出-批处理文件
   文件名：quit.bat
   文件内容： nginx -s quit
2. 重新加载配置-批处理文件
   文件名：reload.bat
   文件内容： nginx -s reload
3. 启动-批处理文件
   文件名：start.bat
   文件内容： start nginx
4. 停止-批处理文件
   文件名：stop.bat
   文件内容： nginx -s stop

如下图：

3.启动Nginx

启动方式有三种，如下：

1. 双击nginx.exe文件，命令行窗口一闪而过，不要紧张，这就代表启动了
2. 使用cmd命令行，进入到对应的nginx目录，输入命令 start nginx
3. 双击start.bat文件，命令行窗口也是会一闪而过……

打开你的浏览器，输入地址： http://localhost 如果出现以下画面，就代表成功启动啦

当然如果没有出现该画面，就要检查一下自己电脑的80端口是否被其他应用占用，如果要关闭nginx的小伙伴们可以输入命令：nginx -s quit 或者 nginx -s stop 进行关闭，当然写了bat处理文件的童鞋们，也只可以直接双击对应的bat文件进行关闭。

4.引入自定义配置文件

成功启动了Nginx，那么我们接下来就开始配置Nginx的反向代理了。打开conf文件夹，打开nginx.conf 的配置文件。

然后你会看到一大堆配置内容以及注释掉的配置项，对于原先的配置文件我们先不要理会，我们直接在标签
http{ …… } 里面加入一段代码

include reverse-procy.conf;

如下图：

然后保存，关闭nginx.conf文件，聪明的你已经看到上图上面的注释了。没错，这段代码的意思就是在nginx.conf的配置文件里面引入其他文件的配置项。对于初学者来说，简洁的配置项才容易看得懂。

5. 编写自定义配置文件，实现反向代理

接下来我们在nginx的安装目录下的conf文件夹，新建 reverse-procy.conf 的文件（其实就是上面在nginx.conf引入自定义配置文件的文件名）

然后在 reverse-procy.conf 编写以下内容：

server {
    listen 8080;
    server_name localhost;    # 这是外网访问进来时的连接地址
    location /{
        proxy_redirect off;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://localhost:8081;
    }
	location /api{
		rewrite ^.+api/?(.*)$ /$1 break;
		include uwsgi_params;
		proxy_pass http://localhost:8082;
	}
    
}

保存退出，然后回到nginx安装目录下，运行reload.bat批处理文件重新加载Nginx的配置。
这样就实现了方向代理。

【注意：上面配置项是让Nginx 监听了 localhost的8080端口，当用户访问 http://localhost:8080 的时候，Nginx会正向代理到 http://localhost:8081 端口（即前端vue框架的页面） 然后当用户访问 http://localhost:8080/api 的时候，nginx会反向代理到 http://localhost:8082 】

最后，Nginx其实也可以部署静态页面，前端的vue框架打包后的文件可以直接放在nginx的html目录下，后端Spring boot再另外部署一个Web服务就可以了。

补充：

1. Linux 配置，其实vue静态可以直接使用nginx映射，不需要跑tomcat

server{
  listen 8080;   # 监听端口
  server_name localhost;   #域名，用于代替将要访问的端口号
  root  /var/project/test/dist;  # 将要访问的网站的目录

  location / {
    try_files $uri $uri/  /index.html;   # 该句代码是为解决history路由不能跳转的问题，在vue-router官网有介绍
  }
}

2. nginx会在上级路径共享session给下级路径.