nginx部署包含后端请求的VUE项目

• 前端vue项目已开发完成，与后端联调成功
• 前端项目访问后端接口时，会拼接/api前缀
• 前后端部署在不同机器
• nginx 已安装完成（windows版本）
  • 官网下载
  • 进入安装目录
  • 打开cmd
  • start nginx启动
  • 修改配置文件
• node已安装-当前最新版

下载新项目后：

• npm install 安装依赖
• npm run build 打包，会生成dist文件夹
• 将文件夹拷贝到nginx的html目录下或者其子目录下
• 启动nginx

当前界面基本可以访问了，但是访问接口会报405的错，以及url路径也不正确
通过配置文件解决,报405的解决思路是，让返回405的接口进行转发，并在转发时进行反向代理。

        location /api {
            # 重写uri,将前端添加的/api去除
            rewrite "^/api/(.*)$" /$1 last;
            # nginx不允许post，put等方法请求访问静态资源，否则返回405代码，将405转为200，同时转发给@405
            error_page 405 =200 @405;
         }

        # 响应@405错误
        location @405 {
            # 反向代理
            proxy_pass http://kiis.f3322.net:8003;
            # 设置代理Host
            proxy_set_header Host $host;
            # 设置真实IP
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }

对于uri的变化，我们可以通过rewrite来解决。

        location /api {
            # 重写uri,将前端添加的/api去除
            rewrite "^/api/(.*)$" /$1 last;
            # nginx不允许post，put等方法请求访问静态资源，否则返回405代码，将405转为200，同时转发给@405
            error_page 405 =200 @405;
         }

整体思路是，当以/api开头的接口（即后端接口）进来时，如果报405，则转发，即使用@405；如果正常，则重写uri,删除/api，然后重新寻找匹配（所以rewirte 配置last参数）
rewrite “^/api/(.*)$” /$1 break，路径重写：

• “^/api/(.*)$”：匹配路径的正则表达式，用了分组语法，把/api/以后的所有部分当做1组
• $1：重写的目标路径，这里用$1引用前面正则表达式匹配到的分组（组编号从1开始），即/api/后面的所有。这样新的路径就是除去/api/以外的所有，就达到了去除/api前缀的目的
• break：指令，常用的有2个，分别是：last、break
  • last：重写路径结束后，将得到的路径重新进行一次路径匹配
  • break：重写路径结束后，不再重新匹配路径。

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {
        listen 9004;
        server_name kiis.f3322.net;
        rewrite_log on;

        # 前端调起后端接口，在uri开头添加/api
        location /api {
            # 将前端添加的/api去除
            rewrite "^/api/(.*)$" /$1 last;
            # nginx不允许post，put等方法请求访问静态资源，否则返回405代码，将405转为200，同时转发给@405
            error_page 405 =200 @405;
         }

        # 去除掉/api的后端接口
        location /kiis {
            # 反向代理
            proxy_pass http://kiis.f3322.net:8003;
            # 设置代理Host
            proxy_set_header Host $host;
            # 设置真实IP
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }

        # 响应@405错误
        location @405 {
            # 反向代理
            proxy_pass http://kiis.f3322.net:8003;
            # 设置代理Host
            proxy_set_header Host $host;
            # 设置真实IP
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }

        # 配置错误页面
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # 匹配未匹配过的所有请求
        location / {
            # 静态资源路径
            root html/kiis;
            try_files $uri $uri/ /index.html last
            index index.html index.htm;
            # 启用跨域CORS设置
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Expose-Headers Accept-Ranges;
            add_header Access-Control-Expose-Headers Content-Encoding;
            add_header Access-Control-Expose-Headers Content-Length;
            add_header Access-Control-Expose-Headers Content-Range;
            add_header accept_ranges bytes;
        }
    }
}

欢迎大家留言，以便于后面的人更快解决问题！另外亦欢迎大家可以关注我的微信公众号，方便利用零碎时间互相交流。共勉！