如何使用具有多个.env文件的GitLab for Vue应用程序进行单个构建 [英] How to do a single build with GitLab for Vue application with multiple .env files

问题描述

我有一个简单的.gitlab-ci.yml文件，用于构建Vue应用程序.我先构建一次，然后将 dist 文件夹部署到我的各种环境中:

I have a simple .gitlab-ci.yml file that builds my Vue application. I build once and then deploy the dist folder to my various environments:

stages:
  - build
  - deploy_dev
  - deploy_stg
  - deploy_prd

build: 
  image: node:latest  # Pull Node image
  stage: build
  script: 
    - npm install -g @vue/cli@latest
    - npm install
    - npm run build
  artifacts:
    expire_in: 2 weeks
    paths:
      - dist/

deploy_to_dev:
  image: python:latest
  stage: deploy_dev
  dependencies:
    - build
  only:
    - master  # Only deply master branch automatically to Dev
  script:
    - export AWS_ACCESS_KEY_ID=$DEV_AWS_ACCESS_ID
    - export AWS_SECRET_ACCESS_KEY=$DEV_AWS_ACCESS_KEY
    - pip install awscli  # Install AWS CLI
    - aws s3 sync ./dist s3://$DEV_BUCKET

这一切都很好，但是，我现在介绍了一些配置，并根据环境不同地构建了我的应用程序-对于3个环境，我有3个不同的构建命令.例如，我有一个 .env.production ，因此对于生产版本，我的命令变为:

This all works great, however, I've now introduced some config and build my app differently per environment - for 3 environments I have 3 different build commands. Eg, I have an .env.production so for a production build my command becomes:

npm run build -- --mode production

有什么方法可以解决每个环境的不同版本，但仍然使用基于GitLab变量的.env文件吗?

Is there any way to get around having different builds for each environment but still using the .env files based on a GitLab variable?

推荐答案

您应该将构建作业拆分为每个环境一个，并使用 environment

You should split your build job to have one per environment and use the environment concept to have something like that for dev and production envs :

.build_template: &build_template
image: node:latest  # Pull Node image
script: 
  - npm install -g @vue/cli@latest
  - npm install 
  - npm run build -- --mode $CI_ENVIRONMENT_NAME

build_dev:
  stage: build_dev
  <<: *build_template  
  environment:
    name: dev

build_prod:
  stage: build_prod
  <<: *build_template      
  environment:
    name: production

在此代码段中，我使用了锚来避免重复行.

In this snippet, I used anchors to avoid duplicate lines.

这篇关于如何使用具有多个.env文件的GitLab for Vue应用程序进行单个构建的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！