liunx前后端分离项目部署

news2025/1/12 8:00:06

文章目录

1、nginx的安装和自启动
2.nginx负载均衡
3.前后端项目部署-后端部署
4.前后端项目部署-前端部署

1、nginx的安装和自启动

在这里插入图片描述

yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel

1.安装我们nginx所需要的依赖
在这里插入图片描述

wget http://nginx.org/download/nginx-1.13.7.tar.gz
tar -xvf nginx-1.13.7.tar.gz -C /usr/local/java/

2.下载并解压安装包

# 进入安装包目录
cd nginx-1.13.7
# 编译，执行配置: 考虑到后续安装ssl证书 添加两个模块
./configure --with-http_stub_status_module --with-http_ssl_module
# 安装编译一下，一般我们编译完后/usr/local/
make && make install

3.安装nginx的ssl证书

在这里插入图片描述

1.conf是环境配置文件
2.html是静态资源
3.logs日志
4.sbin启动

4.这里就我们编译完后的文件夹。

在这里插入图片描述
5.我们进入sbin，将nginx启动，然后开放80端口

在这里插入图片描述
6.这样我们的nginx就已经安装成功了

在这里插入图片描述

7.如果我们需要nginx开机自启动电话我们就要去编辑rc.local这个文件，我们用vim进行编辑

在这里插入图片描述

8.进去之后我们输入自己nginx服务目录，保存退出

在这里插入图片描述

9.然后我们给rc.local授权让他变成可以执行文件，然后我们重启之后nginx也可以跟着自启动了

2.nginx负载均衡

在这里插入图片描述
1.昨天我们部署了tomcat,并且我们启用了开机自启动，所有我们首先将他给停掉

在这里插入图片描述

2.我们在回到tomcat跟目录下面将tomcat复制一份，一个端口8080，一个端口8081，

在这里插入图片描述
3.我们回到bin目录下面，将两个端口全部启动，第二个端口我们需要去修改她得端口号，将8080改为8081

在这里插入图片描述
4.把你所有的端口都往后面加1，使他与8080不一样

在这里插入图片描述
5.修改完成之后我们回到bin目录下面将8081端口启动，然后开放8081，端口进行一个外部访问了,效果就是我们输入8080和8081都可以访问tomcat了

在这里插入图片描述
6.之后我们回到/usr/local/nginx/conf/这个下面有一个nginx.conf文件

7.我们复制总路径，到右边打开，用记事本打开

在这里插入图片描述
8.用记事本打开之后，将我们的两个端口号添加服务器集群

在这里插入图片描述

9.添加之后我们还要去使用集群，用反相代理，使用tomcat_list集群

在这里插入图片描述
10.然后我们重启nginx,这样我们访问ip的时候就不需要加上8080，因为ip的端口默认就是80，这样子我们的负载均衡就已经搭好了

3.前后端项目部署-后端部署

在这里插入图片描述
1.我们cd 跳转到tomcat8080端口的webapps下面将我们项目的后端war包传进去（有多少个tomcat我们就需要将项目都传进去），然后进入bin目录下面启动tomcat

在这里插入图片描述
2.全部添加完成之后，我们用8080、8081都可以访问我们的后端项目数据了

4.前后端项目部署-前端部署

在这里插入图片描述
1.我们再/usr/local/姓名新建一共mypro文件夹用来存放我们的前端项目然后再进去文件夹，把我们的前端项目丢进去，进行一个解压（我们liunx里面没有zip的解压命令所以我们要下载一个命令yum install -y unzip）下载完成我们就可以进行一个解压了

在这里插入图片描述

2.我们解压完成之后，进入到我们的解压目录里面 pwd 复制路径把他配置到nginx里面去

在这里插入图片描述
3.我们cd 进入nginx里面在用cd 进入到conf里面找到nginx.conf这个文件，用记事本打开

在这里插入图片描述

server {
	listen       80;            #监听80端口，可以改成其他端口
	#server_name  localhost;    #当前服务的域名
	server_name  www.zking.com; #当前服务的域名(虚拟域名也可以)
	root         /usr/local/mypro/dist;      #将要访问的网站的根目录，nginx节点会自动继承父节点的配置;这里放到/usr/local/*，放到其他路径下会有权限相关问题；必要的时候配置Nginx.conf的user为root

 # 代理配置
	      location / {
			  #该句代码是为解决history路由不能跳转的问题，在vue-router官网有介绍 
		    try_files $uri $uri/  /index.html;
      }
	      location  ^~/api/ {
		  #^~/api/表示匹配前缀是api的请求，proxy_pass的结尾有/， 则会把/api/      *后面的路径直接拼接到后面，即移除api
		proxy_pass http://tomcat_list/;
	}