Deploying Vue.js App using azure devops release pipeline

Question

I have a vue.js application that is creating and building using vue-cli 3. I have some environment variables in .env.test and .env.prod files.

To build the app I'm using a azure devops build pipeline where I run the command: npm run build:test or npm run build:prod

That generates different artifacts that are input for Stage in azure devops release pipeline.

The problem I'm facing is I don't want to have separate builds for every environment. I want to build one and deploy to different environments is that possible?

How do I handle those variables to build once package for all environments? Is it a good practice? Or should I have different pipelines for different environments as I have right now?

Answer 1

From perspective of CI

There should be only single build pipeline that will build artifact regardless of the environment where it will run.

.env.prod might be used to deploy artifacts to any environments (Development, Production, etc.)

You have to provide configuration with tokens, which will be replaced on Deployment/Release stage:

env_key1=#{token_key1}#
env_key2=#{token_key2}#
env_key3=#{token_key3}#

Therefore, just build project and publish artifact using single configuration file for all environments.

From perspective of CD

I would recommend to use single release pipeline with multiple stages (Development, Production, etc).

Provide separate variables groups based on stages. It allows to keep variables separate, logically grouped and use Azure Key Vault as source of secrets. Variable names must be equal to environment tokens (without prefix and suffix).

Add any Task you wish into Stage, which will find and replace tokens.

Currently, I use Replace Tokens extension from marketplace. Depend on stage, different group of variables will be substituted. Replace Tokens task does all of the job automatically, e.i. scans js files and replaces tokens. Default token prefix and suffix are: #{ }#, but task allow to provide custom you wish.