Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Deploying Vue.js App using azure devops release pipeline

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?

like image 404
chamix Avatar asked May 22 '19 22:05

chamix


People also ask

Are Azure DevOps release pipelines deprecated?

Draft releases are deprecated in Azure Pipelines because you can change variables while you're creating the release. Creating a draft release allows you to edit some settings for the release and tasks, depending on your role permissions before you start the deployment.

How to deploy an application using Azure DevOps?

We have to build two pipelines to deploy this application using Azure DevOps. This pipeline takes the code from the Azure Repos or any git source and goes through a series of actions such as install, test, build and finally, generate the artifacts ready for the deployments.

How to deploy a Vue static website using Azure DevOps?

One way of developing Vue.js applications is to use Azure blob storage for static web hosting. In this post, we will see how we can deploy a Vue static website using Azure DevOps. As I said earlier, one way of developing Vue.js applications to put the Vue build into Azure blob storage and distribute it with Azure CDN.

How do I create a release pipeline in Azure App service?

Go to Pipelines -> Releases -> New Release Pipeline, then select the template Azure App Service deployment, list the stage name as DEV and click on Add an artifact. Select project and source (build pipeline), then select default version as Latest, click on Add.

How do I create a build pipeline in Azure DevOps?

Go to Pipelines -> Build -> New Build Pipeline, then click on “Use the visual designer.” It will ask source code repo details, so select Azure Repos Git and select Team project, which you created at the start of the project, select Repository and branch name, then click Continue.


1 Answers

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). enter image description here

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).

enter image description here

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. enter image description here

like image 142
Serhii Kyslyi Avatar answered Sep 19 '22 15:09

Serhii Kyslyi