如何在 vue 中为 clouldbuild 设置云函数？

Question

我已经建立了一个 Vue 项目并初始化了 firebase 函数（使用 Firebase CLI）。创建了一个函数，当从我的本地机器部署到云时可以正常工作（"firebase Deploy" 和 "firebase deploy --only functions"）。问题出现在云构建期间（在 CI/CD 管道期间）。我在构建日志中收到 "sh: 1: eslint: not found" 错误。 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片段如下；

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

这是我Repo的link，仅供参考

Answer 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 shows how to set up a CI/CD pipeline using Google Cloud Build. It helped me realize my mistake in not placing that step. The article is accompanied by this repo.

如何在 vue 中为 clouldbuild 设置云函数？

How do i set up a cloud function for clouldbuild in vue?

yaml

vue.js

google-cloud-functions

google-cloud-build