How to Deploy a Dockerized React App Using Azure DevOps Pipelines

Description:  In this topic I am going to explain, How to setup React Application to Docker Image and upload image to Azure ACR [Azure Container Registry] to deploy the Dockerized React APP to Azure App service 

Prepare the React Application

First I am setting up the React Application using command line 

# mkdir reactapp

# cd reactapp

# npx create-react-app react-app   [react-app is the application folder name]

Above command will create the folder with react-app, after created enter into folder and start the deployment server

# npm start

Dockerizing the Reactapp

Create the Dockerfile in webroot folder as follow

FROM node:18 AS build
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . ./
RUN npm run build

# Step 2: Serve the application using Nginx
FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Create .dockerignore file as follow to remove unwanted content upload into docker file as follow

node_modules
build
.dockerignore
Dockerfile
.git
.gitignore

Create the Docker Image 

After creating both the files now create the image from the Dockerfile

# cd react-app 

# docker build -t my-react-app .

Validate the image by create the container from the above image and run the application using port 80

# docker run -p 80:80 my-react-app

Upload Changes to GitHub Repository: After verifying the URL upload changes to Github with new repo.

Git Repo : https://github.com/harpal1990/node18new

Deploying React App To Azure: To deploy create the ACR [Azure Container Registry] and Azure App service with Docker Container Running on Linux 

Setup Azure Container Registry

To Setup ACR -- Search for the service called Container Registries -- click on Create Container Registry

Filled all the require details and click on Create

After ACR created navigate to ACR --> Access Key and ticked the Admin User that will generated username and Password for the ACR

After ACR created upload the local machine container image to ACR using command line Install azuer cli using below command # apt install aws-cli Login into azure and upload the local image

# az login --use-device-code Above command will generate the device code like as follow To sign in, use a web browser to open the page https://microsoft.com/devicelogin and enter the code IKDD9SFVS to authenticate.

After login into Azure now login into ACR using below command # az acr login --name reactapptechserverglobal 

Tag the existing image with azure ACR #docker tag my-react-app reactapptechserverglobal.azurecr.io/my-react-app:v1 Push the image to ACR

# docker push reactapptechserverglobal.azurecr.io/my-react-app:v1

Create the Azure App with container: To create the Azure App with container navigate to Azure app service

Click on Create the Webapp and fill all the details as follow Select Docker Container and location same as ACR [i.e. East US 2]

Select the Registry, image and tag for the Web APP

After filled all the details click on Review + Create. Once the process completed check the URL of the Web App you will get the out put of the react

To validate the configuration open the Azure App -- > Setting you will get all the details regarding the ACR details

Setup AzureDevops Project: Create the Project in Azure DevOps and setup pipeline

Select the source code location as Git and I am selecting my Repository which I have prepared at beginning On configure Tab I am going to select Build and Push image to Docker registry

Once you validate it will generate the yaml file validate the following things from the yaml file

# Docker
# Build and push an image to Azure Container Registry
# https://docs.microsoft.com/azure/devops/pipelines/languages/docker

trigger:
- main

resources:
- repo: self

variables:
  # Container registry service connection established during pipeline creation
  dockerRegistryServiceConnection: 'acf4f71d-f988-4c52-a365-24525e269fb0'
  imageRepository: 'harpalnodenew'
  containerRegistry: 'reactapptechserverglobal.azurecr.io'
  dockerfilePath: '$(Build.SourcesDirectory)/Dockerfile'
  tag: '$(Build.BuildId)'

  # Agent VM image name
  vmImageName: 'ubuntu-latest'

stages:
- stage: Build
  displayName: Build and push stage
  jobs:
  - job: Build
    displayName: Build
    pool:
      vmImage: $(vmImageName)
    steps:
    - task: Docker@2
      displayName: Build and push an image to container registry
      inputs:
        command: buildAndPush
        repository: $(imageRepository)
        dockerfile: $(dockerfilePath)
        containerRegistry: $(dockerRegistryServiceConnection)
        tags: |
          $(tag)

Click on Save and Run. Once the build piepline run successfully, it shows the output

You will get changes on The Azure APP

Pblishing Docker Images to Amazon ECR with AWS CodeBuild on CodeCommit Changes

 

Description:  In this discussion, I will guide you through the process of automatically publishing Docker images to Amazon Elastic Container Registry (ECR) using AWS Code Build. Learn how to trigger this process each time changes are pushed to AWS Code Commit. Dive into the step-by-step setup, enabling seamless integration between Code Commit, Code Build, and ECR for efficient image management in your AWS environment.

Setup Repository in CodeCommit:

The first setup to prepare code commit repository with source code, Dockerfile for build the image and buildspec.yml file for managing the build workflow


Kindly check the GitHub repository for reference URL

buildspec.yml 

phases:
  pre_build:
    commands:
      - echo Logging in to Amazon ECR...
      - ECR_LOGIN=$(aws ecr get-login-password --region $AWS_DEFAULT_REGION)
      - echo $ECR_LOGIN | docker login -u AWS --password-stdin XXXXXXXX.dkr.ecr.ap-south-1.amazonaws.com
      - REPOSITORY_URI=XXXXXXXX.dkr.ecr.ap-south-1.amazonaws.com/reactrepository
      - COMMIT_HASH=$(echo $CODEBUILD_RESOLVED_SOURCE_VERSION | cut -c 1-7)
      - IMAGE_TAG=build-$(echo $CODEBUILD_BUILD_ID | awk -F":" '{print $2}')
  build:
    commands:
      - echo Build started on `date`
      - echo Building the Docker image...
      - docker build -t $REPOSITORY_URI:latest .
      - docker tag $REPOSITORY_URI:latest $REPOSITORY_URI:$IMAGE_TAG
  post_build:
    commands:
      - echo Pushing the Docker image to Amazon ECR...
      - docker push $REPOSITORY_URI
      

Setup ECR [Elastic Container Registry]

After setup repository Create the ECR private repository 

Setup CodeBuild for React:  We have code commit repository with source code so our first step is to setup Code Build and IAM role for Build.

To create code build navigate to CodeBuild stage and click on create buildstage

Once you create the Build you will get the project under list and also the custom role which created with the build project. Now need to allocate ECR permission to IAM role.

Allocate Permission to login ECR and upload the image:After build project created navigate to IAM role created with the project and assign permission to login with ECR and upload the image

Permission: AmazonEC2ContainerRegistryFullAccess

 

Build the Project: Once all the above changes applied click on Build the project 

Once the build completed you will get the success result and container also uploaded to ECR

AWS SAA [Master Class]

Setup Sonarqube on Ubuntu 22 and integrate it with Github

Description: In this tutorial, I have explained how to setup SonarQube on Ubuntu 22 and integrate it with GitHub

SonarQube: SonarQube is an open-source tool for code quality analysis. It can scan source code for potential bugs and vulnerabilities and generates a report which allows you to identify issues.

Prerequisites:

• Ubuntu 22 with atlease 2 GB RAM and one CPU
• User with sudo rights
• Domain name to access the server using name
• JDK
• Postgres 

Install Open JDK

Install Open JDK 11
# apt-get install openjdk-11-jdk -y

Verify the JDK version
# java --version

Configure System for Sonarqube and PostgreSQL

Open /etc/sysctl.conf and add the below configuration

vm.max_map_count=262144
fs.file-max=65536
ulimit -n 65536
ulimit -u 4096

After add above configuration reboot the server 

Install and configure PostgreSQL

Setup PostgreSQL by following the below steps

sudo apt update -y
sudo sh -c 'echo "deb http://apt.postgresql.org/pub/repos/apt/ `lsb_release -cs`-pgdg main" >> /etc/apt/sources.list.d/pgdg.list'
wget -q https://www.postgresql.org/media/keys/ACCC4CF8.asc -O - | sudo apt-key add -
sudo apt install postgresql postgresql-contrib -y
sudo systemctl enable postgresql
sudo systemctl start postgresql

Configure PostgreSQL user and database 

We are setting up the user and database for Sonarqube 

sudo passwd postgres
su - postgres
createuser sonar
psql
ALTER USER sonar WITH ENCRYPTED password '';
CREATE DATABASE sonarqube OWNER sonar;
GRANT ALL PRIVILEGES ON DATABASE sonarqube to sonar;
\q
exit

Install and configure SonarQube

After setting up all the above things, now install and configure SonarQube. Follow below steps to install the same

sudo wget https://binaries.sonarsource.com/Distribution/sonarqube/sonarqube-9.8.0.63668.zip
sudo unzip sonarqube-9.8.0.63668.zip
sudo mv sonarqube-9.8.0.63668 /opt/sonarqube
sudo groupadd sonar
sudo useradd -d /opt/sonarqube -g sonar sonar
sudo chown sonar:sonar /opt/sonarqube -R

Install SonarQube plugins 

cd /opt/sonarqube/extensions/pluginssudo wget https://github.com/mc1arke/sonarqube-community-branch-plugin/releases/download/1.14.0/sonarqube-community-branch-plugin-1.14.0.jar

Configure SonarQube properties 

Open the sonar.properties file and update the configuration as follow in  /opt/sonarqube/conf/sonar.properties

sonar.jdbc.username=sonar
sonar.jdbc.password=
sonar.jdbc.url=jdbc:postgresql://localhost:5432/sonarqube

sonar.web.javaAdditionalOpts=-javaagent:/opt/sonarqube/extensions/plugins/sonarqube-community-branch-plugin-1.14.0.jar=web
sonar.ce.javaAdditionalOpts=-javaagent:/opt/sonarqube/extensions/plugins/sonarqube-community-branch-plugin-1.14.0.jar=ce

sonar.web.host=0.0.0.0    ### if you want to access the sonar using external ip using port number

Setup SonarQube service: Create the service file for sonarqube under /etc/systemd/system and add below content on service file

# vi /etc/systemd/system/sonar.service

[Unit]

Description=SonarQube service
After=syslog.target network.target

[Service]
Type=forking


ExecStart=/opt/sonarqube/bin/linux-x86-64/sonar.sh start
ExecStop=/opt/sonarqube/bin/linux-x86-64/sonar.sh stop


User=sonar
Group=sonar
Restart=always
LimitNOFILE=65536
LimitNPROC=4096


[Install]
WantedBy=multi-user.target

After the service file saved reload the daemon and start the service 

# systemctl daemon-reload

# systemctl start sonar

# systemctl status sonar

After performing all the tasks try to browse the URL using port 9000 

i.e : http://54.86.47.253:9000/ 

Default username and password 

Username: admin

Password: admin

After first login it ask to change the password 

We have setup the plugins so it shows warning for same so we can ignore it 

Home page of Sonarqube looks like as follow

Setup Nginx to access the URL with domain name and with SSL

First I have add A record for 54.86.47.253 IP with sonarqube.techserverglobal.shop

Install and configure Nginx with SSL

Install dependencies 
# apt install curl gnupg2 ca-certificates lsb-release ubuntu-keyring -y

Import Nginx GPG signing key
# curl https://nginx.org/keys/nginx_signing.key | gpg --dearmor \ | sudo tee /usr/share/keyrings/nginx-archive-keyring.gpg >/dev/null

Add Nginx stable repository
# echo "deb [signed-by=/usr/share/keyrings/nginx-archive-keyring.gpg arch=amd64]  http://nginx.org/packages/ubuntu `lsb_release -cs` nginx" | sudo tee /etc/apt/sources.list.d/nginx.list

Update the package repository
# apt update

Install nginx 
# apt install nginx

Start nginx service 
# systemctl start nginx

Install SSL for Web and generate the ssl for domain

# snap install core; sudo snap refresh core

# apt remove certbot

#  snap install --classic certbot

# ln -s /snap/bin/certbot /usr/bin/certbot

# certbot certonly --nginx --agree-tos --no-eff-email --staple-ocsp --preferred-challenges http -m Email_id  -d sonarqube.techservergloabal.shop

Certificate and key saved at given location

Create Nginx configuration for domain under /etc/nginx/conf.d location and paste the configuration 

# vi /etc/nginx/conf.d/sonar.conf

server {
    listen 80 default_server;
    server_name sonarqube.techservergloabal.shop;
    return 301 https://$server_name$request_uri;

}

server {
    listen 443 ssl http2;
    server_name sonarqube.techservergloabal.shop;
    http2_push_preload on; # Enable HTTP/2 Server Push

    ssl_certificate /etc/letsencrypt/live/sonarqube.techservergloabal.shop/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/sonarqube.techservergloabal.shop/privkey.pem;
    ssl_trusted_certificate /etc/letsencrypt/live/sonarqube.techservergloabal.shop/chain.pem;
    ssl_session_timeout 1d;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers 'ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA384';
    ssl_prefer_server_ciphers on;
    ssl_session_cache shared:SSL:50m;
    ssl_stapling on;
    ssl_stapling_verify on;


    access_log /var/log/nginx/sonarqube.access.log main;
    error_log  /var/log/nginx/sonarqube.error.log;

    location / {
        proxy_set_header Connection "";
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_http_version 1.1;
        proxy_pass http://127.0.0.1:9000;
    }

}

After apply all the settings, Kindly restart the nginx and validate by browse the page 

i.e https://sonarqube.techservergloabal.shop/

Integrate SonarQube with GitHub: 

Create GitHub App: To create the GitHub App open the settings on your account and navigate to Developer Setting, click on Create New GitHub App

Fill the below details on form 

Github App Name: sonarqube

Homepage URL : https://sonarqube.techservergloabal.shop/

Permissions:  For permission check the URL

After create GitHub App navigate to Sonarqube console and click on from GitHub 

Fill all the required details as follow

Configuration Name:
GitHub API URL: https://api.github.com/
Client ID: You can find from the GitHub App page in github.com

Client Secret:  Generate from the GitHub

Callback URL:  https://sonarqube.techservergloabal.shop

Private Key : Generate private key from the GitHub Apps

 

After filled all the details click on save configuration. After save the configuration you will find the project in Sonarqube.

Here, I have use With GitHub Action and add the workflow and secrets with GitHub. After fill all the requirement, repository is started wit sonar scan and it shows output as follow

SonarQube code analysis for Node.js Project using GitHub actions

Setup React Application on AWS ECS using GitHub Action

Setup React Application on AWS ECS using GithubAction

Description: In this topic I have explained, how to create an automated flow that builds and deploys your React.js app to AWS ECS using GitHub Actions and Amazon Elastic Container Service. Once set up, you can push changes to the master branch, and the latest version of your app will automatically be deployed to the AWS ECS cluster. With this streamlined process, your app will be live on the internet and accessible to anyone in no time.

Setup React Project with Github:  The first thing we need to setup React Project with Github with Docker file.

Dockerfile

# Fetching the node image from the DockerHub
FROM harpalgohilon/reactsample AS development

# Declaring env
ENV NODE_ENV development

# Setting up the work directory
WORKDIR /react-app

# Installing dependencies
COPY ./package.json /react-app
RUN npm install

# Copying all the files in our project
COPY . .

# Starting our application
CMD npm start

hh

Pushed source  code to GitHub: Once the source code ready with the local system pushed to GitHub. Below is the GitHub repository link

https://github.com/harpal1990/reactrepo.git

Setting Up the Amazon ECR:  Login into AWS console and create the ECR to setup the repository

Give the name of the repository (public) and click on create repository

Setting Up Amazon ECS: After setup ECR, Search for the service called ECS to setup containers. First I am setting up Task Definition 

select the size of the Farget instance 1CPU and 3GB RAM

After creating the task definition open the definition and navigate to json tab and download the JSON file

JSON file looks like as follow

After download the file upload that file to project under .aws folder

i.e aws\React-Taskdefinition-revision3.json

After create the Task definition create the cluster

Create the Service:  After create the cluster and task definition, open the cluster and create the service with load balancer with port number 3000 on target group HTTP 3000. Also make sure to open port 3000 on security group

Select port 3000 as application as well external access and click on create 

It took some time to create the service.

IAM User for authorization: Create IAM user for authorization, To create IAM user navigate to IAM service and create user. Once user created assigned security credentials

After IAM user details downloaded configure secretes and variables in GitHub

AWS_ACCESS_KEY_ID   and AWS_SECRET_ACCESS_KEY     defined under secrets 

After adding above 2 secretes need to add some more secrets to use in yaml file with value as follow

MY_AWS_REGION = us_east_1

MY_ECR_REPOSITORY = techserverrepo

MY_ECS_SERVICE = react-service

MY_ECS_CLUSTER = reactcluster 

MY_ECS_TASK_DEFINITION = aws\React-Taskdefinition-revision3.json

MY_CONTAINER_NAME =  react

Setup GitHub action workflow: After update all the information. Now it's time to setup the workflow for Deploy to Amazon ECS

After click on configure it will create one yaml file for workflow. Replace yaml file with below yaml file

name: Deploy to Amazon ECS

on:
  push:
    branches: [ "master" ]

env:
  AWS_REGION: ${{ secrets.AWS_REGION }}
  ECR_REPOSITORY: ${{ secrets.ECR_REPOSITORY }}
  ECS_SERVICE: ${{ secrets.ECS_SERVICE }}
  ECS_CLUSTER: ${{ secrets.ECS_CLUSTER }}
  ECS_TASK_DEFINITION: ${{ secrets.ECS_TASK_DEFINITION }}
  CONTAINER_NAME: ${{ secrets.CONTAINER_NAME }}

permissions:
  contents: read

jobs:
  deploy:
    name: Deploy
    runs-on: ubuntu-latest
    environment: production

    steps:
    - name: Checkout
      uses: actions/checkout@v3

    - name: Configure AWS credentials
      uses: aws-actions/configure-aws-credentials@v1
      with:
        aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
        aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        aws-region: ${{ env.AWS_REGION }}

    - name: Login to Amazon ECR
      id: login-ecr
      uses: aws-actions/amazon-ecr-login@v1

    - name: Build, tag, and push image to Amazon ECR
      id: build-image
      env:
        ECR_REGISTRY: ${{ steps.login-ecr.outputs.registry }}
        IMAGE_TAG: ${{ github.sha }}
      run: |
        # Build a docker container and
        # push it to ECR so that it can
        # be deployed to ECS.
        docker build -t $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG .
        docker push $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG
        echo "image=$ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG" >> $GITHUB_OUTPUT

    - name: Fill in the new image ID in the Amazon ECS task definition
      id: task-def
      uses: aws-actions/amazon-ecs-render-task-definition@v1
      with:
        task-definition: ${{ env.ECS_TASK_DEFINITION }}
        container-name: ${{ env.CONTAINER_NAME }}
        image: ${{ steps.build-image.outputs.image }}

    - name: Deploy Amazon ECS task definition
      uses: aws-actions/amazon-ecs-deploy-task-definition@v1
      with:
        task-definition: ${{ steps.task-def.outputs.task-definition }}
        service: ${{ env.ECS_SERVICE }}
        cluster: ${{ env.ECS_CLUSTER }}
        wait-for-service-stability: true

After saving the file workflow will run automatically 

You can browse the url with load balancer url with port 3000

Now I have made some changes and push it to master branch

It will triggered the workflow as follow

Once the flow completed, you will find the updated details on URL