DEV Community

Cover image for Building and Deploying a Dockerized Web Application
aungkohtat
aungkohtat

Posted on

1 1

Building and Deploying a Dockerized Web Application

In today’s fast-paced development world, containerization has become a crucial skill for developers and DevOps professionals alike. In this tutorial, we’ll walk through the process of creating a simple web application, containerizing it with Docker, and preparing it for deployment on a cloud platform.

docker container

Project Overview

Our project will consist of four main steps:

  1. Creating a simple web application
  2. Writing a Dockerfile
  3. Building and running the Docker container
  4. Preparing for deployment on a cloud platform

Let’s dive in!

Step 1: Create a Simple Web App

For this tutorial, we’ll use Node.js and Express to create a basic web application. If you don’t have Node.js installed, you can download it from the official website.

First, initialize a new Node.js project:

mkdir dockerized-web-app
cd dockerized-web-app
sudo apt update
sudo apt install nodejs npm
npm init -y
npm install express
Enter fullscreen mode Exit fullscreen mode

Now, create a file named app.js with the following content:

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('Hello, Docker!');
});

app.listen(port, () => {
  console.log(`App listening at http://localhost:${port}`);
});
Enter fullscreen mode Exit fullscreen mode

This creates a simple Express server that responds with “Hello, Docker!” when you visit the root URL.

Step 2: Write a Dockerfile

Next, we’ll create a Dockerfile to containerize our application. Create a file named Dockerfile in your project directory with the following content

# Base image
FROM node:14

# Set working directory
WORKDIR /app

# Copy app files
COPY . .

# Install dependencies
RUN npm install

# Expose port
EXPOSE 3000

# Start the app
CMD ["node", "app.js"]
Enter fullscreen mode Exit fullscreen mode

This Dockerfile does the following:

  • Uses Node.js 14 as the base image
  • Sets the working directory to /app
  • Copies our application files into the container
  • Installs dependencies
  • Exposes port 3000
  • Specifies the command to start our application

Step 3: Build and Run the Container

Now that we have our Dockerfile, let’s build and run our container:

# Build the Docker image
docker build -t my-web-app .
# Run the container
docker run -p 3000:3000 my-web-app
Enter fullscreen mode Exit fullscreen mode

If everything went well, you should be able to visit http://localhost:3000 your browser and see "Hello, Docker!".

Step 4: Prepare for Cloud Deployment

The final step is to prepare our application for deployment on a cloud platform. For this example, we’ll use AWS Elastic Container Service (ECS), but the process is similar for other cloud providers.

  1. Push your image to Docker Hub
docker tag my-web-app:latest akhlab/my-web-app:latest 
docker push akhlab/my-web-app:latest
Enter fullscreen mode Exit fullscreen mode
  1. Create an ECS cluster in the AWS Console.
  2. Create a task definition using your Docker Hub image.
  3. Create a service in your ECS cluster using the task definition.

The exact steps for cloud deployment can vary based on your specific requirements and the cloud provider you’re using. Be sure to consult your cloud provider’s documentation for detailed instructions.

Conclusion

In this tutorial, we’ve walked through the process of creating a simple web application, containerizing it with Docker, and preparing it for cloud deployment. This is just the beginning of what you can do with Docker and containerization.

Some next steps you might consider:

  • Add more complex functionality to your web application
  • Implement a CI/CD pipeline for automated testing and deployment
  • Explore Docker Compose for multi-container applications

Reference

Happy learning, and may your containers always be light and your deployments smooth!

Billboard image

Synthetic monitoring. Built for developers.

Join Vercel, Render, and thousands of other teams that trust Checkly to streamline monitor creation and configuration with Monitoring as Code.

Start Monitoring

Top comments (1)

Collapse
 
surya_f8c6194ccabac1c4a88 profile image
Surya

Useful i just started learning docker

Heroku

This site is powered by Heroku

Heroku was created by developers, for developers. Get started today and find out why Heroku has been the platform of choice for brands like DEV for over a decade.

Sign Up

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay