如何將 Angular 環境變量傳遞給 Gitlab CI/CD 管道

Question

 # For the testing stage you must include all those lines so the tests run and finish. If ng test doesnt have the flags that come after it, it will hang on that stage. image: node:latest before_script: - apt-get update -qy - apt-get install -y ruby-dev - gem install dpl stages: - production production: type: deploy stage: production image: ruby:latest script: - dpl --provider=heroku --app=$HEROKU_APP_PRODUCTION --api-key=$HEROKU_API_KEY only: - master

晚上好，我正在嘗試使用在我的管道中 Angular 的環境文件中設置的環境密鑰，但 Gitlab 不知道如何使用它。 process.env.（插入變量名）不起作用。 我已經在我的 gitlab 管道儀表板中設置了環境變量。 我只是不確定如何在我的應用程序中使用它。 任何指導表示贊賞。

Answer 1

這是一個很長的答案，您需要列出您的配置或工作，以便我們進行故障排除。 簡而言之，這里是設置的主要組件

首先像這樣設置管道作業，您應該在儀表板中看到您的圖像

myTestjob:
  stage: stage_a
  image: node:12-alpine
  tags:
    - docker
  script:
    - node --version

其次，設置你的依賴

stages:
  - install

install_dependencies:
  stage: install
  image: node:12-alpine
  tags:
    - docker
  script:
    - yarn install
    - yarn ngcc --properties es2015 --create-ivy-entry-points
  cache:
    key:
      files:
        - yarn.lock
    paths:
      - node_modules
  only:
    refs:
      - merge_requests
      - master
    changes:
      - yarn.lock

請記住，每當您對 yarn.lock 進行更改時，您的緩存鍵都會失效

cache:
  key:
    files:
      - yarn.lock
  paths:
    - node_modules
  policy: pull

在您的 angular,json 中構建您的應用程序工作

{  
  "projects": {
    "angular-app-example": {
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "artifacts/app"
          }
        }
      }
    }
  }
}

設置你的環境變量，gitlab 有很多

variables:
  PROJECT_PATH: "$CI_PROJECT_DIR"
  APP_OUTPUT_PATH: "$CI_PROJECT_DIR/artifacts/app"

build_app:
  stage: build_and_test
  image: node:12-alpine
  tags:
    - docker
  script:
    - yarn ng build --prod
  after_script:
    - cp $PROJECT_PATH/Dockerfile $APP_OUTPUT_PATH
  artifacts:
    name: "angular-app-pipeline"
    paths:
      - $APP_OUTPUT_PATH
  cache:
    key:
      files:
        - yarn.lock
    paths:
      - node_modules
    policy: pull

這是一個很好的參考。 關於如何更詳細地設置

---

用戶發布 YML 文件以設置登台和生產后更新

cache:
  paths:
    - node_modules/

deploy_stage:
  stage: deploy
  environment: Stage
  only:
    - master
  script:
    - rm ./package-lock.json
    - npm install
    - ./node_modules/@angular/cli/bin/ng test --progress false --single-run=true --watch=false
    - ./node_modules/@angular/cli/bin/ng e2e --progress false --watch=false
    - ./node_modules/@angular/cli/bin/ng build --progress false --prod --base-href tykt-stage.surge.sh
    - ./node_modules/.bin/surge -p dist/ --domain tykt-stage.surge.sh

deploy_production:
  stage: deploy
  environment: Production
  only:
    - tags
  script:
    - rm ./package-lock.json
    - npm install
    - ./node_modules/@angular/cli/bin/ng test --progress false --single-run=true  --watch=false
    - ./node_modules/@angular/cli/bin/ng e2e --progress false --watch=false
    - ./node_modules/@angular/cli/bin/ng build --progress false --prod --base-href tykt.surge.sh
    - ./node_modules/.bin/surge -p dist/ --domain tykt.surge.sh

您可以使用任一部分並更新您應該構建的域並推送 CI CD