Azure DevOps(CI/CD) & AWS Elastic Beanstalk Flow

E2E Process for Hosting ReactJs Application using Azure DevOps(CI/CD) & AWS Elastic Beanstalk

In this post, we are going to deploy React Application using Azure DevOps and AWS Elastic Beanstalk.

• Introduction
• Prerequisites
• Build project
• Build Pipeline (CI)
• Configure AWS Elastic Beanstalk
• Release Pipeline (CD)
• Summary
• Conclusion

Introduction

If you want to deploy a ReactJS application with Azure DevOps CI/CD without worrying about the underlying infrastructure, Elastic Beanstalk is the solution. When you push the latest code in your repo the automated pipeline will build the app and upload the app artifacts in the form of the zip, Elastic Beanstalk would take care of provisioning underlying infrastructure such as a fleet of EC2 instances, auto calling groups, monitoring, etc.

The infrastructure provisioned by Elastic Beanstalk depends on the technology chosen while uploading your app. For example, we are going to deploy the React with NodeJS backend on Elastic Beanstalk so we need to choose the NodeJS environment. If you want to know more about Elastic Beanstalk here is the link.

Prerequisites

• AWS account setup: AWS offers a free tier for one year.
• Azure DevOps Setup: Azure offers a Free Account.
• Understanding of YAML
• Basic Understanding of AWS and Azure DevOps

Build Project

git clone --branch Start git@github.com:engr-muzammil/DemoMyApp.git
npm install
npm run start

Build Pipeline (CI)

Step 1: Push Code to you any version control (I am using Azure Repos Git for demo).

Step 2: Create Build Pipeline.

I am choosing Azure Repos Git (Choose according to your Version Control)

I choose my repo then I select NodeJS with React then the Auto-generated YAML Code showed up. for now, I just save and run this.

Pipeline starts running.

Application build successfully, as you can see we have 0 artifacts, now we need to change the pipeline to publish artifacts (artifacts is a zip version of build code)

just replace this into your YAML file

# Node.js with Reac
# Build a Node.js project that uses React.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript

trigger:
- main

pool:
  vmImage: ubuntu-latest

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '10.x'
  displayName: 'Install Node.js'

- script: |
    npm install
    npm run build
  displayName: 'npm install and build'

- task: CopyFiles@2
  inputs:
    Contents: |
      $(Build.SourcesDirectory)/src/**
      $(Build.SourcesDirectory)/public/**
      $(Build.SourcesDirectory)/package*.json
    TargetFolder: '$(Build.ArtifactStagingDirectory)'
- task: ArchiveFiles@2
  inputs:
    rootFolderOrFile: '$(Build.ArtifactStagingDirectory)'
    includeRootFolder: false
    archiveType: 'zip'
    archiveFile: '$(Build.ArtifactStagingDirectory)/myapp_$(Build.BuildNumber).zip'
    replaceExistingArchive: true
- task: PublishBuildArtifacts@1
  inputs: 
    PathtoPublish: $(Build.ArtifactStagingDirectory) # dist or build files
    ArtifactName: 'www' # output artifact named www

Save this and push your code, then our build pipeline is triggered automatically.

after changing in YAML file our application successfully build and we have one publish artifact. you can browse this by clicking on it. and you can see Zip file below.

Configure AWS Elastic Beanstalk

Now your environment setting everything and starting in a while.

Connectivity Between Azure DevOps & AWS

goto > Project Settings > Pipelines > Service connections > New service connection(Click on it) > AWS (select from dropdown)

Then add AccessKey ID & Secret Access Key which is defined above

Release Pipeline (CD)

We need to add build artifacts to this release pipeline

Let’s configure S3 Upload

and Deploy to Elastic Beanstalk

After configuring this

After that

Summary

1. Azure DevOps (Azure Repos Git, Azure Build Pipeline, Azure Release Pipeline)
2. AWS (Elastic Beanstalk, EC2, S3)
3. Azure DevOps to AWS Connectivity
4. CI/CD Pipeline

Conclusion

Azure DevOps is the right solution if you want to build Easy CI/CD pipeline, it is easy to configure and easy to integrate with any other cloud service just we integrate with AWS.

Elastic Beanstalk is the right solution if you want to deploy web apps quickly without worrying about any underlying infrastructure.