项目部署(前后端)

一:多环境概念:

借鉴来源:多环境设计_程序员鱼皮-多环境设计-CSDN博客

为什么需要多环境:

第一个例子:我们可以设想,我们肯定玩过王者荣耀,且王者荣耀也一直在不断更新,如果按我们以前的思想,一个项目如果一直在做更新,那项目肯定会不稳定,上线用户也无法使用。

第二个例子:如果本地和线上项目同时操控一个数据库,显而易见:开发人员和用户肯定不能同时操作数据库。

从上面这两个例子中差不多就可以推断出为什么需要多环境了,

多环境就是:根据实际需要,对项目阶段进行部署,相互独立且互相不影响。

多环境的分类:

  1. 本地环境(自己的电脑)localhost(熟悉的localhost)
  2. 开发环境:公司连同一台机器,方便开发
  3. 测试环境:性能测试/功能测试/系统集成测试
  4. 预发布环境(体验服):用正式服的数据再进行测试
  5. 正式环境(线上,公开访问的项目)
  6. 沙箱环境:目的就是为了做实验(做完就销毁)

二:前端配置多环境:

前端配置我直接一ant design pro的项目举例(本人对前端了解甚少)

1:请求地址:
  • 开发环境:localhost:8000
  • 线上环境:user-backend.code-nav.cn
2:启动方式:

npm run start 通常用于启动开发服务器或者应用程序的开发模式。这个命令一般会启动一个开发服务器,监听文件变化并自动重新加载应用,以方便开发人员在开发过程中进行实时调试。这个命令通常用于开发阶段,不会对代码进行优化和压缩,以便开发人员能够方便地调试和查看代码变化。

npm run build 通常用于构建生产环境下的部署包。这个命令会对项目代码进行优化、压缩和打包,以减小文件大小并提高运行效率。通常会生成用于部署的静态文件,准备好被部署到生产服务器上。这个命令一般在项目准备发布时执行,以确保发布的代码是经过优化和压缩的

3:项目的配置:
不同的项目(框架)都有不同的配置文件,umi 的配置文件是 config,可以在配置文件后添加对应的环境名称后缀来区分开发环境和生产环境。参考文档:https://umijs.org/zh-CN/docs/deployment
    • 开发环境:config.dev.ts
    • 生产环境:config.prod.ts
    • 公共配置:config.ts 不带后缀

首先我们需要知道,当我们使用umi框架的时候,build 时会自动传入 NODE_ENV == production 参数

所以我们的思路可是是什么呢

我们可以在前端的拦截器上加一个判断条件,如果NODE_ENV是等于这个prod的,我们就转到我们想要转的地址(user-backend.code-nav.cn)

const request = extend({credentials: 'include', // 默认请求是否带上cookieprefix: process.env.NODE_ENV === 'production' ? 'http://user-backend.code-nav.cn' : undefined// requestType: 'form',
});

 一般上线的话,需要运行build 进行打包构建,然后生成一个dist文件

可以使用 serve 工具启动(npm i -g serve),浏览打包好了的文件 

这个时候我们点开这个3000,我们就可以进入我们的prod环境了。 

三:后端配置多环境: 

后端和前端一样都需要配置文件:

SpringBoot 项目,通过 application.yml 添加不同的后缀来区分配置文件

这里鱼皮是用了一个线上的数据库来做测试,无奈没钱买,只能自己重新创了一个数据库。

这里我建了两个数据库,一个user是一开始开发时候使用的,一个user-prod是测试prod环境使用的。

然后我们运行maven中的package,对项目进行打包
这里有个小插曲

就是package的时候,我们出现了报错,报错提示:是我们的单元测试中有问题,

这个时候我们就可以进行考虑了,如果这个单元测试不重要,我们就可以点击跳过测试模式这个按钮。

 打包完之后,我们在这个打包出来的文件夹(target)的终端中输入

java -jar .\user-center-backend-0.0.1-SNAPSHOT.jar --spring.profiles.active=prod

那一行代码的意思就是往里传了一个环境参数,让前端去访问 user-prod那个数据库

经过测试每啥问题。

网站部署前后端:

前端项目部署:

一:原始部署:

需要 web 服务器:nginx

下面列举一些Nginx安装下载相关代码

curl -o nginx-1.21.6.tar.gz http://nginx.org/download/nginx-1.21.6.tar.gztar -zxvf nginx-1.21.6.tar.gzcd nginx-1.21.637  2022-04-17 23:30:09 yum install pcre pcre-devel -y39  2022-04-17 23:30:59 yum install openssl openssl-devel -y41  2022-04-17 23:31:57 ./configure --with-http_ssl_module --with-http_v2_module --with-stream42  2022-04-17 23:32:13 make43  2022-04-17 23:32:54 make install48  2022-04-17 23:33:40 ls /usr/local/nginx/sbin/nginxvim /etc/profile在最后一行添加:export PATH=$PATH:/usr/local/nginx/sbin	nginxnetstat -ntlp 查看启动情况

 原始部署用得有点少。

这里推荐一个连接虚拟机的工具:xshell

那里的主机填服务器IP

然后后面的账号(root)和密码。

这样就算连接成功了。

二:宝塔Linux部署:

宝塔linux配置在下面这篇博客:

服务器配置(初始化)-CSDN博客

后端项目部署:

一:原始部署:

这一块不做过多介绍,就是到xshell里面去敲命令

二:宝塔Linux部署:

1:打包java文件,并将文件放到宝塔面板中:

新建一个文件夹,在idea中将文件打开于资源管理器,

然后直接把打包好的文件拖进来就行

2:在宝塔中部署后端项目:

/usr/bin/java  -jar -Xmx1024M -Xms256M  /www/wwwroot/User-Center/UserCenterProject-0.0.1-SNAPSHOT.jar --server.port=8080
--spring.profiles.active-prod

注意点:

1:如果配置完以上信息之后,没有任何提示,只出现了一个红叉叉

就说明这个时候你指定的端口被占用了

解决办法:

如果是8080端口的话:就去软件商店里面把tomcat关掉

2:防火墙的配置包括宝塔面板里面的和服务器的配置

碰到的第一个bug:

在说碰到的bug之前,

我们要先知道去哪里能看到报错信息

这个配置好之后,你直接点启动,宝塔面板会提示你启动成功,不过你看到那个项目还是红色的未启动状态,这真的很坑

所以这个时候如果我们发现启动不了,然后又不报错,我们可以有以下两个方式来看报错:

1:xshell

这样你就可以看到报错了。

2:宝塔面板中的有项目日志(这个真的是后面才发现的)

 

ok,说明了在哪里能看到报错信息

我们再说一下碰到的bug:

Java .lang. unsupportedclassversionerror: com/usercenter/usercenterproject/UserCenterProjectApplication已被最新版本的Java运行时(类文件版本61.0)编译,此版本的Java运行时仅识别类文件版本高达52.0
 Java .lang. unsupportedclassversionerror

Java .lang. unsupportedclassversionerror:已被最新版本的Java运行时(类文件版本61.0)编译,此版本的Java运行时仅识别类文件版本高达52.0

其实说起来就是你的JDK版本和运行环境的版本不一致

解决办法:

在springboot项目中手动降低springboot的版本和java版本

碰到的第二个bug:

做完上述步骤之后,发现项目还是跑不起来

这个bug蛮离谱,我其实不是很懂这个为什么会出这样的bug,不过还是在此记录一下把。


访问了公网ip/api,发现打不开这个网址

然后用netstat -ntlp在xshell里面查看了一下网络信息,发现只有IPv6启动了,IPv4的没启动

问了一下GPT 

回答说:应用程序只监听了IPv6地址

解决办法:

在springboot项目依赖中加入

server:address: 0.0.0.0

通过将 server.address 设置为 0.0.0.0, Spring Boot 应用程序将监听所有可用的网络接口,而不仅仅是本地环回接口(localhost)。这意味着您可以通过任何网络接口(包括公共 IP 地址)来访问您的应用程序。

运行成功结果:

Docker部署前后端:

说Docker之前,我们可以先了解一个概念:镜像

 什么是镜像呢?

镜像(Mirroring)是一种文件存储形式,是冗余的一种类型,一个磁盘上的数据在另一个磁盘上存在一个完全相同的副本即为镜像。

我觉得可以理解为一份文件的副本。

Docker是什么:

Docker是一个开源的容器引擎,它有助于更快地交付应用。 Docker可将应用程序和基础设施层隔离,并且能将基础设施当作程序一样进行管理。使用 Docker可更快地打包、测试以及部署应用程序,并可以缩短从编写到部署运行代码的周期。

稍微翻译一下就是docker是一个容器,可以将项目环境和项目代码一起打包成一个镜像,所有人都能下载和访问

以后想再启动项目,直接下载镜像就行

也可以把docker理解为软件安装包

Dockerfile:用于指定构建Docker镜像的方法

一般把这个Dockerfile放在自己项目的根目录下。

Dockerfile的编写方法:

先来看几个Dockerfile的案例把

第一个Dockerfile案例:
FROM maven:3.8.1-jdk-8-slim as builder# Copy local code to the container image.
WORKDIR /app
COPY pom.xml .
COPY src ./src# Build a release artifact.
RUN mvn package -DskipTests# Run the web service on container startup.
CMD ["java","-jar","/app/target/UserCenterProject-0.0.1-SNAPSHOT.jar","--spring.profiles.active=prod"]
  • from 依赖的基础镜像
  • workdir 工作目录
  • copy 从本机复制文件
  • run 执行命令
  • cmd 指定运行容器时默认执行的命令
# Use an official OpenJDK runtime as a parent image
FROM openjdk:17-jdk-alpine# Set the working directory in the container
WORKDIR /app# Copy the jar file into the container
COPY target/UserCenterProject-0.0.1-SNAPSHOT.jar app.jar# Expose the port that the application will run on
EXPOSE 8080# Set the entrypoint to run the jar file
ENTRYPOINT ["java", "-jar", "app.jar"]
这是第二个个Dockerfile。
这也是我今天在docker部署时候碰到的问题:

就是我的jdk版本太高了,导致第一个Dockerfile不能编译

报错如下:

 DEPRECATED:遗留构建器已弃用,并将在将来的版本中删除。安装builddx组件来使用BuildKit构建映像:https://docs.docker.com/go/buildx/向Docker守护进程发送构建上下文24.98MB步骤1/6:FROM maven:3.8.1-jdk-8-slim作为构建器——> f90395d2a40e步骤2/6:WORKDIR /app-->使用缓存- > 3 e606b4c686f步骤3/6:复制pom.xml。复制失败:文件未在构建上下文中找到或被.dockerignore: stat排除。

这个报错我觉得蛮离谱。报错提示我找不到pom.xml文件

不过我后面真正解决了这个报错的时候,我时修改了我的Dockerfile文件。

特此记录一下

第三个Dockerfile的案例是前端的:
FROM nginxWORKDIR /usr/share/nginx/html/
USER rootCOPY ./docker/nginx.conf /etc/nginx/conf.d/default.confCOPY ./dist  /usr/share/nginx/html/EXPOSE 80CMD ["nginx", "-g", "daemon off;"]

 介绍我Docker的基础知识之后,我们来介绍Docker的重头戏

Docker构建镜像和在容器中运行:

第一种Docker构建镜像的方式:

由Docker的命令来构造:

 1:先用git拉取一下前端代码:
git clone https://gitee.com/i-need-200/user-center.git
2:运行构建镜像的命令:
user-center-frontend>> sudo docker build -t user-center-frontend:v0.0.1 .
这里又有一个报错:

 报错提示:没有./dist 文件

这里我直接在Dockerfile中把Copy dist巴拉巴拉哪一行给删了,

然后看似是构建成功了,随后访问的时候,发现出现了nginx的页面

我感觉有时候还是不能骗自己,感觉删了就一了百了

正确的方法是:

直接把前端项目中的dist文件夹拉到docker文件中

拉进去之后在构建就不会出错了。

3:将构建的镜像在容器中运行:
docker run -p 80:80 -d user-center-frontend:v0.0.1

到时候这里会显示正在运行: 

第二种Docker构建镜像的方式:

在宝塔面板平台直接构建:

这种方式看似是方便了,不能敲好多命令,不过我感觉这个文件的路径我们得去很仔细的看。

1:把后端打包好的jar包放到宝塔文件中去

我这个的dockerfile是在这个目录外面的

这个就是我上面提到的问题了,就是我看有些人构建java项目的时候,就是把这个文件放在里面,我感觉可能和这个dockerfile文件中的内容有关系。 

2:直接构建就行:

3:第三步在容器中运行

最后结果:

后端:

 

 Docker的常用命令:

1:构建命令
sudo docker build -t user-center-frontend:v0.0.1 .

这个就是最基础的构建镜像的命令

sudo:表示有管理员的权限

user-center-frontend:表示这个镜像的名称

v0.0.1 . :表示这个镜像的版本(以后可以更新迭代,比如v0.0.1)

2:查看镜像命令:
docker images

查看镜像,我感觉这一行命令把没啥用,我们可以直接在宝塔面板中看到

3:启动镜像命令:
# 前端
docker run -p 80:80 -d user-center-frontend:v0.0.1
(-d 后台启动)
# 后端
docker run -p 8080:8080 user-center-backend:v0.0.1

虚拟化
1. 端口映射:把本机的资源(实际访问地址)和容器内部的资源(应用启动端口)进行关联
2. 目录映射:把本机的端口和容器应用的端口进行关联

4:进入容器命令:
docker exec -i -t  fee2bbb7c9ee /bin/bash

这里面fee2~就是自己的镜像id或者名称

这个命令的用处:

就是我上面碰到的一个坑:

我那个时候把dist文件没有构建到镜像中去,可以运行,不过前端界面显示nginx的页面

这个时候鱼皮给我提供了一种思路:

就是进入这个镜像去找nginx底下的配置文件

果然很快发现问题,没有文件,当然直接显示默认文件

(不得不说这个解决问题的思路真很快,要是我碰到这个问题,我应该会去搜索csdn)

5:杀死容器命令:

进入了一个镜像,我们出来的时候就得把它杀喽

docker kill + 镜像名
6:查看进程命令(查看正在运行的容器)
docker ps

这个命令也不多说,其实在宝塔面板可以直接看

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

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

相关文章

短视频五大要素:成都科成博通文化传媒公司

短视频五大要素:揭秘成功视频的关键 在数字媒体时代,短视频已成为人们生活中不可或缺的一部分。无论是社交平台的日常分享,还是品牌营销的重要工具,短视频都以其短小精悍、内容丰富的特点赢得了广泛的关注和喜爱。然而&#xff0…

9种编程语言的对比分析

在当今的软件开发领域,编程语言扮演着至关重要的角色。不同的编程语言各有其特点和适用场景,选择合适的编程语言能够提高开发效率和软件质量。本文将对十种常见的编程语言进行对比分析,帮助读者了解它们的优缺点和适用场景。 Java 特点&…

freemarker 使用

首次使用freemarker遇到的全是坑,还好,各种问题,最终都解决了。芹菜加油 import com.lowagie.text.pdf.BaseFont; import org.apache.commons.logging.Log; import org.apache.commons.logging.LogFactory; import org.xhtmlrenderer.pdf.ITextRenderer;import java.io.Byte…

智能化软件开发微访谈·第三十一期 代码大模型训练、微调与增强

CodeWisdom “智能化软件开发沙龙是由CodeWisdom团队组织的围绕智能化软件开发、数据驱动的软件开发质量与效能分析、云原生与智能化运维等相关话题开展的线上沙龙,通过微信群访谈交流等线上交流方式将学术界与工业界专家学者汇聚起来,共同分享前沿研究进…

领夹麦克风哪个品牌音质最好?轻揭无线麦克风哪个品牌性价比高!

​随着短视频热潮的兴起,越来越多的人倾向于用vlog记录日常生活,同时借助短视频和直播平台开辟了副业。在这一过程中,麦克风在近两年内迅速发展,从最初的简单收音功能演变为拥有多样款式和功能,以满足视频创作的需求。…

【C++】AVL树/红黑树实现及map与set的封装

前言 【C】二叉树进阶(二叉搜索树) 这篇文章讲述了关于二叉搜索树知识,但是二叉搜索树有其自身的缺陷,假如往树中插入的元素有序或者接近有序,二叉搜索树就会退化成单支树,时间复杂度会退化成O(N)&#xff…

如何在Windows 10中恢复已删除的文件?

在 Windows 10 电脑上删除文件是一种常见的操作。如果你不需要某个文件,你会删除它。如果电脑空间用完了,你会尝试删除一些文件以释放更多空间。此外,你可以尝试清理电脑,使用电脑清理工具删除文件。 但是,如果您在 W…

如果供应商不能按时交货怎么办?

虽然说我们在采购的时候,我们会和供应商签订合同,合同上也会注明交期时间等一些必需的条件。 但是当供货商真的没有如期交货,或者交货拖延的时候,我们第一时间选择的是拿起法律武器来让对方承担违约责任吗? 显然,这选…

地表位移监测系统:原理、组成与功能

地表位移监测系统是一项用于实时监测地表下沉、沉降、地面位移和地下水位变化的关键工具。本文将介绍该系统的工作原理、系统组成、工作模式以及功能特点,以便更深入地了解如何有效利用该系统进行沉降监测。 一、工作原理 地表位移监测系统主要由位移监测站、数据采…

揭秘未来:用线性回归模型预测一切的秘密武器!

线性回归模型 1. 引言2. 理论基础2.1 线性回归模型的定义与原理原理与关键假设模型参数估计 2.2 模型评估指标2.2.1 残差分析2.2.2 拟合优度指标2.2.3 统计检验 3. 应用场景3.1. 金融领域中的应用3.2. 医疗健康领域中的应用3.3. 其他领域的应用 4. 实例分析4.1、数据集选择4.2、…

服务器数据恢复—OceanStor存储中NAS卷数据丢失如何恢复数据?

服务器存储数据恢复环境&故障: 华为OceanStor某型号存储。工作人员在上传数据时发现该存储上一个NAS卷数据丢失,管理员随即关闭系统应用,停止上传数据。这个丢失数据的卷中主要数据类型为office文件、PDF文档、图片文件(JPG、…

❤ npm运行打包报错归纳

❤ 前端运行打包报错归纳 (安装依赖)Cannot read property ‘pickAlgorithm’ of null" npm uninstall //删除项目下的node_modules文件夹 npm cache clear --force //清除缓存后 npm install //重新安装 备用安装方式 npm install with --for…

微信小程序添加服务类目|《非经营性互联网信息服务备案核准》怎么获取

根据客服反馈,《非经营性互联网信息服务备案核准》在工业和信息化部政务服务平台网站查询,查询结果的截图就是《非经营性互联网信息服务备案核准》。 工业和信息化部政务服务平台 《非经营性互联网信息服务备案核准》: 与客服聊天的截图&a…

SpringBoot如何自定义启动Banner 以及自定义启动项目控制台输出信息 类似于若依启动大佛 制作教程

前言 Spring Boot 项目启动时会在控制台打印出一个 banner,下面演示如何定制这个 banner。 若依也会有相应的启动动画 _ooOoo_o8888888o88" . "88(| -_- |)O\ /O____/---\____. \\| |// ./ \\||| : |||// \/ _||||| -:- |||||- \| | \\…

第二十一章 访问者模式

目录 1 访问者模式介绍 2 访问者模式原理 3 访问者模式实现 4 访问者模式总结 1 访问者模式介绍 访问者模式(Visitor Pattern) 的原始定义是:允许在运行时将一个或多个操作应用于一组对象,将操作与对象结构分离 2 访问者模式原理 抽象访问者&#xf…

DS18B20温度传感器完整使用介绍(配合51单片机)

DS18B20是一款由Maxim Integrated(原Dallas Semiconductor)生产的数字温度传感器,以其高精度、低功耗、灵活的接口方式和易于使用的特性,在各种温度监测应用中被广泛采用。 以下是DS18B20的详细介绍: 基本特性 数字输…

C++的map

作用&#xff1a; 映射&#xff0c;相当于python的字典&#xff0c;使用一个key来寻找value&#xff0c;m[key]value; 生成&#xff1a; map<int,string> m;//无参生成&#xff0c;key是int类型&#xff0c;value是string类型 map<int,string> m{{1,"hello…

【docker实战】使用Dockerfile的COPY拷贝资源遇到的问题

事情是这样的。 在我负责的golang项目中&#xff0c;使用硬代码验证某块逻辑。比如&#xff1a; 于是&#xff0c;为了解决硬代码的问题&#xff0c;我制作了表格工具&#xff1a;【开源项目】Excel数据表自动生成工具v1.0版 – 经云的清净小站 (skycreator.top)。 使用表格工…

『C++11』基础新特性

&#x1f525;博客主页&#xff1a; 小羊失眠啦. &#x1f3a5;系列专栏&#xff1a;《C语言》 《数据结构》 《C》 《Linux》 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 前言 自从C98以来&#xff0c;C11无疑是一个相当成功的版本更新。它引入了许多重要的语言特性和标准…

ADS基础教程21 - 电磁仿真(EM)模型的远场和场可视化

模型的远场和场可视化 一、引言二、操作步骤1.定义参数2.执行远场视图&#xff08;失败案例&#xff09;3.重新仿真提取参数 三、总结 一、引言 本文介绍电磁仿真模型的远场和场可视化。 二、操作步骤 1.定义参数 1&#xff09;在Layout视图&#xff0c;工具栏中点击EM调出…