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

Question

技术栈

• Bitbucket 管道
• Docker
• 节点
• Webpack
• 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 是否在更新 APIKeys 和其他配置以从 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 中使用 Environmental Variables。尽管 Bitbucket Pipelines 使用 Docker 图像来构建和部署，但它是 bitbucket-pipelines.yml 可以从 Bitbucket 引用加密的 environmental variables，即 $PROD_FIREBASE_API_KEY、$DEV_FIRBASE_API_KEY。