将 react app build 文件夹设置到 Google Kubernetes

Question

目前，我有一个包含 Node.js Express 后端和 React 前端的存储库。 存储库的映像位于 Google Container Registry 中，并用于 Google Kubernetes 集群。 负载均衡器提供了一个 url，其中后端 url 为 static build服务器提供服务。 将来，我想将后端/前端分成两个不同的存储库（一个用于后端，一个用于前端）。

我相信对集群中的后端进行更改并不困难，但我无法弄清楚如何将 React 前端添加到此，因为build文件夹将位于与后端不同的存储库中。 我在网上读到，要在 GCP 上提供 React 应用程序，您需要将build文件夹上传到存储桶并在 App Engine 上提供该存储桶，这将提供 url 以在 web 上访问它。

我想知道这是否会在 Kubernetes 集群上完成，或者是否有不同的方法，因为它没有使用 App Engine，而是使用 Google Kubernetes。

我希望这是有道理的（我对谷歌云还是很陌生），任何反馈/提示都将不胜感激！

谢谢！

Answer 1

对此有不同的方法。

方法 1：通过 Google Cloud Storage 为您的前端服务。

GCP 文档中有一个指南： Hosting a static website来设置它。 构建后将所有文件复制到云存储，您就完成了。

方法 2：在构建 Docker 映像时将前端添加到后端

1. 构建您的前端并将其打包到 Docker 映像中，如下所示：

FROM node AS build
WORKDIR /app
COPY . .
RUN npm ci && npm run build

FROM scratch
COPY --from=build /app/dist /app

2. 构建您的后端并复制前端：

FROM myapp/frontend as frontend

FROM node
// build backend
COPY --from=frontend /app /path/where/frontend/belongs

这将两个构建解耦，但您将始终必须部署后端以进行前端更改。

方法 3：使用 nginx（或另一个 web 服务器）为您的前端服务

FROM node AS build
WORKDIR /app
COPY . .
RUN npm ci && npm run build

FROM nginx
COPY --from=build /app/dist /usr/share/nginx/html

您还可以调整nginx.conf以启用没有 hash 路径的路由。 有关更多信息，请参阅codecentric 的这篇文章。