Cloud Build 仅提供来自 React 的构建文件夹

Question

我是谷歌云的新手，我正在努力在一个简单的 MERN 堆栈应用程序上实现 CI/CD。

我能够设置谷歌云构建并使用自动触发器（来自 github 分支）进行部署工作。 我只有一个问题：在 cloudbuild.yaml 文件中，我插入了几个步骤，首先进行 npm 安装，然后进行 npm 构建，最后进行部署。这个过程很慢，它还将所有代码复制到服务器，而不仅仅是构建文件夹。

我想了解如何配置文件以便能够使用 github 存储库中已经存在的构建文件夹并直接进行部署，而无需进一步的步骤。 在我使用 react 的前端，我唯一要做的就是提供静态 index.html 文件。

这是我目前的配置（仅前端，理解）

steps:

# Step 0: FRONTEND npm install
- name: "gcr.io/cloud-builders/npm"
  dir: 'frontend'
  args: ['install']
  timeout: "5m"

# Step 1: FRONTEND optimized build
- name: "gcr.io/cloud-builders/npm"
  dir: 'frontend'
  args: ["run", "build"]
  timeout: "5m"

# Step 2: FRONTEND Deploy cloud app frontend
- name: "gcr.io/cloud-builders/gcloud"
  args: ["app", "deploy", "-v", "0-1-2", "app.yaml"]
  dir: 'frontend'
  timeout: "20m"

timeout: 60m

在我的远程存储库中，我已经准备好使用构建文件夹，但我不知道如何完成这项工作。

我也尝试过类似的方法： Upload build folder in Google Cloud Build 没有成功。

其中一个问题是，在进程结束时，云构建似乎正在尝试启动 npm start。

最后，我目前正在使用 express 来简单地提供静态文件。 使用谷歌云可以避免使用它并简单地从 app.yaml 文件配置处理程序吗？ 如果我不实现 express，它在后台使用什么 Web 服务器来提供文件？

Answer 1

如果您只需要部署构建文件夹，那么您提供的链接应该可以完成这项工作。您不需要运行 npm install 和 npm run build，除非您想复制所有代码并使用 Cloud Build 创建构建文件夹。

Credits 到 @Guillaume（更新，假设 .yaml 文件位于项目的根目录，build 位于名为 frontend 的目录）：

steps:

# Step 0: FRONTEND copy only build and deploy cloud app frontend
- name: 'gcr.io/cloud-builders/gcloud'
  entrypoint: bash
  dir: 'frontend'
  args: 
    - '-c'
    - |
      cd ..
      cp app-production-build.yaml frontend/build
      cd frontend/build
      gcloud app deploy
  timeout: '1600s'

默认情况下，Cloud Build 使用名为 /workspace 的目录作为工作目录。如果在构建步骤中设置dir 字段，则工作目录设置为/workspace/<dir>。基本上对于这个构建步骤，Cloud Build 当前位于项目/repo 根目录中名为 frontend 的目录中。

正如 Guillaume 所提到的，您需要更新您的 app.yaml URL 处理程序才能使其正常工作。我在new React app 的构建文件夹中测试了这个示例，它对我有用：

runtime: nodejs12

service: frontend-react

handlers:
# Serve all static files with url ending with a file extension
- url: /(.*\..+)$
  static_files: \1
  upload: (.*\..+)$

# Catch all handler to index.html
- url: /.*
  static_files: index.html
  upload: index.html

要回答您的最后一个问题，您可以直接从您的应用中提供静态文件，您需要做的是配置 URL 处理程序，例如 static_dir 或 static_files。

请注意，build/static 中的每个文件都是 cached，以加快性能，因此在进行多次部署时可能会出现延迟。

App Engine Standard 上的 Node.js 在后台不使用任何网络服务器，您必须通过在 package.json 中指定它来进行设置。这是 Google 文档推荐的 some web frameworks。