所以你已经创建了你的第一个 React 项目,现在你准备好尝试部署它了吗?不要害怕,Google 提供了 Cloud Run,这是一个非常简单但功能强大的工具,可以帮助您做到这一点。我将通过三个简单的步骤向您展示如何使用 Cloud Run 部署容器化的 React 应用程序。
本教程假设您已经设置了您的 Google Cloud 项目并让您的 React 应用程序在本地运行。
我可以简单地将我的代码上传到存储桶中吗?
当我尝试部署我的第一个 React 项目时,我已经在其他各种项目中使用过 Cloud Run。当我想将应用程序部署到 GCP 时,我的第一个想法是运行一个简单的npm run build...并将编译后的输出文件夹上传到 Google Cloud Storage (GCS) 存储桶中。
完成后,我意识到这种方法行不通。 GCS 正在尝试从存储桶内的路径提供所有路由。因此,如果您在 React 中创建页面/login,GCS 将尝试提供位于 GCS 存储桶子文件夹内的文件。这将失败,因为不存在这样的文件。 React 应该处理路由客户端。更多信息可以在这里找到。
实现有效路由的"最简单"方法是使用 Google App Engine。但是,由于多种原因,我发现 App Engine 的可扩展性不是很好。我面临的主要问题是,您的 App Engine 的位置一旦为项目激活就无法更改(为什么?),整个项目只能有一个 App Engine 位置。
云跑
更好的解决方案是 Google Cloud Run。 Cloud Run 实际上是基于 Knative,一个"基于 Kubernetes 的平台来部署和管理现代无服务器工作负载"。 Knative 的主要好处是它使任何无状态应用程序的扩展变得非常容易。您只需提供一个 docker 映像,Knative 就会根据需要将其扩展到尽可能多的实例。
与直接在您自己的 Kubernetes 集群上运行 Knative 相比,Cloud Run 更易于设置和维护。对于预计流量负载很小的项目,它也非常便宜,因为 Cloud Run 是按使用量计费的(例如,对服务的每个请求)。 Cloud Run 的另一个优势是能够在 10 秒内恢复您的部署。这个功能在我合作的初创公司中为我省去了一些麻烦。
1\。创建一个包含已编译的 React 应用程序的 docker 映像
您需要在项目的根目录中创建一个文件Dockerfile。我们将在此步骤中使用多阶段 docker 文件,因此请务必将以下所有代码复制到单个文件中。
FROM node:lts-alpine as builder
# by only copying package.json, before running npm install. We can leverage dockers caching strategy for steps. Otherwise docker needs to run npm install every time you change any of the code.
COPY package.json ./
RUN npm install
RUN mkdir /app-ui
RUN mv ./node_modules ./app-ui
WORKDIR /app-ui
COPY . .
# in this step the static React files are created. For more info see package.json
RUN npm run build进入全屏模式 退出全屏模式
运行构建器后,我们所有的静态文件都可用。但是,我们仍然需要一种将它们提供给客户的方式。我们为此使用 nginx。
FROM nginx:alpine
# copy the .conf template
COPY ./.nginx/nginx.conf /etc/nginx/nginx.conf
## Remove default nginx index page and replace it with the static files we created in the first step
RUN rm -rf /usr/share/nginx/html/*
COPY --from=builder /app-ui/build /usr/share/nginx/html
EXPOSE 80
CMD nginx -g 'daemon off;'