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