前端打包部署

Nginx服务器配置与Vue项目部署实战

转载已于 2022-09-04 15:34:30 修改 · 6.5k 阅读

28 ·

CC 4.0 BY-SA版权

原文链接：https://zhuanlan.zhihu.com/p/431796992

文章标签：

#前端 #服务器 #nginx

于 2022-07-19 22:25:57 首次发布

本文详细介绍了在Centos系统上安装、配置Nginx服务器，并部署Vue项目的步骤。包括检查Nginx安装、启动与停止服务、修改配置文件以监听9000端口、创建网站文件夹、打包并上传Vue项目、解决刷新路由404问题等关键操作。最后通过Nginx配置解决Vue路由刷新404问题。

1.服务器安装Nginx

Nginx是一款轻量级的Web服务器、反向代理服务器，由于它的内存占用少，启动极快，高并发能力强，在互联网项目中广泛应用，我们的网站部署到Nginx服务器上。当然也可以选择其它web服务器，这里我们就使用主流的Nginx。
我这里的服务器是Centos系统，故已Centos为例。

（1）先查看服务器是否有ngi

命令如下：

whereis nginx

如果出现如下界面，则代表未安装nginx，否则可跳过本节。
在这里插入图片描述

（2）安装nginx

命令如下：

yum install -y nginx

如果未配置yum源的，可参考网上如何使用yum安装nginx，出现如下界面则代表安装完成。
在这里插入图片描述

（3）查看nginx安装目录

命令如下：

whereis nginx

在这里插入图片描述或者使用命令查看nginx版本号，出现版本号也代表安装成功。

输入命令：

nginx -v

在这里插入图片描述
如果不能全局使用nginx指令，那么可能是环境变量没有配置，具体配置方法可参考网上，这里不做过多解释。

2.启动nginx

（1）启动

服务器安装号nginx后，我们尝试启动它
命令如下：

nginx

在这里插入图片描述
直接输入nginx即可启动服务，打开浏览器，访问服务器地址，出现如下界面则代表启动成功。

这里访问默认的是80端口，因为nginx服务就是默认的80端口，如果不能访问，大致有几种原因：

nginx未启动
服务器安全组未加入80端口
nginx配置错误

（2）停止

停止nginx服务，命令如下：

nginx -s stop

此时访问浏览器则无法访问：
在这里插入图片描述

（3）重启

重启nginx服务，一般用于修改配置文件之后，命令如下：

nginx -s reload

3.修改nginx配置

找到nginx配置文件存放位置，命令如下：

whereis nginx

在这里插入图片描述
此时/etc/nginx则是nginx配置文件存放位置，进入该文件夹：

nginx.conf则是默认配置文件，编辑该文件：

上面界面我们基本上不用改什么，重要的是server这个对象，可以看到默认监听的是80端口，所以我们直接访问服务器ip即可，接下来我们改为9000端口：
在这里插入图片描述
重启nginx，命令如下：

nginx -s reload

此时访问时则需要带上端口号（需要服务器安全组开启9000端口），访问地址：http://ip:9000：
在这里插入图片描述
我们还需要注意的一个地方就是root字段，该字段后面跟着的就是网站页面路径，也就是网站存放的路径。

假设我们网站的存放路径为：

/home/www/dist

修改root，结果如下：
在这里插入图片描述
这个时候重启nginx，我们的网站无法访问了，因为我们没有这个文件夹。

4.新建网站文件夹

刚刚我们设置了网站存放的文件夹路径为：

/home/www/dist

此时我们需要在服务器上新建www文件夹：

cd /home
mkdir www

在这里插入图片描述
我们没有新建dist文件夹，因为我们待会儿vue项目打包就会生成dist文件夹。

5.打包部署vue项目

（1）打包网站

使用vue打包命令,生成dist文件夹：

npm run build

（2）上传至服务器

我们可以使用ftp工具将dist文件夹上传至/home/www目录下，当然也可以使用命令：

scp -r dist/ root@139.9.219.136:/home/www

在这里插入图片描述
在我们的项目目录下用打开git命令行，将本地的dist整个文件夹复制到服务器，需要主要的时scp命令window不支持，所以使用了git命令行工具。

此时无需重启nginx，刷新浏览器，可以看到我们的网站已经部署成功了。
在这里插入图片描述

6.解决刷新路由404问题

当我们切换路由后，然后在刷新页面，会出现404的情况。
在这里插入图片描述
这是因为我们vue项目采用了history的路由方式，至于原因主要是vue是单页面应用，细节部分大家可自行下来了解。

解决问题的办法：

（1）将路由模式改为hash

（2）修改nginx配置：

location / {
  try_files $uri $uri/ /index.html; ---解决页面刷新404问题
}

在这里插入图片描述
修改之后重启nginx，这个时候刷新浏览器则不会出现404了。

使用xshell上传文件 , 不使用 xftp 和 git 上传文件

~输入命令 cd usr/local/nginx/vue（路径是需要部署到的位置）到需要部署的目录下就可以开始上传了
vue输入命令 rm -rf dist 删除dist目录以及它所包含的所有内容(如果没有可以省略这一步，dist是我的目录，改成自己的目录)
vue输入命令 rz 会弹出选择文件的框，选择需要上传的文件，等待上传完成
vue输入命令 unzip dist.zip 解压我上传的压缩包（同样dist.zip也是我的目录，自行更改自己的目录）等待解压完成
vue输入命令 cd usr/local/nginx/sbin （同样这是我的重启路径）
sbin输入命令 ./nginx -s reload 重启，到这一步就完成了，可以在服务器上访问到了