Nginx反向代理部署前端Vue项目

对于前后端分离的项目，前端项目和后端项目需要单独部署，通常会使用SpringBoot框架开发后端项目，使用Vue框架开发前端项目；后端项目的部署较为简单，一般来说就是先打成一个Jar包上传到服务器，然后使用 nohup java -jar Jar包名 & 命令启动项目即可；完整部署流程可参考文章：https://blog.csdn.net/can_chen/article/details/107225701 而对于前端Vue项目的部署，需要使用Nginx做反向代理，原因是开发的时候我们使用的是webpack提供的proxyTable做的代理从而解决了开发环境的跨域请求问题。以下给出部署前端Vue项目的步骤：

一、安装Nginx

对于Nginx安装的详细步骤，可参考文章：https://blog.csdn.net/can_chen/article/details/115315341

二、前端Vue项目打包

通常来说，执行命令 npm run build 即可打包Vue项目，打包成功之后会在项目的根目录下生成一个dist文件夹，该文件夹下包含的就是Vue项目打包之后的静态html、css、js文件；然后将dist目录上传到服务器的某个目录下，假设我 dist目录所在的绝对路径为：/root/baker/vue-recruit/dist
注意：需要给dist目录递归修改权限，否则后面可能会出现权限不足的问题，命令为：chmod -R 777 /root/baker/vue-recruit/dist

三、配置Nginx反向代理

对于Nginx反向代理的相关配置，是在nginx.conf配置文件中配置的，我的nginx.conf配置文件所在的路径为：/usr/local/nginx/conf/nginx.conf（安装方法不同，路径可能不同），以下给出nginx.conf的基本配置示例：

server {
       listen       80;  # 监听的端口号
       server_name  129.204.189.149;  # 服务器的ip或者域名

       #charset koi8-r;

       #access_log  logs/host.access.log  main;
	
	  # 前端服务反向代理配置
       location / {
           proxy_http_version 1.1;
           proxy_set_header Host $host;
           proxy_set_header X-Real-IP $remote_addr;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
           root /root/baker/vue-recruit/dist;  # dist目录在服务器的完整路径
           index index.html index.htm;
       }
       
      # 后端服务反向代理配置
       location /api {
           proxy_http_version 1.1;
           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://129.204.189.149:5000/;  # 后端服务所部署的服务器地址以及端口号
       }
}

通过以上配置之后，在浏览器输入服务器的ip地址或者域名即可访问到前端Vue项目的页面，如果以上配置监听的端口号是默认的80，则可以省略，否则在访问的时候需要加上监听的端口号。
（如果修改完nginx.conf配置文件之后没有生效，则需要重启一下nginx服务器：首先进入nginx的sbin目录，执行命令 ./nginx -s reload）

原理：基于以上的nginx反向代理配置，在浏览器输入ip地址：129.204.189.149，那么会去 /root/baker/vue-recruit/dist目录下，运行index.html文件；如果浏览器访问的地址加上 /api，说明访问的是后端接口，则实际会去访问 http://129.204.189.149:5000/ 这个路径下的接口；注意： /api 这个路径的配置需要和前端vue项目中配置的生产环境访问后端接口路径对应起来，例如：（由于端口号是80可以省略，非80则记得加上端口号）

四、可能遇到的问题

1. 403权限不足
在部署的过程中，配置完nginx反向代理服务器之后，访问ip地址或者域名，可能会出现403权限不足的问题，例如：

出现这种问题，首先应该看看第二步打包上传dist目录到服务器时，有没有给dist目录赋予777权限，如果已经赋予权限，还出现权限不足的问题，那么可以去到nginx目录下的logs/error.log查看报错日志，我遇到的报错日志如下：

出现该问题的解决方案为：在nginx.conf配置文件的第一行看看有没有 user root；默认是 “# user nobody”，把注释去掉，并且改成 “user root”就可以了，如下：