nginx部署VUE项目（之前用的tomcat）

本文的项目是VUE+SpringBoot前后端分离的项目

首先说一下我部署的时候坑路

1.本来在网上看的前端部署到tomcat的webapp里面，启动tomcat就可以正常访问，但是，前端向后台请求数据时，总是404，搞得我心态爆炸。
2.前端在tomcat下，所以运行的端口号是8080，springboot运行在8888端口下，后来发现虽然部署在同一台服务器，但是也不是可以直接请求数据的，需要nginx反向代理。
3.所以我就使用 Nginx 将部署在 Tomcat 中的前端项目发出的请求代理转发到通过 SpringBoot 单独启动的后端项目中。具体操作是：监听tomcat的8080端口，然后将请求转发到springboot运行的端口8888.。
但是，后来才发现这种思路是完全错误的**！因为8080端口已经被tomcat使用了，nginx无法监听一个已经被使用的端口。**

转发的目标：

这个是前端请求的URL，

想要转发到的是：47.114.181.238：8888/model/create/

正确的Nginx部署

vi /usr/local/nginx/conf/nginx.conf
对nginx.conf做出如下修改：

server {
    # 需要被监听的端口号，前提是此端口号没有被占用，否则在重启 Nginx 时会报错
    listen       80;//默认的端口
    # 服务名称，无所谓
    server_name  localhost;

    # 上述端口指向的根目录，也就是你前端部署的目录
    root /usr/local/nginx/html/tanks-vue;
    # 项目根目录中指向项目首页
    index index.html;

    client_max_body_size 20m; 
    client_body_buffer_size 128k;

    # 根请求会指向的页面
    location / {
      # 此处的 @router 实际上是引用下面的转发，否则在 Vue 路由刷新时可能会抛出 404
      try_files $uri $uri/ @router;
      # 请求指向的首页
      index index.html;
    }

    # 由于路由的资源不一定是真实的路径，无法找到具体文件
    # 所以需要将请求重写到 index.html 中，然后交给真正的 Vue 路由处理请求资源
    location @router {
      rewrite ^.*$ /index.html last;
    }

    # 关键步骤，这里表示将所有的 http://47.114.181.238:80/api/ 开头的请求都转发到下面 proxy_pass 指定的链接中
    location /api/ {
          # 后端的真实接口
          proxy_pass http://47.114.181.238：8888/;
          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_set_header   Cookie $http_cookie;
          # for Ajax
          #fastcgi_param HTTP_X_REQUESTED_WITH $http_x_requested_with;
          proxy_set_header HTTP-X-REQUESTED-WITH $http_x_requested_with;
          proxy_set_header HTTP_X_REQUESTED_WITH $http_x_requested_with;
          proxy_set_header x-requested-with $http_x_requested_with;
          client_max_body_size 10m;
          client_body_buffer_size 128k;
          proxy_connect_timeout 90;
          proxy_send_timeout 90;
          proxy_read_timeout 90;
          proxy_buffer_size 128k;
          proxy_buffers 32 32k;
          proxy_busy_buffers_size 128k;
          proxy_temp_file_write_size 128k;
    }
}