Javascript

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

本文主要是介绍【部署】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前端代码的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!