持续集成：从一个存储库部署到不同的 Firebase 项目

Question

技术栈

• Bitbucket 管道
• 码头工人
• 节点
• 网页包
• VueJS 2
• Firebase

问题

在构建之前，我应该使用上述哪项技术来重新配置 Firebase APIKey？我认为应该在 Webpack 中完成。你能给我举个例子吗？我是 Webpack 菜鸟。

问题

当我使用 Webpack 构建 Vue 项目时，我需要根据触发 Bitbucket Pipelines 的分支更改$FIREBASE_API_KEY 和其他配置选项。如果我在 Bitbucket 上签入对“inflight”的更改，管道应该使用与 firebase 项目“dev”匹配的 $FIREBASE_API_KEY（和其他道具）构建和部署。

// Firebase Config
let config = {
    apiKey: "$FIREBASE_API_KEY",
    authDomain: "my-project.firebaseapp.com",
    databaseURL: "https://my-project.firebaseio.com",
    databasecloudfunctionsUrl: "https://my-project.firebaseio.com",
    projectId: "my-project",
    storageBucket: "my-project.appspot.com",
    messagingSenderId: "xyz123"
}

详情

您在上面看到的配置信息当前位于my-project\src\validation-service.js

看来，我需要在 Webpack 可以操作的单独文件中定义 $FIREBASE_API_KEY（和其他道具）。

Docker 是否可以更新 APIKey 和其他配置以从 Inflight/Master 部署 Dev/Prod？

示例 - 类似技术

• https://github.com/bartw/multi_env_webpack_travis_app
• https://hackernoon.com/continuous-deployment-of-a-webpack-app-to-multiple-environments-using-travic-ci-d2c6f22eac50
• https://www.atlassian.com/continuous-delivery/tips-for-scripting-tasks-with-Bitbucket-Pipelines

Answer 1

回答

Webpack

Webpack 可以为不同的环境配置客户端 API 密钥，例如 Prod 或 Dev。

我使用vue-cli 创建了这个项目并选择了webpack 选项。这会创建文件夹和文件来为多个环境配置持续集成。

在我的具体情况下，我将两个客户端 API 密钥保存在 dev.env.js 和 prod.env.js 中。这些 .js 文件位于 vue-cli 创建的 config 文件夹中。

我使用This Tutorial 来了解Webpack 如何使用build 文件夹中的文件。对于vue-cli，请关注NODE_ENV 和'"production"'

更多

此应用程序在部署时需要访问其他 API 密钥。为此，我在 Bitbucket Pipelines 中使用 环境变量。虽然 Bitbucket Pipelines 使用 Docker 镜像来构建和部署，但可以引用来自 Bitbucket 的加密的 environmental variables 的还是 bitbucket-pipelines.yml，即 $PROD_FIREBASE_API_KEY、$DEV_FIRBASE_API_KEY。