使用CentOS部署

在CentOS中使用Nginx部署Vue项目首先要先构建你的Vue项目然后配置Nginx来托管构建的文件。

npm

最终你会得到一个dist文件夹它可以直接被浏览器解析执行在后面的步骤我们都是使用这个文件来部署项目。

使用CentOS部署

执行如下命令在CentOS系统中安装Nginx的官方YUM源安装后就可以通过YUM命令来安装和管理Nginx了

rpm

http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm

yum

看到控制台最后输出了Complete此时nginx已经成功安装了

配置Nginx

将这里的index.html删除然后将我们上一个步骤中项目构建生成的dist文件夹里面的内容copy进来注意是

listen

如果刚刚自己已经偷偷启动了那就用下面的命令重新加载Nginx配置

sudo

至此项目的部署就已经完成了回到我们的华为云控制台在访问控制的安全组中添加入方向规则如下图我的项目是8080。

最激动人心的时刻到了打开浏览器输入urlip地址加端口我的项目可以成功访问啦

访问重定向

这是因为Nginx默认不支持单页面应用的路由而且我部署的项目是Vue的Vue项目属于单页面开发所以只有index.html,所以当刷新页面或者直接访问路由配置页面时Nginx会认为你在访问一个实际存在的文件或者所以会返回404错误。

解决这个问题的方法是在Nginx的配置文件中添加一段配置让所有的请求都重定向到index.html这样就可以让Vue的路由系统接管所有的路由请求实现单页面应用的路由功能。

我们在里面增加一个配置

这段配置的意思是当请求一个路径时首先尝试访问对应的文件或者目录如果不存在那么就重定向到index.html。

sudo

我们来看一下基础监控在部署vue时服务器的波动情况可以看出我这台

2核2G3M

版本这个镜像由GO语言编写的提供状态显示、应用模板快速部署、对于Docker容器、镜像、网络、数据卷的基本操作、日志显示、容器控制台等功能。

编写docker文件

首先创建一个文件夹我们把需要的数据收集起来如下我们在一开始项目构建生成的dist然后自己手动创建Docker-compsoe、Dockerfile、nginx这三个文件

下面我们就来编写这三个文件

在dockerfile中加入如下内容将端口修改成自己的其他默认。

在这里我们创建了一个镜像然后像和在centos上面部署一样把文件copy进容器里的html文件夹

使用Nginx作为基础镜像

这个nginx.conf和上面配置Nginx时的default.conf的区别是nginx.conf是全局配置而default.conf是默认服务器配置作用基本一样你要换成default也是可以的如下我们加入了重定向防止出现刷新报404错误。

server

vue项目存在的目录替换成你对应的地址如果你这是用docker部署的请改成你容器内的地址root

location

{#需要指向下面的router否则会出现vue的路由在nginx中刷新出现404try_files

$uri

index.htm;}#对应上面的router主要原因是路由的路径资源并不是一个真实的路径#所以无法找到具体的文件#因此需要rewrite到index.html中然后交给路由在处理请求资源location

router

在这里我们定义了执行dockerfile构建Docker镜像的配置然后定义容器暴露8080端口并且将宿主机当前目录下的nginx.conf文件映射到容器的/etc/nginx/conf.d/default.conf文件。

这样容器内的Nginx服务就会使用这个配置文件。

version:

./nginx.conf:/etc/nginx/conf.d/default.conf

项目启动

一切准备就绪之后我们将这个文件夹copy到服务器中然后到该路径下执行下面命令

docker-compose

项目构建完成之后回到我们的华为云控制台在访问控制的安全组中添加入方向规则因为我两个服务器用的是同一个安全组然后项目端口是一样的所以不需要再配置了拿到这台服务器的ip地址测试一下可以成功访问到并且刷新也不会出现404问题了

然后再来看看我们这台服务器的监控可以看出还是没什么压力下一期我们给服务器上点强度才行