Cloudbuild 无法从我的 Vue 应用程序中找到我的 package.json

Posted 2023-02-16

【中文标题】Cloudbuild 无法从我的 Vue 应用程序中找到我的 package.json

【英文标题】：Cloudbuild can't find my package.json from my Vue app

【发布时间】：2021-07-26 05:28:51

【问题描述】：

我正在尝试通过 GCP Cloud Build 将 Vue JS 应用程序部署到 GCP App Engine。我已按照说明在与 app.yaml 文件不同的目录中创建了 cloudbuild.yaml 文件。构建错误与

error Couldn't find a package.json file in "/workspace"

cloudbuild.yaml 文件的前两步看起来执行成功，但在尝试运行构建时却失败了。

目录是这样的：

root/
├─ config/
│  ├─ cloudbuild.yaml
app.yaml
package.json

这是我的 app.yaml 文件

runtime: nodejs10
service: icx-ui

handlers:
# Serve all static files with urls ending with a file extension
- url: /(.*\..+)$ 
  static_files: dist/\1
  upload: dist/(.*\..+)$
# catch all handler to index.html
- url: /.*
  static_files: dist/index.html
  upload: dist/index.html

我的cloudbuild.yaml如下：

steps:
  - name: node
    entrypoint: yarn
    args: ["install"]
  - name: node
    entrypoint: yarn
    args: ['global', 'add', '@vue/cli']
  - name: node
    entrypoint: yarn
    args: ["run", "build"]
  - name: "gcr.io/cloud-builders/gcloud"
    args: ["app", "deploy", "./app.yaml"]
    timeout: "1600s"

如您所见，我在 app.yaml 文件中添加了文件路径

【问题讨论】：

如何运行 Cloud Build？什么是命令或触发器配置？

当然可以。我在项目根目录并发送--config 标志。这是我用来触发构建gcloud builds submit --config ./config/cloudbuild.yaml ./dist 的命令。最后一个参数是构建文件所在的目录

感谢您的评论，Dondi 提供了正确答案；）

谢谢@dondi。项目已成功构建和部署！

【参考方案1】：

gcloud builds submit 命令的定义源目录是dist/，这是您的应用程序的构建生产版本。该目录默认不包含 package.json 和 app.yaml。

在 Cloud Build 上运行 yarn run build 需要 src/ 和 package.json 等文件来构建 您将通过 App Engine 提供的文件 (dist)。解决方法是指定根项目为构建的源目录：

gcloud builds submit --config ./config/cloudbuild.yaml .

如果在某些情况下这让您担心部署中包含一些不必要的文件，例如 node_modules，您可以通过在 .gcloudignore 上指定这些文件来忽略这些文件。