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

news2025/2/24 14:19:31

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

    • 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-admin和web-app模块的target目录下找到web-admin-1.0-SNAPSHOT.jar和web-app-1.0-SNAPSHOT.jar。

web-app-1.0-SNAPSHOT.jar 移动端后端jar包，对应端口8081

web-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.com和admin.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 block 和location 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.coloradmin.cn/o/1954267.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

JVM系列(二) -类的加载过程

JVM系列(二) -类的加载过程

一、背景介绍 我们知道 Java 是先通过编译器将.java类文件转成.class字节码文件，然后再通过虚拟机将.class字节码文件加载到内存中来实现应用程序的运行。 那么虚拟机是什么时候加载class文件？如何加载class文件？class文件进入到虚拟机后发…
阅读更多...
ARCH和GARCH模型★★

ARCH和GARCH模型★★

该博客为个人学习清风建模的学习笔记，部分课程可以在B站：【强烈推荐】清风：数学建模算法、编程和写作培训的视频课程以及Matlab等软件教学_哔哩哔哩_bilibili 该节是针对时间序列分析中对证券指数分析不能使用传统时间序列模型做出的模型&a…
阅读更多...
C++ 基础（类和对象下）

C++ 基础（类和对象下）

目录 一. 再探构造函数 1.1. 初始化列表（尽量使用列表初始化） 二. static成员 2.1static成员初始化 三.友元 3.1友元：提供了⼀种 突破类访问限定符封装的方式. 四.内部类 4.1如果⼀个类定义在另⼀个类的内部，这个内部类就叫…
阅读更多...
数据结构第三讲：单链表的实现

数据结构第三讲：单链表的实现

数据结构第三讲：单链表的实现 1.什么是单链表2. 节点3.单链表的实现3.1节点的结构3.2打印单链表3.3申请一个新节点3.4单链表尾部插入3.5单链表头部插入3.6单链表的尾部删除3.7单链表头部删除3.8查找3.9在指定位置之前插入数据3.10在指定位置之后插入数据3.11删除pos…
阅读更多...
全国区块链职业技能大赛样题第9套前端源码

全国区块链职业技能大赛样题第9套前端源码

后端源码地址：https://blog.csdn.net/Qhx20040819/article/details/140746050 前端源码地址：https://blog.csdn.net/Qhx20040819/article/details/140746216 智能合约+数据库表设计：https://blog.csdn.net/Qhx20040819/article/details/140746646 登录 ​ 用户管理
阅读更多...
Java httpclient请求form-data格式，并设置boundary代码实现

Java httpclient请求form-data格式，并设置boundary代码实现

文章目录 form-data 数据请求格式样例报错信息: **MissingServletRequestParameterException**解决方法报错信息: **no multipart boundary was found** 解决方法Java代码实现【错误】使用 UrlEncodedFormEntity 、BasicNameValuePair 请求失败（error）【…
阅读更多...
【计算机毕业设计】850汽车售后服务信息管理系统

【计算机毕业设计】850汽车售后服务信息管理系统

🙊作者简介：拥有多年开发工作经验，分享技术代码帮助学生学习，独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。🌹赠送计算机毕业设计600个选题excel文件，帮助大学选题。赠送开题报告模板&#xff…
阅读更多...
《Windows API每日一练》20.1 动态链接库

《Windows API每日一练》20.1 动态链接库

本节将介绍如何编写动态链接库，并更全面地探讨动态链接库的使用方法，包括以不同的方法装入动态链接库和以不同的方法调用其中的函数等。 本节必须掌握的知识点： 动态链接库的概念 第157练：编写动态链接库DLL 第158练：…
阅读更多...
Java从入门到精通（十二）~ 动态代理

Java从入门到精通（十二）~ 动态代理

晚上好，愿这深深的夜色给你带来安宁，让温馨的夜晚抚平你一天的疲惫，美好的梦想在这个寂静的夜晚悄悄成长。 文章目录 目录 前言 主要作用和功能： 应用场景： 二、代理概念 1.静态代理 2.动态代理 2.1 概念介绍 …
阅读更多...
MSPM0G3507将系统时钟改为80M

MSPM0G3507将系统时钟改为80M

这款板卡手册上写着最高80M的主频，不过要达到80M需要自己配置时钟树分频倍频。 第一步：打开SysConfig工具，那个方框原本是没有勾选的，这里我们把它勾选 第二步： 点击时钟树配置 第三步： 主要是改变这几个…
阅读更多...
nodejs - MongoDB 学习笔记

nodejs - MongoDB 学习笔记

一、简介 1、MongoDB 是什么 MongoDB 是一个基于分布式文件存储的数据库，官方地址 https://www.mongodb.com/ 2、数据看是什么 数据库（DataBase）是按照数据结构来组织、存储和管理数据的应用程序。 3、数据库的作用 主要作用是 管理数据…
阅读更多...
docker命令大全(新手必备)-my write

docker命令大全(新手必备)-my write

一、命令图谱 二、基本命令 docker version #显示版本信息 docker info #显示系统信息，包括镜像、容器数量 docker 命令 --help #帮助 三、镜像命令 3.1 docker images 查看本地主机上的镜像 docker images [OPTIONS] [REPOSITORY[:TAG]] 选项：-a …
阅读更多...
【JavaEE初阶】Thread类及常见方法

【JavaEE初阶】Thread类及常见方法

目录 📕 Thread类的概念 📕 Thread 的常见构造方法 📕 Thread 的几个常见属性 📕 start()-启动一个线程 📕 中断一个线程 🚩 实例一 🚩 实例二 🚩 实例三 📕 jo…
阅读更多...
Pytorch深度学习实践（8）多分类任务

Pytorch深度学习实践（8）多分类任务

多分类问题 多分类问题主要是利用了Softmax分类器，数据集采用MNIST手写数据集 设计方法： 把每一个类别看成一个二分类的问题，分别输出10个概率 但是这种方法存在一种问题：不存在抑制问题，即按照常规来讲&#xff0c…
阅读更多...
Python的文件操作介绍

Python的文件操作介绍

一、编码格式介绍 1.1、常见的字符编码格式 1.2、Python字符编码格式 Python的解释器使用的是Unicode（内存） .py文件在磁盘上使用UTF-8存储（外存） #encodinggbkprint(你好，中国) 二、文件的读写原理 2.1、文件的…
阅读更多...
Servlet1-Servlet程序、请求处理、继承体系

Servlet1-Servlet程序、请求处理、继承体系

目录 什么是Servlet 手动实现Servlet程序 ​编辑url地址如何定位到Servlet程序去访问 Servlet的生命周期 ​编辑GET和POST请求的分发处理 通过继承HttpServlet类实现Servlet程序 IDEA菜单生成Servlet程序 Servlet类的继承体系 ServletConfig类 ServletContext类 什么…
阅读更多...
Docker学习与实战

Docker学习与实战

一、Docker安装 移除旧版本docker sudo yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \docker-latest-logrotate \docker-logrotate \docker-engine配置docker yum源 sudo yum install -y yum-utils配置阿里云docker仓库 sudo y…
阅读更多...
甄选范文“论软件测试中缺陷管理及其应用”软考高级论文，系统架构设计师论文

甄选范文“论软件测试中缺陷管理及其应用”软考高级论文，系统架构设计师论文

论文真题 软件缺陷指的是计算机软件或程序中存在的某种破坏正常运行能力的问题、错误，或者隐藏的功能缺陷。缺陷的存在会导致软件产品在某种程度上不能满足用户的需要。在目前的软件开发过程中，缺陷是不可避免的。软件测试是发现缺陷的主要手段，其核心目标就是尽可能多地找…
阅读更多...
Nvidia GPU驱动安装报错显卡与驱动不兼容（本身兼容）

Nvidia GPU驱动安装报错显卡与驱动不兼容（本身兼容）

最近在公司服务器上遇到了一个特别离谱的问题，就是在本身在nividia官网上面下载的匹配的显卡驱动，安装之后采用下面命令查看驱动显示： $ nvidia-smiNVIDIA-SMI has failed because it couldnt communicate with the NVIDIA driver. Make su…
阅读更多...
exe4j 使用jar包 打包exe程序，并且自带jre

exe4j 使用jar包 打包exe程序，并且自带jre

1. 准备工作 1) 程序jar包一个 2) jdk自带jre文件夹一个 3）exe4j 程序 ，自行搜索 我用的5.1 4）图标（icon）文件一个，用来作为exe程序的图标 5） 图片（png/jpg等）用来打开…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023