reactjs - 在 Google Kubernetes 上设置 react app build 文件夹

Question

目前，我有一个包含 Node.js Express 后端和 React 前端的存储库。存储库的镜像位于 Google Container Registry 中，并在 Google Kubernetes 集群上使用。负载均衡器提供了一个 url，它是为静态 build 提供服务的后端 url服务器。将来，我想将后端/前端分成两个不同的存储库(一个用于后端，一个用于前端)。

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

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

我希望这是有道理的(我对 Google Cloud 还是很陌生)，任何反馈/提示都将不胜感激!

谢谢!

Answer 1

对此有不同的方法。

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

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

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

构建您的前端并将其打包到一个 Docker 镜像中，如下所示:

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

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

构建您的后端并复制前端:

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启用没有哈希路径的路由。见 this article by codecentric了解更多信息。