如何在 Google Cloud Build 上部署带有环境变量的 Vue.js 应用程序？

Question

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

Google Cloud Build 要求环境变量以 "VUE_APP" 前缀开头，否则它会完全忽略它们并且它们的内容是未定义的。另一方面，Google 云构建要求变量具有前缀“_”，否则它会抛出替换变量不是 "a valid built-in substitution"。所以我无论如何都看不到将变量从 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}' ]

但是它抛出 'key in the template "VUE_APP_FIREBASE_WEB_API_KEY" is not a valid built-in substitution'

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

更正：

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

Answer 1

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

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

替换需要 _ 前缀在构建期间被替换，但在构建步骤期间不在环境中。环境变量不需要额外的前缀，但需要用 $$.

调用

您如何传递网络 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)

如何在 Google Cloud Build 上部署带有环境变量的 Vue.js 应用程序？

How to deploy a Vue.js app with env vars on Google Cloud Build?

firebase

docker

vue.js

google-cloud-build