如何在 Angular 2+ 项目中调用 circleCI 环境变量？

Question

我有一个 Angular 项目，它的 api-keys.ts 文件如下所示：

export var masterFirebaseConfig = {apiKey: $fireBaseApiKey, authDomain: 'dataJitsu.firebaseapp.com',databaseURL: 'https://datajitsu.firebaseio.com',storageBucket: '',messagingSenderId: '495992924984'};

我认为$fireBaseApiKey作为环境变量存储在我的circleCI项目中，正如您在此处的图片中看到的那样：

但是，当我在 circleCI 上运行配置时，我仍然收到以下错误：

src/app/api-keys.ts(1,44) 中的错误：错误 TS2304：找不到名称 '$fireBaseApiKey'。 src/app/app.module.ts(75,11)：错误 TS2304：不能 找到名称'apiKey'。

（app.module.ts中的错误直接来自api-keys.ts中的错误）

我试图弄清楚问题是在 circleCI 方面还是我如何将其插入 Angular，所以我尝试在我的配置文件中 echo 输出环境变量：

version: 2.1
orbs:
  cypress: cypress-io/cypress@1.0.1
steps:
  - run:
      name: Setup Environment Variables
      command: |
        echo '$fireBaseApiKey'
workflows:
  build:
    jobs:
      - cypress/install:
          build: 'npm run build'
          context: fireBaseApiKey
      - cypress/run:
          requires:
            - cypress/install
          start: 'npm start'
          context: fireBaseApiKey

我在会话出错后 ssh 进入会话，但看不到任何指示 我的 echo 命令甚至被确认了。

我希望 echo 前端或 Angular 前端的帮助能够有效地解决问题。

此外，我正在使用 cypress 进行集成测试，因此我正在使用 Cypress 的 orb 来设置和运行测试。我不确定如何/是否环境变量渗透到 orb 作业中，因此我还将变量添加到项目的上下文中（上下文和唯一键值对的键具有相同的名称）：

更新：这是 circleCI 日志文件的输出：

0 信息如果它以 ok 1 详细 cli [ “/usr/local/bin/node”、“/usr/local/bin/npm”、“运行”、“构建”] 2 信息 使用 npm@6.4.1 3 信息使用 node@v10.13.0 4 详细运行脚本 [ 'prebuild', 'build', 'postbuild' ] 5 信息生命周期 data-jitsu@0.0.0~prebuild: data-jitsu@0.0.0 6 info 生命周期 data-jitsu@0.0.0~build: data-jitsu@0.0.0 7 详细生命周期 data-jitsu@0.0.0~build: 生命周期中的 unsafe-perm true 8 详细 生命周期数据-jitsu@0.0.0~build: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/root/project/node_modules/.bin:/usr/local/sbin:/usr/local/bin:/usr/ sbin:/usr/bin:/sbin:/bin 9 详细生命周期数据-jitsu@0.0.0~build: CWD: /root/project 10 愚蠢的生命周期数据-jitsu@0.0.0~build: Args: ['-c', 'ng build'] 11 愚蠢的生命周期数据-jitsu@0.0.0~build：返回：代码：1 信号： null 12 info 生命周期数据-jitsu@0.0.0~build: 无法执行构建 脚本 13 详细堆栈错误：data-jitsu@0.0.0 构建：ng build13 详细堆栈 退出状态 1 13 详细堆栈在 事件发射器。 (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:301:16) 13 EventEmitter.emit 的详细堆栈 (events.js:182:13) 13 ChildProcess 的详细堆栈。 （/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14） 13 ChildProcess.emit 的详细堆栈 (events.js:182:13) 13 MaybeClose 的详细堆栈（内部/child_process.js:962:16）13 Process.ChildProcess._handle.onexit 的详细堆栈 (internal/child_process.js:251:5) 14 详细 pkgid 数据-jitsu@0.0.0 15 详细 cwd /root/project 16 详细 Linux 4.4.0-141-generic 17 详细的 argv “/usr/local/bin/node” “/usr/local/bin/npm” “运行” “构建” 18 详细节点 v10.13.0 19 详细 npm v6.4.1 20 错误代码 ELIFECYCLE 21 error errno 1 22 error data-jitsu@0.0.0 build: ng build 22 error Exit status 1 23 error Failed at the data-jitsu@0.0.0 构建脚本。 23 错误 这可能不是 npm 的问题。那里 可能是上面的附加日志输出。 24 详细退出 [1, true]

Answer 1

你试过echo $fireBaseApiKey（不带引号）吗？

要对 CircleCI 进行故障排除，在本地启动映像很有用。

示例：下面的命令将启动一个本地 ubuntu 实例，并将环境变量 fireBaseApiKey 设置为 asdf-asdf-asdf。您的本地文件将挂载到/usr/src/app。

docker run -it -e fireBaseApiKey=asdf-asdf-asdf -v $PWD:/usr/src/app ubuntu bash

要检查您的环境变量，请尝试：

echo $fireBaseApiKey

cd /usr/src/app 并逐步运行您的构建脚本。我发现对未知原因的构建失败进行故障排除很有用。

Answer 2

好吧，我终于想通了，虽然可能是用一种不合时宜的方式。我刚刚使用sed 将我的环境变量替换为我的 api-keys.ts 文件。

所以，这里是新的 config.yml 脚本（注意大量更改，包括 wait-on: 'http-get://localhost:4200'（注意那里是 http-get 而不是 http！）。

version: 2.1
orbs:
  cypress: cypress-io/cypress@1.5.1
jobs:
  build:
    working_directory: ~/project
    docker:
      - image: circleci/node:9.6.1-browsers
    environment:
      circleCiApiKey: fireBaseApiKey
    steps:
      - checkout
      - run:
          name: Show current branch
          command: |
            echo ${CIRCLE_BRANCH}
            ls -larth
            echo $fireBaseApiKey
            cat src/app/api-keys.ts
            sed -i "s/circleCiApiKey/$fireBaseApiKey/g" src/app/api-keys.ts
            cat src/app/api-keys.ts
      - restore_cache:
          keys:
            - v1-dependencies-{{checksum "package.json"}}
            - v1-dependencies-
      - run:
          name: Install local dependencies
          command: |
            npm install
      - save_cache:
          key: v1-dependencies-{{checksum "package.json"}}
          paths:
            - node_modules
      - run:
          name: Building
          command: npm run build
      - save_cache:
          key: v1-dist-{{ .Environment.CIRCLE_BRANCH}}-{{ .Environment.CIRCLE_SHA1}}
          paths:
            - dist
workflows:
  version: 2.1
  build:
    jobs:
      - build
      - cypress/install:
          requires:
            - build
          build: 'npm run build'
      - cypress/run:
          requires:
            - cypress/install
            - build
          start: 'npm start'
          store_artifacts: true
          wait-on: 'http-get://localhost:4200'

替换发生在sed -i "s/circleCiApiKey/$fireBaseApiKey/g" src/app/api-keys.ts 行。

api-keys.ts 文件依次包含：

export var masterFirebaseConfig = {
    apiKey: "circleCiApiKey",
    authDomain: "dataJitsu.firebaseapp.com",
    databaseURL: "https://datajitsu.firebaseio.com",
    storageBucket: "",
    messagingSenderId: "495992924984"
  };

export var masterStripeConfig = {
  publicApiTestKey: "pk_test_NKyjLSwnMosdX0mIgQaRRHbS",
  secretApiTestKey: "sk_test_6YWZDNhzfMq3UWZwdvcaOwSa",
  publicApiKey: "",
  secretApiKey: ""
};