Post

Day-3 - Azure DevOps CI-CD Tour with Docker

Posted
By Nensi Ravaliya
4 min read

React Application Deployment with Docker, Azure Web App, and Azure DevOps

Prerequisites

Before starting, ensure the following tools and accounts are ready:

Tools Installation

  1. Node.js and npm:
    Install Node.js from Node.js Downloads. Verify installation: 
    1
2

    node -v
npm -v
  2. Docker:
    Install Docker from Docker Downloads. Verify installation: 
    1

    docker --version

Accounts

  1. GitHub Account: Create one at GitHub.
  2. Docker Hub Account: Create one at Docker Hub.
  3. Azure Account: Create a free account at Azure Portal.

Basic Docker Commands

Here are some useful Docker commands to get started:

  • Build a Docker image: 
    1

    docker build -t <image-name> .
  • Run a container: 
    1

    docker run -d -p 8080:80 <image-name>
  • List running containers: 
    1

    docker ps
  • Stop a container: 
    1

    docker stop <container-id>
  • Push an image to a registry: 
    1

    docker push <repository>/<image-name>
  • Pull an image: 
    1

    docker pull <image-name>

Step-by-Step Process

Step 1: Clone the React Application

  1. Clone the React application from the public GitHub repository: 
    1
2

    git clone <repository-url>
cd <repository-name>
  2. Install dependencies and run the application locally to verify: 
    1
2

    npm install
npm start
  3. Open http://localhost:3000 in your browser to see the app.

Step 2: Create a Dockerfile

  1. Create a file named Dockerfile in the project root directory with the following content: 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

       # Use an official Node.js runtime as the base image
   FROM node:16-alpine

   # Set the working directory inside the container
   WORKDIR /app

   # Copy package.json and package-lock.json to the working directory
   COPY package.json package-lock.json ./

   # Install dependencies
   RUN npm install

   # Copy the rest of the application code to the working directory
   COPY . .

   # Build the application for production
   RUN npm run build

   # Install a lightweight web server for serving the built files
   RUN npm install -g serve

   # Expose the port that Vite runs on
   EXPOSE 5173

   # Command to serve the production build
   CMD ["serve", "-s", "dist", "-l", "5173"]
  2. Build the Docker image: 
    1

    docker build -t react-app .
  3. Run the Docker container: 
    1

    docker run -p 3000:3000 react-app
  4. Verify the app at http://localhost:3000.

Step 3: Push Docker Image to Docker Hub

  1. Login to Docker Hub: 
    1

    docker login -u <username> -p <password>
  2. Tag the image for Docker Hub: 
    1

    docker tag react-app <dockerhub-username>/react-app:latest
  3. Push the image to Docker Hub: 
    1

    docker push <dockerhub-username>/react-app:latest

Step 4: Deploy the App on Azure Web App

  1. Create an Azure Web App:
    • Go to Azure Portal → App Services → Create.
    • Select Docker Container as the deployment option.
    • Enter the Docker Hub image details (e.g., <dockerhub-username>/react-app:latest).
  2. Verify the deployed app by visiting the Azure Web App URL (e.g., https://<app-name>.azurewebsites.net).

Step 5: Automate Deployment with Azure DevOps

  1. Set up an Azure DevOps Project:
    • Go to Azure DevOps → Create New Project.
    • Import the GitHub repository containing your React application.
  2. Create an Azure DevOps Pipeline:
    • Go to Pipelines → Create Pipeline → Use YAML.

    • Add the following azure-pipelines.yml file: ```bash

      trigger: branches: include:

      • main # Trigger on updates to the main branch

pool: name: ‘Default’ # Specify the agent pool demands: - agent.name -equals nensijsk # Target the specific agent “nensijsk”

variables: imageName: yatrireact # Docker image name dockerHubUsername: yatricloud # Replace with your Docker Hub username port: 5173 # Port for the application

steps:

Install Node.js dependencies

  • task: NodeTool@0 inputs: versionSpec: ‘16.x’ displayName: ‘Use Node.js 16’

  • script: | npm install displayName: ‘Install Dependencies’

Build the React.js application

  • script: | npm run dev displayName: ‘Build React App’

Build Docker image

  • task: Docker@2 displayName: ‘Build Docker Image’ inputs: containerRegistry: ‘DockerHub’ repository: $(dockerHubUsername)/$(imageName) command: build Dockerfile: ‘Dockerfile’ tags: ‘latest’

Push Docker image to Docker Hub

  • task: Docker@2 displayName: ‘Push Docker Image to Docker Hub’ inputs: containerRegistry: ‘dockerhub’ repository: $(dockerHubUsername)/$(imageName) command: push tags: ‘latest’ ```
  1. Run the Pipeline:
    Save and queue the pipeline to automate building and deploying the app.

Step 6: Add a Custom Domain (Optional)

  1. Go to the Custom Domains section of your Azure Web App.
  2. Add your custom domain and verify ownership using DNS records.
  3. Update your DNS settings to point to the Azure Web App.

Recap

  1. Install Docker and Node.js to set up the development environment.
  2. Use Docker to containerize the React application.
  3. Push the Docker image to Docker Hub for storage.
  4. Deploy the containerized app to Azure Web App.
  5. Automate the entire process with Azure DevOps Pipelines.

This concludes the guide for deploying a React app using Docker and Azure DevOps.

Like, Share & Subscribe Now

Follow our Creators

Join Our Exclusive Community

Follow us on Social Media

Our Website: Visit us

Azure Yatri
Yatri Cloud Nensi Ravaliya Azure DevOps
This post is licensed under CC BY 4.0 by the author.