20、从 Quarkus 提供 React 应用服务及部署到 Kubernetes

lemon

于 2025-09-30 12:06:02 发布

阅读量28

点赞数

CC 4.0 BY-SA版权

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

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

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

25 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

从 Quarkus 提供 React 应用服务及部署到 Kubernetes

1. 配置 Maven 构建以包含前端资源

在集成 React 前端和 Quarkus 后端时，我们需要配置 Maven 构建来包含前端文件。其中一段代码展示了第二次执行的配置，它会运行 npm run build 来执行前端项目的构建和文件生成：

                </workingDirectory>
              <executable>npm</executable>
              <arguments>
                <argument>run</argument>
                <argument>build</argument>
              </arguments>
            </configuration>
          </execution>
        </executions>

这个执行的配置与 npm - install 类似，但会执行 npm run build 。需要注意的是，每个执行项的 execution id 是唯一的，Exec Maven Plugin 会按照 pom.xml 文件中定义的顺序执行每个具有唯一 id 的项。

2. Quarkus Quinoa 扩展

Quarkus Quinoa 是一个正在开发中的 Quarkus 扩展，它可以以一种既定的方式帮助我们自动化完成本章涉及的一些任务。该扩展旨在简化单页应用（SPA）的开发和服务，同时与 Quarkus 应用集成。你可以在 Quarkus Quinoa 文档中了解更多信息。

3. 创建 HTTP 资源以从 Quarkus 提供 React 应用服务

将 Quarkus 后端与 React SPA 前端集成的关键部分是让 Quarkus 后端能够提供 React SPA 前端文件。我们通过创建一个名为 GatewayResource 的类来实现额外的 HTTP 端点：

@Path("/")
public class GatewayResource {
    private static final String FALLBACK_RESOURCE =
  "/frontend/index.html";
    @GET
    @Path("/{fileName:.+}")
    public RestResponse<InputStream> getFrontendStaticFile
    (@PathParam("fileName") String fileName) throws IOException {
      final InputStream requestedFileStream = GatewayResource.
        class.getResourceAsStream("/frontend/" + fileName);
      final InputStream inputStream;
      inputStream = Objects.requireNonNullElseGet
        (requestedFileStream, () ->
        GatewayResource.class.getResourceAsStream
          (FALLBACK_RESOURCE));
      return RestResponse.ResponseBuilder
        .ok(inputStream)
        .cacheControl(CacheControl.valueOf("max - age=900"))
        .type(URLConnection.guessContentTypeFromStream
          (inputStream))
        .build();
    }

    @GET
    @Path("/")
    public RestResponse<InputStream> getFrontendRoot() throws 
    IOException {
      return getFrontendStaticFile("index.html");
    }
}

@Path("/") 注解将该类配置为在根路径下暴露其定义的所有端点，这会覆盖静态资源的默认设置。
getFrontendStaticFile 方法实现了网关的核心逻辑。它尝试查找指定文件名或路径的前端资源，如果找到则将其流式传输给用户；如果未找到，则流式传输 index.html 文件。在返回语句中，我们构建响应，包括 15 分钟的缓存配置和文件的 MIME 类型。
getFrontendRoot 方法配置为响应应用根路径的 HTTP GET 请求，它调用 getFrontendStaticFile 方法并传入 "index.html" 参数。

4. 运行应用程序

在之前的章节中，我们通常通过启动两个进程（ ./mvnw quarkus:dev 和 npm start ）以开发模式运行应用程序。现在，我们可以将应用程序作为单个组件运行：
1. 启动 PostgreSQL 数据库 ：如果本地环境中没有 PostgreSQL 实例，可以使用 Docker 容器创建一个：

docker run --rm --name postgresql -p 5432:5432 -e POSTGRES_PASSWORD=pgpass -d postgres

构建应用程序 ：执行以下命令构建包含前端的应用程序：

./mvnw -Pfrontend clean package

运行应用程序 ：

java -Dquarkus.datasource.username=postgres -Dquarkus.datasource.password=pgpass -Dquarkus.datasource.reactive.url=postgresql://localhost:5432/postgres -Dquarkus.hibernate - orm.database.generation=create -jar target/quarkus - app/quarkus - run.jar

运行后，我们可以在浏览器中访问 http://localhost:8080 ，浏览器会自动重定向到登录页面，使用管理员凭据（ admin/quarkus ）登录后，应用程序的所有功能都应正常工作。

5. 配置原生构建

如果我们想将应用程序打包为原生二进制文件以提高启动时间和内存占用，需要进行额外的配置：
- 包含前端资源 ：我们创建一个 resources - config.json 文件来告诉 GraalVM 包含前端资源：

{
  "resources": [
    {
      "pattern": "^frontend.*"
    }
  ]
}

然后在 pom.xml 文件的原生配置文件中添加以下属性：

<quarkus.native.additional - build - args>
  -H:ResourceConfigurationFiles=resources - config.json,
</quarkus.native.additional - build - args>

修复 GatewayResource 以进行原生编译 ：由于存在一个阻止 GraalVM 检测 GatewayResource 类中方法的 bug，我们使用 @RegisterForReflection 注解来解决：

@Path("/")
@RegisterForReflection
public class GatewayResource {
    // ...
}

6. 运行原生应用程序

要以原生模式运行应用程序，我们需要先编译和打包它：

./mvnw -Pfrontend,native clean package

构建完成后，原生应用程序二进制可执行文件将位于 target/reactive - 1.0.0 - SNAPSHOT - runner 。我们可以使用以下命令运行它：

./target/reactive - 1.0.0 - SNAPSHOT - runner -Dquarkus.datasource.username=postgres -Dquarkus.datasource.password=pgpass -Dquarkus.datasource.reactive.url=postgresql://localhost:5432/postgres -Dquarkus.hibernate - orm.database.generation=create

原生启动时间仅需几毫秒，相比 JVM 模式有了显著提升。在浏览器中访问 http://localhost:8080 ，使用管理员凭据登录后，应用程序的所有功能都应正常工作。

7. 部署应用程序到 Kubernetes

接下来，我们将学习如何将任务管理应用程序部署到 Kubernetes：
- 技术要求 ：
- 最新的 Java JDK LTS 版本（编写时为 Java 17）。
- 最新的 Node.js LTS 版本（编写时为 16.15）。
- 主要步骤 ：
1. 了解 Kubernetes 和容器 ：学习 Kubernetes 和容器的主要特性，了解它们为何如此受欢迎。
2. 创建容器镜像 ：为我们的应用程序创建容器镜像，并将其推送到外部容器注册表。
3. 创建集群配置清单 ：创建所需的 Kubernetes 配置文件，以便部署容器化的应用程序。
4. 将任务管理器部署到 Kubernetes ：将应用程序部署到 minikube Kubernetes 集群。

以下是整个流程的 mermaid 流程图：

graph LR
    A[配置 Maven 构建] --> B[Quarkus Quinoa 扩展]
    B --> C[创建 GatewayResource 类]
    C --> D[运行应用程序]
    D --> E[配置原生构建]
    E --> F[运行原生应用程序]
    F --> G[部署到 Kubernetes]

通过以上步骤，我们可以将 React 前端和 Quarkus 后端集成，以单个组件的形式部署和分发应用程序，并进一步将其部署到 Kubernetes 集群。

从 Quarkus 提供 React 应用服务及部署到 Kubernetes

8. 什么是 Kubernetes

Kubernetes 是一个开源的容器编排平台，它可以自动化应用程序的部署、扩展和管理。以下是 Kubernetes 的一些主要特性：
| 特性 | 描述 |
| ---- | ---- |
| 自动化部署 | 可以根据配置文件自动部署应用程序的容器。 |
| 自动扩展 | 根据应用程序的负载自动调整容器的数量。 |
| 自我修复 | 如果容器出现故障，Kubernetes 会自动重启或替换它们。 |
| 服务发现 | 可以自动为应用程序的服务分配 DNS 名称，方便服务之间的通信。 |

9. 创建容器镜像

为了将应用程序部署到 Kubernetes，我们需要先创建一个容器镜像。以下是创建容器镜像的步骤：
1. 编写 Dockerfile ：在项目根目录下创建一个 Dockerfile ，内容如下：

# 使用 Quarkus 基础镜像
FROM quay.io/quarkus/quarkus-micro-image:1.0
# 设置工作目录
WORKDIR /work/
# 复制应用程序可执行文件
COPY target/*-runner /work/application
# 设置文件权限
RUN chmod 775 /work
# 暴露端口
EXPOSE 8080
# 启动应用程序
CMD ["./application", "-Dquarkus.http.host=0.0.0.0"]

构建容器镜像 ：在项目根目录下执行以下命令构建容器镜像：

docker build -t my-task-manager:1.0 .

推送容器镜像到注册表 ：将构建好的容器镜像推送到外部容器注册表，例如 Docker Hub：

docker login
docker tag my-task-manager:1.0 your-dockerhub-username/my-task-manager:1.0
docker push your-dockerhub-username/my-task-manager:1.0

10. 创建集群配置清单

接下来，我们需要创建 Kubernetes 配置文件来部署容器化的应用程序。以下是一些常见的 Kubernetes 配置文件示例：

Deployment 配置文件（deployment.yaml） ：

apiVersion: apps/v1
kind: Deployment
metadata:
  name: task-manager-deployment
spec:
  replicas: 3
  selector:
    matchLabels:
      app: task-manager
  template:
    metadata:
      labels:
        app: task-manager
    spec:
      containers:
      - name: task-manager-container
        image: your-dockerhub-username/my-task-manager:1.0
        ports:
        - containerPort: 8080

Service 配置文件（service.yaml） ：

apiVersion: v1
kind: Service
metadata:
  name: task-manager-service
spec:
  selector:
    app: task-manager
  ports:
    - protocol: TCP
      port: 80
      targetPort: 8080
  type: LoadBalancer

11. 将任务管理器部署到 Kubernetes

完成上述步骤后，我们可以将应用程序部署到 minikube Kubernetes 集群：
1. 启动 minikube ：

minikube start

应用配置文件 ：

kubectl apply -f deployment.yaml
kubectl apply -f service.yaml

查看部署状态 ：

kubectl get deployments
kubectl get services

访问应用程序 ：

minikube service task-manager-service

以下是部署到 Kubernetes 的 mermaid 流程图：

graph LR
    A[了解 Kubernetes] --> B[创建容器镜像]
    B --> C[创建集群配置清单]
    C --> D[部署到 minikube 集群]
    D --> E[访问应用程序]

总结

通过本文，我们学习了如何将 React 前端和 Quarkus 后端集成，配置 Maven 构建以包含前端资源，实现从 Quarkus 提供 React 应用服务，以及将应用程序打包为原生二进制文件。此外，我们还详细介绍了将应用程序部署到 Kubernetes 的步骤，包括了解 Kubernetes 的特性、创建容器镜像、编写集群配置清单和部署到 minikube 集群。通过这些步骤，我们可以将应用程序以单个组件的形式部署和分发，并利用 Kubernetes 的强大功能进行自动化管理和扩展。