使用两台虚拟机分别部署前端和后端项目

使用两台虚拟机分别部署前端和后端项目

    • 1 部署方案
    • 2 准备两台虚拟机,并配置网络环境
    • 3 部署后端项目
      • 3.1 打包服务
      • 3.2 上传jar包到服务器
      • 3.3 集成Systemd
        • 3.3.1 移动端服务集成Systemd
        • 3.3.2 后台管理系统集成Systemd
    • 4 配置域名映射
    • 5 部署前端项目
      • 5.1 移动端
        • 5.1.1 打包
        • 5.1.2 部署
      • 5.2 后台管理系统
        • 5.2.1 打包
        • 5.2.2 部署

1 部署方案

使用虚拟机模拟服务器,完成前后端项目的部署,我们使用两台虚拟机分别部署前端和后端项目,具体的部署方案如下图所示。
在这里插入图片描述
上述方案中,server-01用于部署移动端和后台管理系统的两个后端服务。server-02部署Nginx,作为移动端和后台管理系统两个前端项目的web服务器,同时也作为两个后端服务的反向代理。也就是说Nginx作为所有请求的入口,若请求内容是静态资源,Nginx便直接返回;若请求的内容为动态资源(后端服务接口),Nginx便代理请求后端服务,然后将结果响应给客户端。

2 准备两台虚拟机,并配置网络环境

虚拟机的安装及网络环境的配置,可参考我的博客
虚拟机安装
虚拟机克隆

在这里插入图片描述
这里我准备了2台虚拟机:

server-01 服务器对应的ip为 192.168.10.13 --用于部署web-app.jar移动端和web-admin.jar后台管理系统的两个后端服务server-02 服务器对应的ip为 192.168.10.12 --用于部署Nginx,作为app移动端和admin后台管理系统两个前端项目的web服务器,同时也作为两个后端服务的反向代理

注意,这里省略在虚拟机上安装jdk,mysql,nginx,redis…服务器步骤,安装详情可参考我的博客
Linux系统安装JDK1.8-源码版
虚拟机CentOS服务器-安装 部署Nginx
Centos7.x上安装与卸载mysql8与5.7版本
Linux环境安装Redis6

3 部署后端项目

3.1 打包服务

使用IDEA的maven插件对项目进行打包,完成后,在web-adminweb-app模块的target目录下找到web-admin-1.0-SNAPSHOT.jarweb-app-1.0-SNAPSHOT.jar

web-app-1.0-SNAPSHOT.jar 移动端后端jar包,对应端口8081web-admin-1.0-SNAPSHOT.jar 后台管理系统后端jar包,对应端口8080

3.2 上传jar包到服务器

将后端项目的两个jar包上传到server-01服务器的/opt/lease目录下,若目录不存在,自行创建即可。
在这里插入图片描述
直接使用 java -jar 命令启动这两个后端服务,然后访问接口文档,看看能否正常访问
在这里插入图片描述
在这里插入图片描述

3.3 集成Systemd

为方便项目的启动、停止或者重启,我们同样使用Systemd来管理后端服务的进程。

3.3.1 移动端服务集成Systemd

创建lease-app.service文件

vim /etc/systemd/system/lease-app.service

内容如下

[Unit]
Description=lease-app
After=syslog.target[Service]
User=root
# 注意:这里要使用jdk安装的绝对路径
ExecStart=/usr/local/software/jdk/jdk17/bin/java -jar /opt/lease/web-app-1.0-SNAPSHOT.jar 1>/opt/lease/app.log 2>&1
SuccessExitStatus=143[Install]
WantedBy=multi-user.target

启动项目
一旦编辑并保存了lease-app.service文件,你需要重新加载Systemd的配置,然后启动你的服务。这可以通过下面的命令完成:

# 重新加载Systemd配置
systemctl daemon-reload# 启动
systemctl start lease-app.service# 查看状态
systemctl status lease-app.service# 停止
systemctl stop lease-app.service# 设置服务在系统启动时自动启动
ystemctl enable lease-app.service

在这里插入图片描述

3.3.2 后台管理系统集成Systemd

创建lease-admin.service文件

vim /etc/systemd/system/lease-admin.service

内容如下

[Unit]
Description=lease-admin
After=syslog.target[Service]
User=root
# 注意:这里要使用jdk安装的绝对路径
ExecStart=/usr/local/software/jdk/jdk17/bin/java -jar /opt/lease/web-admin-1.0-SNAPSHOT.jar 1>/opt/lease/admin.log 2>&1
SuccessExitStatus=143[Install]
WantedBy=multi-user.target

启动项目
一旦编辑并保存了lease-admin.service文件,你需要重新加载Systemd的配置,然后启动你的服务。这可以通过下面的命令完成:

# 重新加载Systemd配置
systemctl daemon-reload# 启动
systemctl start lease-admin.service# 查看状态
systemctl status lease-admin.service# 停止
systemctl stop lease-admin.service# 设置服务在系统启动时自动启动
ystemctl enable lease-admin.service

查看后端两个服务是否成功启动:
在这里插入图片描述

这里留了一个bug,就是,后端两个服务都成功启动了,但是输出的日志文件在服务器上并没有找到,奇了怪了,等后续再来处理吧

4 配置域名映射

现实生活中,几乎所有的网站都是通过域名去访问。真正的域名需要付费购买,此处在宿主机本地配置一下域名映射,模拟一下域名的效果即可。

我们准备两个域名lease.wusong.comadmin.lease.wusong.com,前者用于访问移动端网站,后者用于访问后台管理系统。由于两个前端项目都部署在server-02上,所以两个域名均指向server-02的IP 192.168.10.12
Windows的域名映射配置文件位于C:\Windows\System32\drivers\etc\hosts,需要使用管理员身份修改。使用管理员身份运行任意文本编辑器,然后使用其打开hosts文件,并增加如下内容:

192.168.10.12 lease.wusong.com admin.lease.wusong.com

修改完毕记得保存。不需要重启电脑。

5 部署前端项目

移动端和后台管理系统的前端项目均部署在server-02的Nginx中,Nginx的配置思路如下图所示
在这里插入图片描述

5.1 移动端

5.1.1 打包
  1. 明确前端请求的后端接口地址

    打包之前需要明确前端请求的后台接口地址,根据前文的部署规划,前端请求后台接口时走的是Ngxin反向代理,也就是请求的地址为http://lease.wusong.com:80。这里的80是nginx配置的端口号,根据自身情况配置。

❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗
注意注意注意!!!:移动端请求的后端接口地址按理说应该是192.168.10.13:8081,但是按照我们的部署方案,移动端是不会直接去请求后端服务的接口地址的,也就是说是不会直接请求192.168.10.13:8081,而是这里我们是通过nginx的反向代理去请求的,也就是说我们得让这个移动端客户端把请求后端接口数据的请求发送给虚拟主机,然后我们在虚拟主机 通过location把这些请求转发给真正的后端服务
❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗

所以我们需要修改.env.production文件中VITE_APP_BASE_URL环境变量的值,修改结果如下

VITE_APP_BASE_URL='http://lease.wusong.com:80'
  1. 构建项目

    在项目的根目录执行以下命令

    npm run build
    
  2. 查看打包结果

    观察项目的根目录是否出现dist目录,我们将dist目录直接重命名为app

5.1.2 部署
  1. 上传dist文件

    rentHouseH5前端项目编译得到app目录上传至server-02服务器的/usr/local/software/nginx/html/目录下。

注意此 /usr/local/software/nginx/目录是nginx的安装目录
在这里插入图片描述

  1. 编辑Nginx配置文件

添加以下server块,内容如下

	server {# 表示Nginx将监听标准的HTTP端口80。这意味着所有发往该服务器80端口的HTTP请求都将由这个服务器块处理listen       80;# 定义了这个服务器块将响应哪些域名的请求。在这里,只有当请求的Host头部字段为lease.wusong.com时,Nginx才会使用这个服务器块来处理请求server_name  lease.wusong.com;# 处理app移动端静态资源请求location / { # 表示当请求的URL以/开始时,Nginx将使用这个location块中的指令来处理请求# 指定了Nginx在接收到请求时应该从哪个目录下查找文件。在这里,Nginx会从/usr/local/software/nginx/html/app目录下查找请求的资源root   /usr/local/software/nginx/html/app;# 如果请求的URL指向一个目录,Nginx会尝试返回这个目录下的index.html或index.htm文件作为主页index  index.html index.htm;}# 后端服务代理location /app { # 表示当请求的URL以/app开始时,Nginx将使用这个location块中的指令来处理请求# 移动端后端服务地址# 将所有匹配/app的请求转发到位于192.168.10.13:8081的后端服务器。这通常用于负载均衡、微服务架构或API网关场景,其中Nginx充当反向代理角色proxy_pass http://192.168.10.13:8081;}error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}}

有一个问题需要思考一下:
就是这个 / 它会匹配所有的请求,它也包括 /app,假如客户端来了一个以/app为前缀的请求,那么nginx会使用哪一个location来处理这个请求呢?
nginx的处理方法是:当一个请求可以匹配到多个location的时候,那么nginx会让匹配程度最高的location来处理这个请求
所以,以/app为前缀的所有请求都是由这个location /app {…}来处理,因为它的匹配度最高,而这个,location / {…}会处理除了location /app {…}处理之外的请求,说白了就是静态资源的请求了

❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️扩展始❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️
这里说一下这个server blocklocation block
例如:
在这里插入图片描述
server block
server block位于http block,用于配置虚拟主机,一个Nginx服务可包含多个虚拟主机,每个虚拟主机都可以独立的提供服务,因此借助Nginx,我们可以在一台服务器部署多个独立的网站,如下图所示
在这里插入图片描述
每个虚拟主机使用一个server block进行配置,配置的内容包括

  • listen:虚拟主机监听的端口号。
  • server_name:指定虚拟主机的域名或者IP。

location block

location block位于server block,用于配置请求的处理逻辑,一个server block中可以包含多个location block,例如

server {listen 80;server_name www.wusong.com;location /index {root /var/www/html;}location /api {proxy_pass http://backend-api;}
}

❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️扩展终❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️

  1. 重新加载Nginx配置文件

执行以下命令重新加载配置文件

注意:在nginx的安装目录下的sbin目录下执行# 停止
./nginx -s stop# 开启
./nginx# 重新加载 当修改了Nginx配置文件后,需要重新加载才能生效,可以使用下面命令重新加载配置文件:
./nginx -s reload
  1. 访问项目
http://lease.wusong.com:80

在这里插入图片描述

5.2 后台管理系统

5.2.1 打包
  1. 明确前端请求的后端接口地址

    后台管理系统的前端请求后端接口时,同样会走Nginx反向代理,故其请求的接口地址为http://admin.lease.wusong.com:80

    确保rentHouseAdmin项目中的.env.production文件中的VITE_APP_BASE_URL环境变量配置为如下内容

    VITE_APP_BASE_URL='http://admin.lease.wusong.com:80'
    
  2. 打包

    在项目根目录执行以下命令

    npm run build
    
  3. 查看打包结果

    观察项目的根目录是否出现dist目录,我们将dist目录直接重命名为admin

5.2.2 部署
  1. 上传dist文件

    rentHouseAdmin项目编译得到admin文件上传至server-02服务器的/usr/local/software/nginx/html/目录下。

注意此 /usr/local/software/nginx/目录是nginx的安装目录

  1. 编辑Nginx配置文件

添加以下server块,内容如下

	server {# 表示Nginx将监听标准的HTTP端口80。这意味着所有发往该服务器80端口的HTTP请求都将由这个服务器块处理listen       80;# 定义了这个服务器块将响应哪些域名的请求。在这里,只有当请求的Host头部字段为admin.lease.wusong.com时,Nginx才会使用这个服务器块来处理请求server_name  admin.lease.wusong.com;# 处理admin后台管理系统静态资源请求location / {  # 表示当请求的URL以/开始时,Nginx将使用这个location块中的指令来处理请求# 指定了Nginx在接收到请求时应该从哪个目录下查找文件。在这里,Nginx会从/usr/local/software/nginx/html/admin目录下查找请求的资源root   /usr/local/software/nginx/html/admin;# 如果请求的URL指向一个目录,Nginx会尝试返回这个目录下的index.html或index.htm文件作为主页index  index.html index.htm;}# 后端服务代理location /admin { # 表示当请求的URL以/admin开始时,Nginx将使用这个location块中的指令来处理请求# 后台管理系统后端服务地址# 将所有匹配/app的请求转发到位于192.168.10.13:8080的后端服务器。这通常用于负载均衡、微服务架构或API网关场景,其中Nginx充当反向代理角色proxy_pass http://192.168.10.13:8080;}error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}}
  1. 重新加载Nginx配置文件

执行以下命令重新加载配置文件

注意:在nginx的安装目录下的sbin目录下执行# 停止
./nginx -s stop# 重新加载 当修改了Nginx配置文件后,需要重新加载才能生效,可以使用下面命令重新加载配置文件:
./nginx -s reload
  1. 访问项目
http://admin.lease.wusong.com:80

在这里插入图片描述

最终的nginx配置如下:


#user  nobody;
worker_processes  1;#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;#pid        logs/nginx.pid;events {worker_connections  1024;
}http {include       mime.types;default_type  application/octet-stream;#log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '#                  '$status $body_bytes_sent "$http_referer" '#                  '"$http_user_agent" "$http_x_forwarded_for"';#access_log  logs/access.log  main;sendfile        on;#tcp_nopush     on;#keepalive_timeout  0;keepalive_timeout  65;#gzip  on;server {listen       80;server_name  admin.lease.wusong.com;# 处理admin后台管理系统静态资源请求location / {root   /usr/local/software/nginx/html/admin;index  index.html index.htm;}location /admin {# 后台管理系统后端服务地址proxy_pass http://192.168.10.13:8080;}error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}}server {listen       80;server_name  lease.wusong.com;# 处理app移动端静态资源请求location / {root   /usr/local/software/nginx/html/app;index  index.html index.htm;}location /app {# 移动端后端服务地址proxy_pass http://192.168.10.13:8081;}error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}}}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/876612.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Kettle下载安装

环境说明 虚拟机:Win7;MySql8.0 主机:Win11;JDK1.8;Kettle 9.4(Pentaho Data Integration 9.4)(下载方式见文末) 安装说明 【1】解压后运行Spoon.bat 【2】将jar包 复…

DjangoRF-6-项目模块projects模型

首先,这是个新模块,在apps下创建projects 1.1、django-admin startapp projects 1.2进行注册 ‘apps.projects.apps.ProjectsConfig’ 进行接口编写的过程中,落入数据库的字段相同的有很多我们要在utils文件下进行闯进模型鸡肋 from django…

【黑科技】:Laravel 项目性能提升 20 倍

令人激动的黑科技:Laravel 项目性能提升 20 倍 这个项目能够在无需修改任何代码且无需第三方扩展的前提下,将你的 Laravel 项目性能提高 20 倍。它仅依赖于 PHP 原生的 pcntl、posix、fiber 和 sockets。 项目灵感 起因是看到官方发布的 PHP 8.1 更新…

【教学类-70-01】20240728一个茶壶两个茶杯(果茶)

‘ 背景需求: 用通义万相下载简笔画茶壶、茶杯 茶杯,简单笔画,卡通,黑白,未着色,幼儿插图,线条画,没有背景,没有颜色,黑白漫画线条艺术:,空背景…

【全国大学生电子设计竞赛】2022年B题

🥰🥰全国大学生电子设计大赛学习资料专栏已开启,限时免费,速速收藏~

Hakuin:一款自动化SQL盲注(BSQLI)安全检测工具

关于Hakuin Hakuin是一款功能强大的SQL盲注漏洞安全检测工具,该工具专门针对BSQLi设计,可以帮助广大研究人员优化BSQLi测试用例,并以自动化的形式完成针对目标Web应用程序的漏洞扫描与检测任务。 该工具允许用户以轻松高效的形式对目标Web应…

基于Python的宿舍管理系统/基于Spring Boot的学生宿舍管理系统/计算机专业/课设

摘要 宿舍管理系统是一种基于计算机技术的管理工具,旨在提高学生宿舍管理的效率、准确性和安全性。随着高校规模的不断扩大和学生数量的增加,宿舍管理工作变得愈发复杂,传统的手工管理已经无法满足需求。因此,开发宿舍管理系统已…

Greenplum的诞生与成长过程

Greenplum 成立与早期发展 Greenplum的诞生于早起发展 Greenplum于2003年在美国硅谷成立,在2006年发布了基于PostgreSQL(8.x)的MPP数据库产品,作为与公司同名的MPP数据库,专为分析和管理海量数据集而设计,支持复杂的数据分析和商…

大语言模型系列-Transformer:深入探索与未来展望

大家好,我是一名测试开发工程师,已经开源一套【自动化测试框架】和【测试管理平台】,欢迎大家联系我,一起【分享测试知识,交流测试技术】 Transformer模型自其问世以来,便迅速在自然语言处理领域崭露头角&a…

synchronized锁解析+synchronized锁的膨胀过程

目录 synchronized锁(具体详解) synchronized锁具体的三种形式: synchronized锁的实现原理是什么? 类锁和对象锁(面试重点) 锁的升级与对比(synchronized锁的膨胀 面试重点) 偏…

Jenkins持续部署

开发环境任务的代码只要有更新,Jenkins会自动获取新的代码并运行 1. pycharm和git本地集成 获取到下面的 Git可执行文件路径 2. pycharm和gitee远程仓库集成 先在pycharm中安装gitee插件 在设置中找到gitee,点击添加账户,并将自己的账户添…

vscode 根据不同语言项目自定义配置项(插件版本)

2024.7.28 天微热,心情燥。 前文,如果我们是一个全栈开发者,我们想在写前端项目时只让vscode加载前端的插件,写后端的时候只加载后端的插件,该如何配置呢? 1. 通过配置 workspace 这里大家都会&#xff0…

HAL库源码移植与使用之SPI驱动VS1053音频解码

你可以理解为带着dac adc芯片功能的集成芯片,声音的高低音形成由频率决定,大小声由波峰决定,所以采集时记录时间和电压值就可以确定高低音色和大小声,形成声音波形,再把波形用dac输出给喇叭,让喇叭在对应时…

Nginx系列-12 HTTP消息处理流程

背景 了解Nginx处理HTTP请求的11个阶段,有助于理解和配置nginx、自定义模块、基于lua模块自定义功能。按如下配置,执行"curl http://localhost:8001/query/test.html",如果读者对结果不是很确定,建议阅读本文。 serve…

初识C++ · AVL树(2)

目录 前言: 1 左右旋 2 右左旋 3 部分细节补充 3.1 单旋和插入 3.2 部分小函数 前言: AVL树作为一种结构,理解树的本身是不大难的,难的在于,树旋转之后的连接问题,写AVL树的代码大部分都是在旋转部分…

压力温度实时图 livecharts

var mapper Mappers.Xy<MeasureModel>() //.X(model > model.currentTime.Ticks/TimeSpan.FromDays(1).Ticks) //使用 Time.作为X轴的标签 .X(model>model.Time) .Y(model > model.Value); // 作为Y轴的值 //全局保存映射器 Charting.For<Measu…

如何在安卓设备上运行Linux(使用termux+图形界面)加上换源等优化

我学生嘛&#xff0c;喜欢讲故事&#xff0c;你看看我大部分文章开头&#xff0c;都会有"事情的起因"一类话 当然这次也不例外哦 我最新获得了一个新平板&#xff0c;华为的matepad air&#xff0c;很喜欢。想捣鼓&#xff0c;不太懂&#xff0c;但好像鸿蒙不能直接…

31 列表常用方法——pop()、remove()、clear()

pop()、remove()、clear() 这 3 个方法用于删除列表中的元素。 ① pop() 用于删除并返回指定位置&#xff08;默认是最后一个&#xff09;上的元素&#xff0c;如果指定的位置不是合法的索引则抛出异常&#xff0c;对空列表调用 pop() 方法也会抛出异常。 ② remove() 用于删除…

数学基础【俗说矩阵】:逆矩阵

逆矩阵知识 认识逆矩阵 当最矩阵A【左乘】【初等阵】多次&#xff08;也就是进行多次【初等行】变化&#xff09;后&#xff0c;得到了一个【单位阵E】。由于矩阵具有结合律&#xff0c;把矩阵A【左乘】的所有【初等阵】乘起来&#xff0c;就得到了一个新的矩阵。我们称这个能…

Date已不再推荐?为什么我们需要新的 Java 日期时间 API?(LocalDate、LocalDateTime、LocalTime 、Instant)

日期时间 API 是 Java 8 版本的最大功能之一。Java 从一开始就缺少一致的日期和时间方法&#xff0c;而 Java 8 日期时间 API 是对核心 Java API 的一个受欢迎的补充。 为什么我们需要新的 Java 日期时间 API&#xff1f; 在开始研究 Java 8 日期时间 API 之前&#xff0c;让我…