nginx部署vue项目

nginx部署vue项目

nginx是一个高性能的http和反向代理服务器。因此常用来做静态资源服务器和后端的反向代理服务器。本文主要记录使用nginx去部署使用vue搭建的前端项目，项目基于vue官方的脚手架vue-cli构建。

打包vue项目

通过npm run build命令打包好的静态资源将输出到dist目录中。

1. windows版 安装nginx

下载响应的windows版本解压，加压后如图所示。

启动 并查看nginx任务进程(ps 在nginx根目录下)

start nginx
tasklist /fi "imagename eq nginx.exe"

效果如图

修改nginx配置文件，配置文件为conf下的nginx.conf,修改nginx.conf中的server配置片段

	     upstream chackerApp.chacker  {
                server   localhost:8686 max_fails=1 fail_timeout=30s;
          }
server {
        listen       8888;#默认端口是80，如果端口没被占用可以不用修改
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        root        E:/vue/my_project/dist;#vue项目的打包后的dist

        location / {
            try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
            index  index.html index.htm;
        }
        #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
        #因此需要rewrite到index.html中，然后交给路由在处理请求资源
        location @router {
            rewrite ^.*$ /index.html last;
        }
        location /api/chacker/ {
                proxy_pass http://chackerApp.chacker/;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header REMOTE-HOST $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "Upgrade";
                proxy_redirect off;
                add_header Access-Control-Allow-Origin *;
                add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
                add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,Sys-Platform';

                if ($request_method = 'OPTIONS') {
                        return 204;
                 }
                                }
        #.......其他部分省略
  }

完成后，就可以在浏览器访问了 http://localhost:8888

2. linux版 安装nginx

通常情况下很少使用windows来作为nginx的服务器，一般使用linux。对于linux安装nginx有两种方式，一种是使用官方已经编译好的包来安装，一种是使用源码构建安装。

第一种方式参考官方地址https://nginx.org/en/linux_packages.html#stable

第二种方式参考官方地址https://nginx.org/en/docs/install.html中的Building from Sources片段，这种实际上就是下一个tar.gz包仍到linux服务去自己编译。

在linux服务上和window环境上使用nginx部署vue项目并没有太大差异，把构建好的vue项目dist上传到linux服务上，通用修改nginx服务器中的root来指向dist就ok了，然后使用