Centos 搭建 Nginx，部署 Vue 项目

第一步，安装依赖

#gcc安装，nginx源码编译需要
yum install gcc-c++
​
#PCRE pcre-devel 安装，nginx 的 http 模块使用 pcre 来解析正则表达式
yum install -y pcre pcre-devel
​
#zlib安装，nginx 使用zlib对http包的内容进行gzip
yum install -y zlib zlib-devel
​
#OpenSSL 安装，强大的安全套接字层密码库，nginx 不仅支持 http 协议，还支持 https（即在ssl协议上传输http）
yum install -y openssl openssl-devel

第二步，下载Nginx

方式一，直接官方网站下载 【官网链接】，如下图，选择最新稳定版进行下载。

方式二，通过命令进行下载。

#下载版本号可根据目前官网最新稳定版自行调整
wget -c https://nginx.org/download/nginx-1.20.2.tar.gz

第三步，安装

#根目录使用ls命令可以看到下载的nginx压缩包，然后解压
tar -zxvf nginx-1.16.1.tar.gz
​
#解压后进入目录
cd nginx-1.16.1
​
#使用默认配置
./configure
​
#编译安装
make
make install
​
#查找安装路径，默认都是这个路径
[root@VM_0_12_centos ~]# whereis nginx
nginx: /usr/local/nginx
​
#查看nginx进程，如下返回，即为成功
[root@VM_0_12_centos ~]# ps aux|grep nginx
root      5984  0.0  0.0 112708   976 pts/1    R+   14:41   0:00 grep --color=auto nginx
root     18198  0.0  0.0  20552   612 ?        Ss   11:28   0:00 nginx: master process ./nginx
nobody   18199  0.0  0.0  23088  1632 ?        S    11:28   0:00 nginx: worker process

第四步，配置命令全局执行

#进入 nginx 命令目录
cd /usr/local/nginx/sbin/
​
#创建软连接
ln -s /usr/local/nginx/sbin/nginx /usr/local/bin/nginx

第五步，常用命令

#启动、停止nginx
nginx     #启动
nginx -s stop  #停止
nginx -s quit  #退出停止
nginx -s reload  #重新加载配置文件
​
#重启nginx，建议先停止，再启动
nginx -s stop
nginx

第六步，设置开机自启动

#在rc.local增加启动代码即可
vi /etc/rc.local
#增加一行 /usr/local/nginx/sbin/nginx ，增加后保存
​
#设置执行权限
cd /etc
chmod 755 rc.local

如下图所示进行配置：

这样 Nginx 就搭建成功了，下面我们进行部署 Vue 项目。

第一步，项目调整

（1）修改 vue.config.js 文件，依赖静态资源路径。

 

 

（2）修改src/router/index.js 文件，路由跳转路径。

第二步，Nginx 配置文件

#进入nginx配置文件目录，找到nginx的配置文件nginx.conf
cd /usr/local/nginx/conf/
​
#直接修改
vi nginx.conf

基础配置，标红部分是调整部分，其他都是默认配置。

keepalive_timeout  1800;
​
client_max_body_size 102400m;
proxy_max_temp_file_size 102400m;
​
proxy_buffer_size 128k;
proxy_buffers 32 128k;
proxy_busy_buffers_size 128k;
​
gzip on;
gzip_comp_level 2;
gzip_types text/css application/javascript application/json;
gzip_disable "MSIE [1-6]\.";

最后一行加上 include /usr/local/nginx/conf/vhosts/*.conf; ，进行加载其他配置文件。

配置其他配置文件，首先在目录 /usr/local/nginx/conf 新建 vhosts 文件夹，然后在文件夹下面创建其他配置文件。

#进入文件目录
cd /usr/local/nginx/conf
​
#创建文件夹
mkdir vhosts
​
#进入文件夹
cd vhosts
​
#创建配置文件
vi blog.conf

如下图进行配置，注意标红部分。

server {
    listen       80;
    server_name  varyblog.cn;
​
    location /blog {
      alias /home/nginx/blog/dist/;
      try_files $uri $uri/ /blog/index.html;
      index  index.html index.htm;
    }
​
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

最后，重新加载配置文件。

nginx -s reload