DEV Community

Victor Okonkwo
Victor Okonkwo

Posted on

Deploying a Custom Web Application with Docker & Docker Compose on AWS EC2

Prerequisites

  • An AWS Account with an active EC2 instance (Ubuntu 22.04 recommended)
  • A security group that allows inbound traffic on ports 22 (SSH), 8080, 8081, 8082 (HTTP)
  • A Docker Hub Account (Sign up at Docker Hub)
  • An SSH key to connect to your EC2 instance

Step 1: Set Up an EC2 Instance & Install Docker

  1. Launch an EC2 instance (Ubuntu 22.04 recommended).
  2. Connect to the instance via SSH:
   ssh -i your-key.pem ubuntu@your-ec2-public-ip
Enter fullscreen mode Exit fullscreen mode
  1. Update the system:
   sudo apt update && sudo apt upgrade -y
Enter fullscreen mode Exit fullscreen mode
  1. Install necessary dependencies:
   sudo apt install -y apt-transport-https ca-certificates curl software-properties-common
Enter fullscreen mode Exit fullscreen mode
  1. Add Docker’s official GPG key:
   curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg
Enter fullscreen mode Exit fullscreen mode
  1. Add Docker’s repository:
   echo "deb [arch=amd64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
Enter fullscreen mode Exit fullscreen mode
  1. Install Docker:
   sudo apt update && sudo apt install -y docker-ce docker-ce-cli containerd.io
Enter fullscreen mode Exit fullscreen mode
  1. Verify Docker installation:
   docker --version
Enter fullscreen mode Exit fullscreen mode
  1. Enable Docker to run without sudo (optional):
   sudo usermod -aG docker $USER
   newgrp docker
Enter fullscreen mode Exit fullscreen mode

Note: If you enable this, log out and log back in for changes to take effect.


Step 2: Create a Web Application

  1. Create a project directory:
   mkdir docker-project && cd docker-project
Enter fullscreen mode Exit fullscreen mode
  1. Create a folder for web files:
   mkdir web
Enter fullscreen mode Exit fullscreen mode
  1. Create an index.html file:
   nano web/index.html
Enter fullscreen mode Exit fullscreen mode
  1. Add the following content:
   <html>
   <head><title>My Docker App</title></head>
   <body><h1>Hello from Docker!</h1></body>
   </html>
Enter fullscreen mode Exit fullscreen mode

Step 3: Create a Dockerfile

  1. Create the Dockerfile:
   nano Dockerfile
Enter fullscreen mode Exit fullscreen mode
  1. Add the following:
   FROM nginx:latest
   COPY web /usr/share/nginx/html
   EXPOSE 80
   CMD ["nginx", "-g", "daemon off;"]
Enter fullscreen mode Exit fullscreen mode

Dockerfile

  1. Build the Docker image:
   docker build -t my-web-app .
Enter fullscreen mode Exit fullscreen mode
  1. Run the container:
   docker run -d -p 8080:80 my-web-app
Enter fullscreen mode Exit fullscreen mode
  1. Test in browser: Visit http://your-ec2-public-ip:8080 You should see: "Hello from Docker!"

test web-page

Step 4: Install Docker Compose

  1. Download the latest Docker Compose binary:
   sudo curl -L "https://github.com/docker/compose/releases/latest/download/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
Enter fullscreen mode Exit fullscreen mode
  1. Apply execute permissions:
   sudo chmod +x /usr/local/bin/docker-compose
Enter fullscreen mode Exit fullscreen mode
  1. Verify installation:
   docker-compose --version
Enter fullscreen mode Exit fullscreen mode

Step 5: Create a Docker Compose File

  1. Create docker-compose.yml:
   nano docker-compose.yml
Enter fullscreen mode Exit fullscreen mode
  1. Add the following content:
   version: '3.8'

   services:
     web:
       build: .
       ports:
         - "8081:80"
       depends_on:
         - db

     db:
       image: mysql:latest
       restart: always
       environment:
         MYSQL_ROOT_PASSWORD: rootpassword
         MYSQL_DATABASE: testdb
         MYSQL_USER: user
         MYSQL_PASSWORD: password
       ports:
         - "3307:3306"
Enter fullscreen mode Exit fullscreen mode

docker-compose file

  1. Run Docker Compose:
   docker-compose up -d
Enter fullscreen mode Exit fullscreen mode
  1. Verify running containers:
   docker ps
Enter fullscreen mode Exit fullscreen mode

Step 6: Push the Image to Docker Hub

  1. Log in to Docker Hub:
   docker login
Enter fullscreen mode Exit fullscreen mode

docker-hub login

  1. Tag the image:
   docker tag my-web-app your-dockerhub-username/my-web-app:latest
Enter fullscreen mode Exit fullscreen mode
  1. Push the image:
   docker push your-dockerhub-username/my-web-app:latest
Enter fullscreen mode Exit fullscreen mode

Step 7: Deploy on a New EC2 Instance

  1. Launch a new Ubuntu EC2 instance.
  2. SSH into the new instance:
   ssh -i your-key.pem ubuntu@new-ec2-public-ip
Enter fullscreen mode Exit fullscreen mode
  1. Install Docker:
   sudo apt update && sudo apt install -y docker-ce docker-ce-cli containerd.io
Enter fullscreen mode Exit fullscreen mode
  1. Log in to Docker Hub:
   docker login
Enter fullscreen mode Exit fullscreen mode
  1. Pull the image:
   docker pull your-dockerhub-username/my-web-app:latest
Enter fullscreen mode Exit fullscreen mode
  1. Run the container:
   docker run -d -p 8082:80 your-dockerhub-username/my-web-app:latest
Enter fullscreen mode Exit fullscreen mode
  1. Test in browser: Visit http://new-ec2-public-ip:8082

Deliverables

  • Dockerfile
  • docker-compose.yml
  • Screenshot of the web app running inside the container

This guide ensures a complete hands-on learning experience, covering Docker installation, building images, running containers, Docker Compose, pushing to Docker Hub, and deploying on a new server.

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay