前端nginx服务器部署

没有接触之前感觉很难，最近部署了Linux下和Windows下的服务器部署，其实很简单，大体要注意的就是三个部分:

1.就是代理的配置

2.找到dist 包放的位置

3.记住重启 nginx -s reload

一、代理配置格式如下：（#后面的注释也是需要注意区别的地方）

server {
    listen       8058;                                                  #注意填写的端口
    server_name  localhost;

    #charset koi8-r;

    access_log  logs/host.access.log; #  main;

    root        /opt/nginx/alarm-system/dist;              #vue项目的打包后的dist的位置

   location / {
        try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
        index  index.html index.htm;
    }

    location @router {
        rewrite ^.*$ /index.html last;
    }

   location ^~ /api/ {                                                    #代理名称
        proxy_pass              http://172.17.11.168:8888;    #代理的地址
        proxy_set_header        Host            $host;
        proxy_set_header        X-Real-IP       $remote_addr;
        proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
        client_max_body_size    20m;
        client_body_buffer_size 128k;
        proxy_buffers           32 4k;
        proxy_connect_timeout   3;
        proxy_send_timeout      30;
        proxy_read_timeout      30;

        rewrite ^/api/(.+?)$ /$1 break;                             #重定向
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

二、Windows环境下的这段代码在nginx/conf/nginx里面，dist包放的位置要和你代理里面配的位置一致，cmd下重启命令 nginx -s reload

三、Linux环境下改注意的流程和步骤差不多，用到的命令：

  1.创建并编辑文件  vim a

  2.新建文件夹     mkdir   b

  3.从哪个目录下的那复制dist到opt      cp -r dist/ /opt/

  4. 重启  nginx -s reload