最近公司要搞前后端分离,前端使用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官网有介绍
  }
}
  1. nginx会在上级路径共享session给下级路径.
Logo

前往低代码交流专区

更多推荐