本文主要是介绍【部署】Ubuntu安装Nginx,并部署vue前端代码，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

之前参考过两篇在阿里云部署项目的文章。

分别是：

（1）SpringBoot项目部署到阿里云服务器全流程（简直详细到啰嗦）

（2） vue项目部署到阿里云上详解

第一篇是将springboot项目打包部署在阿里云上；

第二篇是在centos下部署vue前端。

两篇搭配食用。

今天又试了下在ubuntu18.04上部署VUE。【前后端分离式】

这篇文章是 SpringBoot项目部署到阿里云服务器全流程（简直详细到啰嗦） 的后续。

一、安装Nginx

1、下载压缩包

下载地址：nginx下载

2、解压

tar -zxvf nginx-1.21.1.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位置

whereis 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

需要修改:

 重新加载配置文件即可。

转载：https://blog.csdn.net/weixin_42361127/article/details/103429823?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162737823416780261968700%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=162737823416780261968700&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_v2~rank_v29-6-103429823.pc_search_result_cache&utm_term=ubuntu18.04%E9%83%A8%E7%BD%B2springboot%E5%90%8E%E7%AB%AF%E5%92%8Cvue%E5%89%8D%E7%AB%AF&spm=1018.2226.3001.4187

这篇关于【部署】Ubuntu安装Nginx,并部署vue前端代码的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！