Ubuntu安装Nginx,并部署vue前端代码

一、安装Nginx

1、下载压缩包

下载地址：nginx下载

2、解压

tar -zxvf nginx-1.17.6.tar.gz

3、安装依赖

进入nginx的安装目录

执行命令后会发现出现错误，很多not found， 我们需要添加依赖库。

1、PCRE库

./configure: error: the HTTP rewrite module requires the PCRE library.
You can either disable the module by using --without-http_rewrite_module
option, or install the PCRE library into the system, or build the PCRE library
statically from the source with nginx by using --with-pcre=<path> option.

安装PCRE：

sudo apt-get install libpcre3 libpcre3-dev

2、zlib库

./configure: error: the HTTP gzip module requires the zlib library.
You can either disable the module by using --without-http_gzip_module
option, or install the zlib library into the system, or build the zlib library
statically from the source with nginx by using --with-zlib=<path> option.

 解决：

下载压缩包http://zlib.net/

解压缩

tar -zxvf zlib-1.2.11.tar.gz

进入文件夹中，依次执行

./configure
make
make install

完成。

再尝试

成功，会出现

4、安装Nginx

make install

1、 查看nginx位置

2、进入/usr/local/nginx

3、nginx启动命令

#首先进入sbin
./nginx 开启
./nginx -s stop 停止
./nginx -s quit
./nginx -s reload


#对 nginx 进行重启相当于先停止再启动，即先执行停止命令再执行启动命令
./nginx -s quit
./nginx


#重新加载配置文件
    （当修改nginx.conf 修改，要想让配置生效需要重启nginx，使用./nginx -s reload不用先停止nginx再        
     启动，即可将配置信息在nginx中生效。）
./nginx -s reload

二、部署vue前台代码

1、打包前台代码

VScode中执行

npm run start

在项目的文件夹里有个dist文件夹

里面的文件，全部复制到/usr/local/nginx/html中

2、修改配置文件

进到conf目录下，有个nginx.conf，先备份（好习惯）

cp nginx.conf nginx.conf.back

需要修改，

重新加载配置文件即可。