將 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 的這篇文章。