CentOS下基于Nginx部署Vue前端项目的详细过程

目的：将Vue项目借助Nginx部署到Centos系统中。

一、部署前的准备

1. 安装gcc。安装 nginx 需要先将官网下载的源码进行编译，编译依赖 gcc 环境，如果没有 gcc 环境，则需要安装：yum install gcc-c++
2. PCRE pcre-devel 安装。nginx 的 http 模块使用 pcre 来解析正则表达式，所以需要在 linux 上安装 pcre 库，pcre-devel 是使用 pcre 开发的一个二次开发库。命令：yum install -y pcre pcre-devel
3. zlib 安装。zlib 库提供了很多种压缩和解压缩的方式， nginx 使用 zlib 对 http 包的内容进行 gzip ，所以需要在 Centos 上安装 zlib 库。命令：yum install -y zlib zlib-devel
4. OpenSSL 安装。nginx 不仅支持 http 协议，还支持 https（即在ssl协议上传输http），所以需要在 Centos 安装 OpenSSL 库。命令：yum install -y openssl openssl-devel

二、安装Nginx

1. 下载Linux版本的Nginx安装包，下载地址：Nginx官方下载连接
   

2. 在/usr/local下新建nginx文件夹。cd /usr/local、mkdir nginx。将下载的nginx安装包采用Xftp软件（或其他工具）上传至/usr/local/nginx下。

3. 解压缩：tar -zxvf nginx-1.22.0.tar.gz。进入解压后的文件夹：cd nginx-1.22.0

4. 执行配置文件，根目录下依次执行命令：./configure、make、make install

5. 通过whereis nginx命令可以查看nginx安装位置，目前是安装在了/usr/local/nginx下。
   

6. 启动Nginx。依次执行命令：cd sbin、./nginx
   

7. Nginx常用命令。

cd /usr/local/nginx/sbin/
./nginx  启动
./nginx -s stop  停止
./nginx -s quit  安全退出
./nginx -s reload  修改nginx.conf文件后，重新加载配置文件
ps aux|grep nginx  查看nginx进程

三、部署Vue项目

1. 对Vue前端工程进行打包（cmd进入Vue项目所在目录，使用命令npm run build进行打包，或者使用类似Hbulider软件打包），打包完成Vue项目下会多出一个dist文件夹。将该文件夹下的static文件夹和index.html文件，通过Xftp工具上传到/usr/local/nginx/html文件夹下。
   
2. 部署完成。通过访问：http://服务器IP:80，即可访问到前端项目。如果想要在本地访问该项目，需要服务器开启 80端口（CentOS下开启端口命令百度有）。如果要修改端口或配置代理，需要进入/usr/local/nginx/conf下，打开nginx.conf文件进行相关配置，配置后需要重启nginx才会生效。