05 nginx下部署vue项目

1 打包vue项目

npm run build

之后会生成一个dist文件夹。

2 配置nginx

worker_processes  1;
# 以上是全局模块
# worker_processes的值越大,Nginx并发能力越强
 
events {
    worker_connections  1024;
}
# worker_connections的值越大,Nginx并发能力越强
 
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
 
    server {
        listen       80;
        server_name  localhost;
 
        location / {
            root   /usr/local/nginx/html/dist;
            index  index.html index.htm;
        }
        # location
        # root: 将接收到的资源根据/usr/local/nginx/html/dist文件夹去查找资源
        # index: 默认去上述路径中找到index.html或者index.htm
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
 
    }
}

 3 配置nginx.conf

压缩dist文件夹为dist.zip

将dist.zip上传到上面指定路径

/usr/local/nginx/html

安装unzip

yum install -y unzip zip

unzip dist.zip

 删除dist.zip文件

rm -f dist.zip

浏览器访问服务器地址,因为配置的是80端口,所以默认不用加端口号

启动nginx，报错

nginx: [error] open() "/var/run/nginx/nginx.pid" failed (2: No such file or directory)

 【解决】

cd /var/run

 mkdir nginx

 创建nginx.pid文件

touch nginx.pid

 再重新进入/usr/local/nginx/sbin,运行

cd /usr/local/nginx/sbin

./ngin

访问192.168.56.10，如下

至此,Nginx部署一个vue项目完毕!


如果需要https配置

解压nginx压缩包后，编译生成Makefile的命令需要配置支持ssl模块
 

./configure --prefix=/usr/local/nginx --with-http_ssl_module --with-pcre

需要在conf/nginx.conf文件中加入ssl配置

整体配置文件如下：

user root;
worker_processes  1;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;

    keepalive_timeout  65;

    server {
        listen       8844 ssl;
        server_name  localhost;
       
        ssl_certificate ../cert/cert.crt;
        ssl_certificate_key ../cert/cert.key;
        ssl_session_cache shared:SSL:1m;
        ssl_session_timeout 5m;
        ssl_protocols TLSv1.2;
        ssl_ciphers HIGH:!aNULL:!MD5;
        ssl_prefer_server_ciphers on;

        location /image/ {
            alias /home/love_project/images/;
            autoindex on;
        }
        location / {
            root /usr/local/nginx/html/dist;
            index index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
        location /api/ {
            proxy_set_header Host $http_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_pass http://124.223.118.207:9001/;

        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

}

需要ssl加密的四个文件

ca.crt

cert.key

cert.crt

ca.key

把这四个文件放在nginx/cert文件夹中即可

重新启动项目，即可https访问