如何在 Google Cloud Build 上部署带有 env vars 的 Vue.js 应用程序？

Question

我想使用谷歌云构建部署一个 Vue.js 应用程序（到 Firebase 托管）。即使这是对这两种产品的相当微不足道的使用，但两种环境变量服务的实现似乎是矛盾的。

Google Cloud Build 要求环境变量以“VUE_APP”前缀开头，否则它会完全忽略它们并且它们的内容未定义。另一方面，谷歌云构建要求变量具有前缀“_”，否则它会抛出替换变量不是“有效的内置替换”。所以无论如何我都看不到将变量从 Google Cloud Build 传递到 Vue.js 应用程序。

我还尝试了以下方法：

- name: 'gcr.io/cloud-builders/npm'
  args: [ 'ci', '--prefix', 'web/vue_js_landing/' ]
  env: [ 'VUE_APP_FIREBASE_WEB_API_KEY=${_FIREBASE_WEB_API_KEY}' ]

但它会抛出“模板“VUE_APP_FIREBASE_WEB_API_KEY”中的密钥不是有效的内置替换”

有人知道这种情况的解决方法吗？

更正：

这个问题具有误导性。上面的代码回答了我的问题。里面还有一个错别字。它应该是“args: ['build', '--prefix', 'web/vue_js_landing/']”。我提到的错误，如果其他人偶然发现，这是因为我在配置中的某个其他点执行了“echo $VUE_APP_FIREBASE_WEB_API_KEY”，这可能是因为未设置 ALLOW_LOOSE 标志。

Answer 1

这是您的整个构建配置吗？如果有更多请留言

我不确定在您的上下文中如何需要 VUE_APP 前缀，但您可以定期设置没有此前缀的替换和环境变量。

替换需要 _ 前缀在构建期间被替换，但在构建步骤期间不在 env 中。 Env vars 不需要额外的前缀，但需要用$$ 调用。

您如何传递 Web API 密钥？这是一个通过 cli 传递它的示例 gcloud builds submit --no-source --substitutions _SECRET_KEY='123'

cloudbuild.yaml

steps:
- name: 'gcr.io/cloud-builders/npm'
  entrypoint: 'bash'
  args: ['-c', 'echo $$FIREBASE_WEB_API_KEY']
  env: ['FIREBASE_WEB_API_KEY=${_SECRET_KEY}']

这是另一个显示替换和环境变量的示例。如果你想玩，可以用gcloud builds submit --no-source 运行。

cloudbuild.yaml

steps:
- id: 'breakout syntax'
  name: 'gcr.io/cloud-builders/npm'
  entrypoint: 'bash'
  args:
   - '-c'
   - |
     echo 'print all env vars'
     env
     echo 'print one env var with $$'
     echo '1: '$$BUILD_ENV_VAR
     echo '2: '$$STEP_ENV_VAR
     echo '3: '$$SUB_IN_ENV_VAR
     echo 'print one substitution with $ or ${}'
     echo '1: '${_SUB_VAR}
     echo '2: ' $$_SUB_VAR ## doesn't exist in env, fails
     echo '3: '$_SUB_VAR
  env: ['STEP_ENV_VAR=step-var']

substitutions:
    _SUB_VAR: sub-var
options:
    env:
     - BUILD_ENV_VAR=env-var
     - SUB_IN_ENV_VAR=env-var-with-${_SUB_VAR}

来源：cloud build docs: subs、cloud build docs: build steps、mastering cloud build syntax (bash things)