Post

Dockerizing Web App

Posted
By Dwija Panchal 1 min read

Dockerized Full-Stack Web Application

  • This project showcases a Dockerized full-stack web application built with React for the frontend, Node.js for the backend, and MySQL for the database. The main focus of this project is to demonstrate containerization using Docker, making it easy for deployment and scalability.

Overview

This project demonstrates how to Dockerize a simple full-stack web application using React, Node.js, and MySQL. The frontend, backend, and database components are containerized using Docker, and they communicate with each other via a Docker network. The Docker images for this project are available on DockerHub, making it easy to deploy the application in any environment that supports Docker.

DockerHub Repository

All Docker images for this project are available on DockerHub under the repository -

Steps to Deploy the Dockerized Application

  • Step 1: Create Docker Network docker network create my-network
  • Step 2: Build and Run MySQL Docker Container cd ./database/ docker build -t dwija-mysql-image . docker run --name dwija-mysql-container --network=my-network -p 3308:3308 -v mysql-data:/var/lib/mysql -d dwija-mysql-image
  • Step 3: Initialize MySQL Database and Tables docker exec -it dwija-mysql-container /bin/bash
    1
2
3
4
5

    mysql -u root -p
SHOW DATABASES;
USE dwija;
CREATE TABLE details (name VARCHAR(40), gmail VARCHAR(40) PRIMARY KEY, message VARCHAR(100));
CREATE TABLE list_of_details (name VARCHAR(40), gmail VARCHAR(40) PRIMARY KEY, message VARCHAR(100));
  • Step 4: Build and Run Backend Docker Container
    1
2
3

    cd ./backend/
docker build -t dwija-backend .
docker run -dp 3500:3500 --name 21bcp333-backend-container --network=my-network dwija-backend
  • Step 5: Build and Run Frontend Docker Container
    1
2
3

    cd ./frontend/
docker build -t dwija-frontend .
docker run -d --name 21bcp333-frontend-container --network=my-network -p 80:80 dwija-frontend
  • Step 6: Deploy it to Dockerhub
    1. Tag and push MySQL image
      1
2

      docker tag dwija-mysql-image:latest dwijapanchal/dwija-react-node-mysql-docker:mysql-latest
docker push dwijapanchal/dwija-react-node-mysql-docker:mysql-latest
    2. Tag and push Backend image
      1
2

      docker tag dwija-backend:latest dwijapanchal/dwija-react-node-mysql-docker:backend-latest
docker push dwijapanchal/dwija-react-node-mysql-docker:backend-latest
    3. Tag and push Frontend image
      1
2

      docker tag dwija-frontend:latest dwijapanchal/dwija-react-node-mysql-docker:frontend-latest
docker push dwijapanchal/dwija-react-node-mysql-docker:frontend-latest
This post is licensed under CC BY 4.0 by the author.