25、全栈开发：从基础到持续集成与部署

最新推荐文章于 2025-11-21 22:02:41 发布

lemon

最新推荐文章于 2025-11-21 22:02:41 发布

阅读量41

点赞数

CC 4.0 BY-SA版权

分类专栏： Quarkus与React全栈实战文章标签：全栈开发 Quarkus React

本文链接：https://blog.youkuaiyun.com/lemon/article/details/152532142

Quarkus与React全栈实战专栏收录该内容

25 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

全栈开发：从基础到持续集成与部署

1. 持续集成与 GitHub Actions

1.1 持续集成、交付与部署概念

持续集成（CI）是软件开发中的重要实践，它强调频繁地将代码集成到共享仓库，并通过自动化测试来确保代码的质量。持续交付（CD）是 CI 的自然延伸，在成功构建和测试后，代码准备好部署到生产环境。而持续部署则更进一步，自动将代码部署到生产环境。

1.2 GitHub Actions 概述

GitHub Actions 与 GitHub 生态系统紧密集成，可用于实现成功的 CI 开发实践。它允许定义必要的检查，在合并拉取请求前确保构建成功，为更复杂的开发工作流（如持续交付或部署）打下基础。

1.3 创建 CI 管道步骤

初始化本地 Git 仓库 ：执行命令 git init -b main 来初始化本地仓库。
生成个人访问令牌（PAT） ：在 GitHub 中生成 PAT，用于后续操作。
创建 GitHub 仓库 ：在 GitHub 上创建项目仓库，并将本地应用文件推送到该仓库。
创建 GitHub Actions 工作流 ：通过编写配置文件，定义构建和测试项目的步骤，确保未来的代码更改不会破坏应用程序。

2. 全栈开发基础技术

2.1 Quarkus 框架

框架简介 ：Quarkus 是类似于 Spring Boot 的 Java 网络应用框架，专注于减少应用启动时间和内存占用，提升开发者体验。
项目创建 ：可通过 CLI 工具、Maven 目标或使用 https://code.quarkus.io 页面创建 Quarkus 项目。
开发模式运行 ：使用命令 ./mvnw quarkus:dev 以开发模式运行 Quarkus 项目。
测试驱动开发（TDD） ：TDD 是一种软件开发过程，旨在提高开发者生产力和代码质量。
应用打包 ：运行 ./mvnw clean package 命令可轻松打包 Quarkus 应用。

2.2 Hibernate 与数据库操作

Hibernate 简介 ：Hibernate 是 Java 中成熟的对象关系映射（ORM）库，提供 Java 持久化 API（JPA）规范的实现。
反应式持久层 ：使用 Quarkus 可实现完全反应式的持久层。
实体实现 ：通过扩展 PanacheEntity 基类，可在 Quarkus 中实现利用 Active Record 模式的实体。
初始数据加载 ：使用 quarkus.hibernate-orm.sql-load-script 配置选项和资源文件夹中的 SQL 脚本，可轻松加载应用的初始数据到数据库。
Quarkus Dev Services ：在开发模式或集成测试阶段，Quarkus Dev Services 会自动配置应用依赖的服务容器。

2.3 REST 端点开发

RESTEasy Reactive ：可用于实现阻塞和非阻塞的 REST 端点。
Mutiny 类型 ：Mutiny 提供 Uni 和 Multi 两种类型来启动反应式管道。
Bean 管理 ：Bean 是由 CDI 容器管理的对象，支持生命周期回调、依赖注入和拦截器等服务。在 Quarkus 中，使用 @ApplicationScoped 注解可轻松声明单例 Bean。
密码哈希 ： bcrypt 是首选的密码哈希函数，因其算法缓慢，能更好地抵御暴力攻击。
路径参数处理 ：在 Quarkus 中，可通过在路径中使用花括号声明路径参数，并使用 @PathParam 注解获取参数值。
JSON 响应 ：若响应类型为 JSON 且声明了 quarkus-resteasy-reactive-jackson 依赖，则无需添加 @Produces 注解。
异常处理 ：实现 ExceptionMapper 类可将 Java 异常映射为 HTTP 响应。

2.4 JWT 安全

JWT 概念 ：JWT 即 JSON Web Token，是用于在两方之间安全交换声明的标准。
签名验证 ：验证 JWT 签名需要公钥。
JWT 生成 ：在 Quarkus 中，可使用 SmallRye JWT 构建依赖生成 JWT。
密钥存储 ：需要存储配置的密钥副本，且密钥存储路径的配置可在运行时覆盖。
配置值获取 ：使用 @ConfigProperty 注解可在 Quarkus 中获取配置值。
角色注解优先级 ：若 @RolesAllowed 注解同时应用于类和方法，方法注解优先级更高。

2.5 测试相关

测试环境数据添加 ：使用 %test.quarkus.hibernate-orm.sql-load-script 配置属性和资源文件夹中的 SQL 脚本，可向测试环境数据库添加数据。
测试套件创建 ：在 IntelliJ 中，右键单击生产类声明，选择“Go To Test”菜单可自动创建测试套件类。
Quarkus 测试 ：运行 Quarkus 测试时，Quarkus 会在后台启动应用程序。
测试安全注解 ： @TestSecurity 注解可在测试运行时覆盖应用的安全上下文。

2.6 GraalVM 与原生镜像

GraalVM Native Image 简介 ：GraalVM Native Image 是一种提前编译技术，可生成独立的原生可执行文件。
Quarkus 优势 ：Quarkus 将许多常规 Java 应用在运行时执行的任务移至构建阶段，大幅减少启动时间。
性能影响 ：原生镜像打包并非总是能提高应用性能，短生命周期应用更适合使用原生镜像打包。
资源包含 ：使用 quarkus.native.resources.includes 配置属性可在应用的原生镜像中包含额外资源。
容器化原因 ：应用通常以 Linux 容器镜像的形式分发。

2.7 React 前端开发

Material Design ：Google 创建的设计系统，为创建用户界面提供最佳实践和原则。
前端路由库 ：前端路由库可创建可书签化且用户友好的 URL，但 React 不规定使用特定的路由库。
Redux Toolkit ：是 Redux 的一种有倾向性的分发方式，包含简化常见用例配置的实用工具。
React 钩子 ：允许用户在不编写类的情况下使用状态和其他功能。
JSX ：React 提供的 JavaScript 扩展，用于编写组件。
React 准则 ：推荐使用组合方式构建组件。

2.8 前后端交互与测试

跨域资源共享（CORS） ：服务器使用 CORS 机制与不同源共享资源。
API 消费与存储 ：使用 Redux Toolkit Query 的 createApi 函数可轻松消费 HTTP API 并将结果持久化到 Redux 存储中。
Redux Toolkit Query 操作 ：支持只读查询操作和读写突变操作。
Snackbars 显示 ：在 Material Design 中，Snackbars 用于在屏幕底部显示临时短消息。
React 开发服务器 ：默认 URL 为 http://localhost:3000 。

2.9 组件与状态管理

MUI 组件 ： Alert 组件是显示吸引用户注意力的短消息的最合适选择。
状态管理 ：React 的 useState 钩子用于在组件内保留本地状态。
模态对话框按钮 ：模态对话框中的操作按钮通常位于底部。
Redux 集成 ：需将 reducer 及其中间件添加到主应用的存储中。
路由参数配置 ：配置路由路径时定义参数，可使用 useParams 钩子获取参数值。

2.10 测试相关技术

测试用例分组 ： describe 函数块用于分组相关的测试用例。
前置函数执行 ：Jest 在执行 describe 块内的任何测试之前，仅执行一次 beforeAll 函数。
异步测试 ：可在 Jest 中运行异步测试。
用户输入模拟 ：使用 userEvent 函数可模拟用户在文本字段中输入。
代码覆盖率计算 ：使用 Create React App 测试脚本和 Jest，在执行 npm test 命令时指定 --coverage 参数即可轻松计算代码覆盖率。

2.11 微服务架构

微服务优势 ：微服务易于扩展、提供高冗余性，且与编程语言无关。
微服务劣势 ：需要额外的基础设施，调试困难，处理数据一致性和事务性时更具挑战性。
资源配置 ：可使用 Maven Resources Plugin 的 resources 配置，为每个位置添加条目，以包含多个位置的资源。
程序执行 ：Maven Exec 插件允许在单独的进程中执行程序和 Java 程序。
原生镜像资源包含 ：可使用 quarkus.native.resources.includes 配置属性或 resources-config.json 配置文件在原生镜像中包含额外资源。

2.12 Kubernetes 与容器管理

Kubernetes 功能 ：Kubernetes 用于管理基于容器的应用程序。
容器化应用 ：通过容器镜像分发的应用程序，使系统管理员能以统一和一致的方式管理应用。
容器优势 ：提供环境一致性、轻量级运行时、高效资源消耗等优势。
Kubernetes Pod ：表示 Kubernetes 中最小的可部署计算单元。
Kubernetes Ingress ：用于配置对集群中部署的服务的外部访问和路由。
Jib 工具 ：Jib 可在不使用 Docker 兼容守护进程的情况下构建和推送容器镜像。

2.13 Fly.io 部署

Fly.io 优势 ：允许开发者将工作负载部署到离用户近的地方，改善应用的延迟和性能。
数据库 URL 覆盖 ：运行 Quarkus 原生应用时，可通过提供 -Dquarkus.datasource.reactive.url 命令行参数覆盖配置的数据库 URL。
JKube 支持 ：JKube 支持 Dockerfiles。
部署配置 ： flyctl 从 fly.toml 文件读取应用的部署配置。
容器镜像部署 ：可将现有容器镜像部署到 Fly.io。

2.14 任务管理器应用实践

业务逻辑实现 ：实现任务管理器的业务逻辑，包括 ProjectService 、 TaskService 和 UserService 等服务类。
数据模型构建 ：创建任务管理器的数据模型，包括 Project 、 Task 和 User 等实体，并加载初始数据。
安全实现 ：为任务管理器应用实现安全功能，如 JWT 认证和授权。
前端开发 ：创建 React 前端界面，包括登录页面、任务管理页面和用户管理页面等。
测试与部署 ：对任务管理器应用进行全面测试，并将其部署到不同的环境中，如 Kubernetes 集群或 Fly.io。

通过以上技术的综合应用，开发者可以构建出高效、安全、可扩展的全栈 Web 应用程序，并实现持续集成和部署的开发流程。

技术对比表格

技术	优点	缺点
微服务	易于扩展、高冗余、语言无关	需要额外基础设施、调试困难、数据一致性挑战
单体应用	开发简单、部署方便	扩展性差、维护困难

开发流程 mermaid 流程图

graph LR
    A[需求分析] --> B[Quarkus 后端开发]
    B --> C[数据库设计与操作]
    C --> D[REST 端点实现]
    D --> E[安全配置]
    E --> F[React 前端开发]
    F --> G[前后端交互]
    G --> H[测试]
    H --> I[持续集成与部署]

以上内容涵盖了全栈开发从基础技术到持续集成与部署的各个方面，为开发者提供了全面的技术指导和实践思路。

3. 任务管理器应用的详细实现与测试

3.1 任务管理器业务逻辑实现

任务管理器的业务逻辑主要通过几个核心服务类来实现：
- UserService ：负责用户相关的操作，如创建用户、删除用户、查找用户等。以下是部分代码示例：

public class UserService {
    public User create(User user) {
        // 创建用户的具体逻辑
    }
    public void delete(long id) {
        // 删除用户的具体逻辑
    }
    public User findById(long id) {
        // 根据 ID 查找用户的具体逻辑
    }
    // 其他方法...
}

ProjectService ：处理项目相关的操作，包括创建项目、更新项目、删除项目等。

public class ProjectService {
    public Project create(Project project) {
        // 创建项目的具体逻辑
    }
    public void update(Project project) {
        // 更新项目的具体逻辑
    }
    public void delete(long id) {
        // 删除项目的具体逻辑
    }
    // 其他方法...
}

TaskService ：负责任务的管理，如创建任务、完成任务、更新任务等。

public class TaskService {
    public Task create(Task task) {
        // 创建任务的具体逻辑
    }
    public void setComplete(long id, boolean complete) {
        // 设置任务完成状态的具体逻辑
    }
    public void update(Task task) {
        // 更新任务的具体逻辑
    }
    // 其他方法...
}

3.2 任务管理器数据模型实现

任务管理器的数据模型通过实体类来定义，主要包括 User 、 Project 和 Task 实体：
- User 实体 ：包含用户的基本信息，如用户名、密码等。

@Entity
public class User extends PanacheEntity {
    public String username;
    public String password;
    // 其他属性和方法...
}

Project 实体 ：代表项目，包含项目的名称、描述等信息。

@Entity
public class Project extends PanacheEntity {
    public String name;
    public String description;
    // 其他属性和方法...
}

Task 实体 ：表示任务，包含任务的标题、内容、所属项目等信息。

@Entity
public class Task extends PanacheEntity {
    public String title;
    public String content;
    @ManyToOne
    public Project project;
    // 其他属性和方法...
}

3.3 任务管理器安全配置

为了确保任务管理器应用的安全性，需要进行一系列的安全配置：
1. JWT 认证与授权 ：使用 JWT 进行用户认证和授权，生成密钥文件，实现认证服务和登录接口。
2. HTTP 资源安全 ：对 HTTP 资源进行保护，只允许授权用户访问特定的资源。
3. 密码哈希 ：使用 bcrypt 对用户密码进行哈希处理，提高密码的安全性。

3.4 任务管理器前端开发

前端使用 React 进行开发，创建了多个页面和组件：
- 登录页面 ：实现用户登录功能，管理前端会话。
- 任务管理页面 ：展示任务列表，支持任务的创建、编辑和删除操作。
- 用户管理页面 ：管理用户信息，包括用户的创建、更新和删除。

3.5 任务管理器应用测试

对任务管理器应用进行全面的测试，包括单元测试和集成测试：
- 单元测试 ：对各个服务类的方法进行单独测试，确保其功能的正确性。
- 集成测试 ：测试不同模块之间的交互，如前后端的交互、不同服务之间的协作等。
- 功能测试 ：测试应用的各种功能，如用户登录、任务创建、项目管理等。

以下是一个简单的 Jest 单元测试示例：

import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

4. 持续集成与部署实践

4.1 GitHub Actions 实现持续集成

使用 GitHub Actions 创建持续集成管道，确保代码的质量和稳定性：
1. 初始化本地 Git 仓库 ：执行 git init -b main 命令。
2. 生成个人访问令牌（PAT） ：在 GitHub 账户中生成 PAT，用于访问仓库。
3. 创建 GitHub 仓库 ：在 GitHub 上创建项目仓库，并将本地代码推送到仓库。
4. 创建 GitHub Actions 工作流 ：编写 .github/workflows/main.yml 文件，定义构建和测试步骤。以下是一个简单的工作流示例：

name: CI

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Set up Java
        uses: actions/setup-java@v2
        with:
          java-version: '11'
          distribution: 'adopt'

      - name: Build and test
        run: ./mvnw clean package

4.2 部署到不同环境

可以将任务管理器应用部署到不同的环境中，如 Kubernetes 集群和 Fly.io：

4.2.1 部署到 Kubernetes

配置集群 ：调整集群配置清单，使用 Eclipse JKube 或 Kubernetes Maven Plugin 来构建和部署容器镜像。
部署应用 ：使用 kubectl 命令将应用部署到 Kubernetes 集群。

4.2.2 部署到 Fly.io

创建 Fly.io 账户 ：在 Fly.io 上创建账户，并登录。
配置项目 ：设置 Maven 配置文件，创建 Dockerfile，配置 fly.toml 文件。
部署应用 ：使用 flyctl 命令将应用部署到 Fly.io。

5. 总结与展望

5.1 技术总结

通过本文的介绍，我们涵盖了全栈开发从基础技术到持续集成与部署的各个方面，包括 Quarkus 后端开发、React 前端开发、数据库操作、安全配置、测试和部署等。这些技术的综合应用可以帮助开发者构建高效、安全、可扩展的全栈 Web 应用程序。

5.2 未来展望

随着技术的不断发展，全栈开发将面临更多的挑战和机遇。未来，我们可以进一步探索以下方向：
- 微服务架构的优化 ：进一步优化微服务架构，提高系统的性能和可扩展性。
- 人工智能与机器学习的集成 ：将人工智能和机器学习技术集成到应用中，提供更智能的服务。
- 区块链技术的应用 ：探索区块链技术在全栈开发中的应用，提高数据的安全性和可信度。

部署环境对比表格

部署环境	优点	缺点
Kubernetes	强大的容器编排能力、高可用性、可扩展性强	配置复杂、学习成本高
Fly.io	部署简单、接近用户、性能优化	功能相对有限、依赖网络环境

持续集成与部署 mermaid 流程图

graph LR
    A[代码提交] --> B[GitHub Actions 触发]
    B --> C[代码构建]
    C --> D[单元测试]
    D --> E[集成测试]
    E --> F{测试是否通过}
    F -- 是 --> G[部署到 Kubernetes]
    F -- 否 --> H[反馈错误信息]
    G --> I[部署到 Fly.io]

通过以上内容，开发者可以全面了解全栈开发的技术体系和实践方法，为实际项目的开发提供有力的支持。