项目部署（前后端）

一：多环境概念：

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

为什么需要多环境：

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

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

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

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

多环境的分类：

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

二：前端配置多环境：

前端配置我直接一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

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