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

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

    • 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.rhkb.cn/news/385317.html

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

相关文章

享元模式(结构型)

目录 一、前言 二、享元模式 三、总结 一、前言 享元模式(Flyweight Pattern)是一种结构型设计模式,用于减少大量细粒度对象的内存占用。它通过共享尽可能多的相同数据来节约内存空间。 享元模式由以下角色组成: Flyweight&…

推荐系统三十六式学习笔记:工程篇.常见架构25|Netflix个性化推荐架构

目录 架构的重要性经典架构1.数据流2.在线层3.离线层4.近线层 简化架构总结 你是否曾经觉得算法就是推荐系统的全部,即便不是全部,至少也是嫡长子,然而实际上,工程实现才是推荐系统的骨架。如果没有好的软件实现,算法不…

达梦数据库激活

SSH登录 192.168.0.148 账号:root 密码:xxx 1.上传 dm.key 文件到安装目录 /bin 目录下 cd /home/dmdba/dmdbms/bin rz -E dm.key2.修改 dm.key 文件权限 chown -R dmdba.dinstall dm.key3.打开数据库工具,新建查询,输入 cd /…

亚信安慧AntDB-M负载均衡

负载均衡是分布式系统中常用的技术,主要是将工作任务均衡分布到系统的各个资源点上,可以充分利用系统资源。 AntDB-M分布式内存数据库节点角色可以分为管理节点(MN)、计算节点(CN)和数据节点(DN)三种。管理节点收到客户端连接请求后,会经由负…

视觉巡线小车(STM32+OpenMV)——总结

文章目录 目录 文章目录 前言 一、效果展示 二、完整流程 1、STM32CubeMX配置 2、Keil编辑 3、硬件接线 4、参数调试 5、图像处理调试 三、总结 前言 基于前面的系列文章,已基本介绍完了基于STM32OpenMV的视觉巡线小车,本文将以小编自己的小车…

Visual Studio Code + vue快速安装配置Node.js+Vue+webpack+vscode

第一部分:Node.js 第一步:下载Node.js 方法1:链接 下载 | Node.js 中文网 (nodejs.cn) 方法2:百度网盘 链接:https://pan.baidu.com/s/1zIqu8H9rb_I1i-1OWD7swQ?pwdaurk 提取码:aurk --来自百度网盘…

【React 】开发环境搭建详细指南

文章目录 一、准备工作1. 安装 Node.js 和 npm2. 选择代码编辑器 二、创建 React 项目1. 使用 Create React App2. 手动配置 React 项目 三、集成开发工具1. ESLint 和 Prettier2. 使用 Git 进行版本控制 在现代前端开发中,React 是一个非常流行的框架,用…

【日常记录】【插件】Typed.js:用于创建打字效果的 JavaScript 库

文章目录 1. 引言2. 安装3. 基本使用参考链接 1. 引言 Typed.js是一个用于创建打字效果的 JavaScript 库。这个效果就是 chatgpt、百度的文心一言等其他的大模型,回复用户的问题的时候的效果 typed-js 官网typed 案例 2. 安装 CDN方式 这俩都可以,还有其…

在 Windows 上安装 PostgreSQL

官网下载地址: https://www.enterprisedb.com/downloads/postgres-postgresql-downloadsWindows平台 官网直接提供exe安装包,没有手动安装的压缩包 postgresql-14.4-1-windows-x64.exe几个重要的安装选项 安装界面会指定服务程序和库两个路径&#xf…

【JavaScript】深入理解 `let`、`var` 和 `const`

文章目录 一、var 的声明与特点二、let 的声明与特点三、const 的声明与特点四、let、var 和 const 的对比五、实战示例六、最佳实践 在 JavaScript 中,变量声明是编程的基础,而 let、var 和 const 是三种常用的变量声明方式。本文将详细介绍这三种变量声…

Centos7_Minimal安装Cannot find a valid baseurl for repo: base/7/x86_6

问题 运行yum报此问题 就是没网 解决方法 修改网络信息配置文件,打开配置文件,输入命令: vi /etc/sysconfig/network-scripts/ifcfg-网卡名字把ONBOOTno,改为ONBOOTyes 重启网卡 /etc/init.d/network restart 网路通了

pycharm+pytorch+gpu开发环境搭建

一、安装anacoda 1、下载Anaconda安装包 官网下载地址 https://www.anaconda.com/distribution/ 清华镜像 Index of /anaconda/archive/ | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror 下载python3.8对应的版本Anaconda3-2021.04-Windows-x86_64.exe 下载完成…

PCB设计应该注意的问题

1.PCB布局与走线 论文 常见的PCB布局要点 1.放置滤波电容时遵循的的原则为: 放置的位置以靠近器件的引脚为最佳,电容的大小以从大到小以次靠近所要滤波的器件连接处,如一般使用的电容为10uF、1uF、0.1uF、0.01uF等,10倍的差额&a…

实验2-1-4 输出菱形图案

#include<stdio.h> int main(){printf(" A \n");printf("A A\n");printf(" A \n");}

C++《类和对象》(中)

一、 类的默认成员函数介绍二、构造函数 构造函数名与类同名内置类型与自定义类型析构函数拷贝构造函数 C《类和对象》(中) 一、 类的默认成员函数介绍 默认成员函数就是⽤⼾没有显式实现&#xff0c;编译器会⾃动⽣成的成员函数称为默认成员函数。 那么我们主要学习的是1&…

等级保护 总结2

网络安全等级保护解决方案的主打产品&#xff1a; HiSec Insight安全态势感知系统、 FireHunter6000沙箱、 SecoManager安全控制器、 HiSecEngine USG系列防火墙和HiSecEngine AntiDDoS防御系统。 华为HiSec Insight安全态势感知系统是基于商用大数据平台FusionInsight的A…

概率论--矩估计

目录 简介 矩估计法的基本步骤 延伸 矩估计法在大样本情况下的准确性和有效性如何评估&#xff1f; 在实际应用中&#xff0c;矩估计法的局限性有哪些具体例子&#xff1f; 如何处理矩估计法在某些情况下可能出现的不合理解或无法唯一确定参数的问题&#xff1f; …

日常开发记录分享——C#控件ToolTip实现分栏显示内容

文章目录 需求来源实现思路实施请看VCR等等别走&#xff0c;有优化 需求来源 需要在鼠标浮动到指定位置后提示出详细的信息&#xff0c;一开始使用的tooltip实现&#xff0c;但是里面的内容效果并不理想&#xff0c;需要有条理性&#xff0c;于是就想到能不能将展示的东西分列…

鸿蒙(API 12 Beta2版)【创建NDK工程】

创建NDK工程 下面通过DevEco Studio的NDK工程模板&#xff0c;来演示如何创建一个NDK工程。 说明 不同DevEco Studio版本的向导界面、模板默认参数等会有所不同&#xff0c;请根据实际工程需要&#xff0c;创建工程或修改工程参数。 通过如下两种方式&#xff0c;打开工程创…

kafka源码阅读-ReplicaStateMachine(副本状态机)解析

概述 Kafka源码包含多个模块&#xff0c;每个模块负责不同的功能。以下是一些核心模块及其功能的概述&#xff1a; 服务端源码 &#xff1a;实现Kafka Broker的核心功能&#xff0c;包括日志存储、控制器、协调器、元数据管理及状态机管理、延迟机制、消费者组管理、高并发网络…