Nginx部署前端vue项目

NGINX部署前端项目

进入到服务器上 nginx的配置文件，按照以下格式配置，每一个server都为一个服务，按需添加或减少

第一步：vue项目进行打包,生成一个dist文件夹，此dist文件夹可以随意取名字，打包后放到服务器某个文件夹下（随意放，下面配置用此路径）

npm run build

第二部：配置Nginx服务器，配置完成后，记得重启Nginx服务

server {
        listen       1111 ssl; // 监听的端口号 https 需加ssl
        server_name  localhost;
        # https 秘钥配置,存储在服务器ssl目录（自定义目录，此密钥找领导或者运维拿）
        ssl_certificate   ../../ssl/a.com.pem;
        ssl_certificate_key  ../../ssl/a.com.key;

        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2;

        location / {
            root   /home/api/tasks-web; // 前端项目打包后扔在服务器上的路径
            index  index.html index.htm;
            add_header 'Access-Control-Allow-Origin' *;
        }
        location /api-serve {
           	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';
            # 后端项目访问地址端口
            proxy_pass https://IP:8089/api-serve;
        }
}

完结，希望能帮到你