如何在 vue 中为 couldbuild 设置云功能？答案

【问题标题】：How do i set up a cloud function for clouldbuild in vue?如何在 vue 中为 couldbuild 设置云功能？
【发布时间】：2020-07-30 19:00:30
【问题描述】：

我已经建立了一个 Vue 项目并初始化了 firebase 函数（使用 Firebase CLI）。创建了一个在从我的本地机器部署到云时运行良好的函数（使用“firebase Deploy”和“firebase deploy --only 函数”）。该问题出现在云构建期间（在 CI/CD 管道期间）。我在构建日志中收到“sh：1：eslint：未找到”错误。 Vue项目结构是这样的；

构建是由提交到master触发的...构建配置如下；

steps:
# Install
- name: 'gcr.io/cloud-builders/npm'
  args: ['install']
# Build
- name: 'gcr.io/cloud-builders/npm'
  args: ['run', 'build', '--prod']
# Deploy
- name: 'gcr.io/$PROJECT_ID/firebase'
  args: ['deploy']

在部署步骤出现错误...完整的构建日志如下；

Finished Step #1
Starting Step #2
Step #2: Pulling image: gcr.io/covid-info-bw/firebase
Step #2: Using default tag: latest
Step #2: latest: Pulling from covid-info-bw/firebase
Step #2: c0c53f743a40: Already exists
Step #2: 66997431d390: Already exists 
Step #2: 0ea865e2909f: Already exists 
Step #2: 584bf23912b7: Already exists
Step #2: 3c4c73959f29: Already exists
Step #2: 63e05266fc4b: Already exists
Step #2: 7b37ba8cd979: Already exists
Step #2: 3a18f94fe18a: Already exists
Step #2: a000f3263f8b: Already exists
Step #2: 3a5d0859c8ef: Pulling fs layer
Step #2: 575701571da4: Pulling fs layer
Step #2: 8e3be3979b6a: Pulling fs layer
Step #2: 8e3be3979b6a: Verifying Checksum
Step #2: 8e3be3979b6a: Download complete
Step #2: 575701571da4: Verifying Checksum
Step #2: 575701571da4: Download complete
Step #2: 3a5d0859c8ef: Verifying Checksum
Step #2: 3a5d0859c8ef: Download complete
Step #2: 3a5d0859c8ef: Pull complete
Step #2: 575701571da4: Pull complete
Step #2: 8e3be3979b6a: Pull complete
Step #2: Digest: sha256:35d71d1c92b972de31f223e63fd25f1be6c419f28b24c106187139c9aa3e6cfa
Step #2: Status: Downloaded newer image for gcr.io/covid-info-bw/firebase:latest
Step #2: gcr.io/covid-info-bw/firebase:latest
Step #2: 
Step #2: [1m[37m===[39m Deploying to 'covid-info-bw'...[22m
Step #2: 
Step #2: [1m[36mi [39m[22m deploying [1mfunctions, hosting[22m
Step #2: Running command: npm --prefix ./functions run lint
Step #2: 
Step #2: > functions@ lint /workspace/functions
Step #2: > eslint .
Step #2: 
Step #2: sh: 1: eslint: not found
Step #2: npm ERR! code ELIFECYCLE
Step #2: npm ERR! syscall spawn
Step #2: npm ERR! file sh
Step #2: npm ERR! errno ENOENT 
Step #2: npm ERR! functions@ lint: `eslint .`
Step #2: npm ERR! spawn ENOENT
Step #2: npm ERR! 
Step #2: npm ERR! Failed at the functions@ lint script.
Step #2: npm ERR! This is probably not a problem with npm. There is likely additional logging output 
above.
Step #2: npm WARN Local package.json exists, but node_modules missing, did you mean to install? 
Step #2: 
Step #2: npm ERR! A complete log of this run can be found in:
Step #2: npm ERR!     /builder/home/.npm/_logs/2020-04-16T23_28_19_649Z-debug.log
Step #2: 
Step #2: [1m[31mError:[39m[22m functions predeploy error: Command terminated with non-zero exit 
code1
Finished Step #2
ERROR
ERROR: build step 2 "gcr.io/covid-info-bw/firebase" failed: step exited with non-zero status: 1

Firebase.json sn-p如下；

 ...
 "functions": {
  "predeploy": [
    "npm --prefix ./functions run lint"
   ]
 }
 ...

这是我的Repo的链接，仅供参考

【问题讨论】：

通过错误消息functions@ lint /workspace/functions sh: 1: eslint: not found，我可以看到运行命令npm --prefix ./functions run lint 后找不到您尝试运行的脚本。请确保您的 Cloud Build 指向脚本所在的正确子目录。在这种情况下，查看您的 cloudbuild.yaml 会有所帮助。
@sllopis 我的 clouldBuild.yaml 上的内容在上面的问题中，然后是“构建由提交触发......”
确实如此。我也注意到了这一点。您是否尝试过将您的 firebase.json 更改为 npm --prefix functions run lint？我认为考虑到您当前的目录结构/workspace/functions，这可能是可行的。
我刚刚累了它，它会导致同样的错误
您能否检查一下您的eslint 脚本所在的当前工作目录？我在这里看到的问题是您的构建失败，因为它无法在目录/workspace/functions 中找到eslint。此外，此错误消息ARN Local package.json exists, but node_modules missing, did you mean to install? 确认也未找到node_modules 文件夹，这意味着您甚至可能不在././functions 目录中。

标签： vue.js google-cloud-functions yaml google-cloud-build

【解决方案1】：

该错误是由于未在云构建中安装云函数依赖项而导致缺少脚本。基本上，缺少云构建安装云功能依赖项的步骤。下面是更正后的 CloudBuild.yaml（注意第 2 步）

steps:
# Install the vue-app dependencies
- name: 'gcr.io/cloud-builders/npm'
  args: ['install']
# Install the function dependencies
- name: 'gcr.io/cloud-builders/npm'
  dir: 'functions'
  args: ['install']
# Build
- name: 'gcr.io/cloud-builders/npm'
  args: ['run', 'build', '--prod']
# Deploy
- name: 'gcr.io/$PROJECT_ID/firebase'
  args: ['deploy']

第二步（安装函数依赖）是添加的那一步，dir: 'functions'是你访问函数目录安装依赖的方式。这个article 展示了如何使用 Google Cloud Build 设置 CI/CD 管道。它帮助我意识到我没有放置那一步的错误。文章附此repo。

【讨论】：