[英]Setup react app build folder onto Google Kubernetes
Currently, I have a repo that contains both a Node.js Express backend and React frontend.目前,我有一个包含 Node.js Express 后端和 React 前端的存储库。 The repo's image is in Google Container Registry and is used on a Google Kubernetes cluster.
存储库的映像位于 Google Container Registry 中,并用于 Google Kubernetes 集群。 There is an url provided by a load balancer, where it is the backend url that is serving the static
build
server.负载均衡器提供了一个 url,其中后端 url 为 static
build
服务器提供服务。 In the future, I want to separate the backend/frontend into two different repos (one for backend and one for frontend).将来,我想将后端/前端分成两个不同的存储库(一个用于后端,一个用于前端)。
I believe making changes for the backend in the cluster won't be difficult, but I am having trouble figuring out how to add the React frontend to this since the build
folder will be in a different repo than the backend.我相信对集群中的后端进行更改并不困难,但我无法弄清楚如何将 React 前端添加到此,因为
build
文件夹将位于与后端不同的存储库中。 I read online that to serve a React app on GCP, you would upload the build
folder onto a bucket and have that bucket served on App Engine, which will provide a url to access it on the web.我在网上读到,要在 GCP 上提供 React 应用程序,您需要将
build
文件夹上传到存储桶并在 App Engine 上提供该存储桶,这将提供 url 以在 web 上访问它。
I'm wondering if this is how it would be done on a Kubernetes cluster or if there is a different approach since it is not using App Engine, rather Google Kubernetes.我想知道这是否会在 Kubernetes 集群上完成,或者是否有不同的方法,因为它没有使用 App Engine,而是使用 Google Kubernetes。
I hope this makes sense (I am still fairly new to Google Cloud) and any feedback/tips will be appreciated!我希望这是有道理的(我对谷歌云还是很陌生),任何反馈/提示都将不胜感激!
Thanks!谢谢!
There are different approaches to this.对此有不同的方法。
There is a guide in the GCP documentation: Hosting a static website to set this up. GCP 文档中有一个指南: Hosting a static website来设置它。 After the build copy all the files to the cloud storage and you are done.
构建后将所有文件复制到云存储,您就完成了。
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
This decouples both builds but you will always have to deploy the backend for a frontend change.这将两个构建解耦,但您将始终必须部署后端以进行前端更改。
FROM node AS build
WORKDIR /app
COPY . .
RUN npm ci && npm run build
FROM nginx
COPY --from=build /app/dist /usr/share/nginx/html
You might also adapt the nginx.conf
to enable routing without hash paths.您还可以调整
nginx.conf
以启用没有 hash 路径的路由。 See this article by codecentric for more information on that.有关更多信息,请参阅codecentric 的这篇文章。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.