Ngnix部署Vue

$$Ngnix部署Vue$$

一 安装Ngnix

1.1 安装基础依赖

安装 openssl 、zlib 、 gcc 等依赖

yum -y install make zlib zlib-devel gcc-c++ libtool  openssl openssl-devel 

1.2 安装依赖pcre

（1）下载pcre

wget http://downloads.sourceforge.net/project/pcre/pcre/8.37/pcre-8.37.tar.gz 

mv pcre-8.37.tar.gz /usr/src/

（2）解压pcre

tar -xvf pcre-8.37.tar.gz 

（3）安装pcre

cd pcre-8.37/

./configure

安装pcre

make && make install

查看版本

pcre-config --version

安装Ngnix

mv nginx-1.12.2.tar.gz /usr/src/

 tar -xvf nginx-1.12.2.tar.gz 

cd nginx-1.12.2/

./configure 

make && make install

安装成功后，就会创建一个/usr/local/nginx的文件夹，在nginx有sbin文件架，里面有启动脚本

启功Nginx,进行测试

cd /usr/local/nginx/sbin

./nginx

ps -ef | grep nginx

成功运行

补充： Ngnix常用命令

cd /usr/local/nginx/sbin

1.查看版本号

./nginx -v

2.启功Nginx

./nginx

3.停止Nginx

./nginx -s stop

4.重新加载Nginx

./nginx -s reload

二 通过Vue_cli打包vue

npm run build

压缩成zip文件包

三 Ngnix部署

3.1将dist上传到 /usr/local/nginx/html/

cd /usr/local/nginx/html/

rz # 上传命令 ; 安装命令  yum install lrzsz -y

unzip dist.zip

3.2 修改nginx.conf配置文件中的server-location路径

vim /usr/local/nginx/conf/nginx.conf

全文复制下面即可

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;
        }
 
    }
}

运行测试

cd /usr/local/nginx/sbin

./nginx -s reload

访问网址，即可