使用Linux下的Nginx部署单点前端项目和集群项目详解

废话不多说,直接上操作

一、部署单体前端项目

1.丑话说在前,到这里已经自行安装好了nginx。
2.前端项目进行打包,我这里是一个vue项目,打包命令 npm run build:环境名

3.将打包好后的项目文件上传至服务器某个角落(这个角落的文件夹自定义)

使用Linux下的Nginx部署单点前端项目和集群项目详解_第1张图片

我是放到这里

使用Linux下的Nginx部署单点前端项目和集群项目详解_第2张图片

4.修改nginx的配置文件

找到你的配置文件,在这

使用Linux下的Nginx部署单点前端项目和集群项目详解_第3张图片

进去修改配置

使用Linux下的Nginx部署单点前端项目和集群项目详解_第4张图片

配置解读:

listen 80表示nginx会监听80端口,然后会去 /www/cabs/cabs-web 这个位置找 index.html文件返回

在部署单体前端的时候这里监听的端口需要和你项目配置的端口一致;

5.重载配置文件
nginx -s reload
6.访问项目即可

二、部署集群项目

部署集群和部署单体最大的差别就是在配置文件的地方

使用Linux下的Nginx部署单点前端项目和集群项目详解_第5张图片

这里我是在一台服务器部署了两个单体,然后两个单体部署成集群,如果是多个服务器进行集群,则在backhend里面直接填具体的项目地址就行;

你可能感兴趣的:(linux,前端,运维)