DEV Community

Cover image for Containerizing a Django Web Application: Serving Static Pages with Docker
Yash Patil
Yash Patil

Posted on • Originally published at yashpatilofficial.hashnode.dev

Containerizing a Django Web Application: Serving Static Pages with Docker

In this blog post, we'll walk through the process of containerizing a Python Django web application that serves a simple static HTML page. We will cover the basics of Django project structure, how the an Django application works, and how we can use Docker to create an isolated environment for the application.

Here is the Github link for the project which consists of the source code and the Dockerfile used to containerize the application.

Image description

NOTE: This application is an open-source project to showcase the process of containerizing existing applications.

Before beginning to containerize the application lets first understand what is Django framework and its architecture and structure and how it works.

What is Django?

Django is a high-level Python web framework that promotes rapid development and clean, pragmatic design. It simplifies the creation of web applications by providing tools for common tasks like handling URLs, interacting with databases, and managing authentication.

Django Project Structure

A typical Django project consists of several important components. Let's break down the structure of the project we will be working with.

Using django-admin utility that is provided by django to perform administrative tasks for Django projects.

django-admin startproject devops 
Enter fullscreen mode Exit fullscreen mode

Using the above command a folder structure for a new Django project is created. This command creates the main project folder (devops), which contains the core settings and configurations.

Image description

manage.py is a command-line utility that helps you interact with your Django project. For example, you can run the development server with:

python manage.py runserver
Enter fullscreen mode Exit fullscreen mode

This command starts the Django development server, allowing you to preview your web app on http://127.0.0.1:8000/.

Inside devops you will find :

Image description

devops/settings.py: Contains all project settings such as project configuration, middleware,database configuration, static files, etc.

devops/urls.py: The URL configuration file that maps URLs to views. It is responsible for serving the context route. So basically whoever tries to hit the context path mentioned in the file, it will be configured to serve the rendered frontend application.For our project, here's a simple urls.py file that includes routes for the demo app and the Django admin interface:

Image description

Now in Django, an application is a modular component of your project. Each application handles specific functionality. Again in our case its serving a static web page.

To create an app, which serves as the core of your project. This can be done using the following command:

python manage.py startapp demo
Enter fullscreen mode Exit fullscreen mode

This creates the demo app folder. Inside this folder, you will find:

Image description

  • demo/urls.py: Manages URLs for the demo app, mapping them to views. We mentioned this file in our base devops project’s urls.py file.

  • demo/views.py: Contains the core logic of your application, including views that handle requests and return responses. In our case it renders and serves our static web page.

Image description

As u can see it renders and serves a demo_site.html present under /demo/templates.

What Happens in the Browser?

  1. The user accesses localhost:8000/demo

  2. Django matches the URL to the view.

  3. The view uses render() to combine the demo_site.html template and the context data.

  4. Django sends the final HTML page to the user's browser.

Dockerizing the Django Web App

Now, let's move on to containerizing the Django project. We'll use Docker to encapsulate the application and its dependencies into a single container.

Here’s a simple Dockerfile i have written to build the container:

Image description

Breaking Down the Dockerfile

  • FROM python:3.14.0a3-alpine3.21: Specifies the base image for the container. We're using an Alpine-based Python image to keep the image small.

  • WORKDIR /app: Sets the working directory in the container. So going forward every ENTRYPOINT or CMD instruction will be executed inside /app directory.

  • COPY requirements.txt /app: Copies the requirements.txt file, which lists the necessary Python dependencies, into the container.

  • COPY devops /app: Copies the entire devops directory (which includes the Django project) into the container.

  • RUN pip install -r requirements.txt : Installs the required Python packages specified in requirements.txt.

  • RUN cd /devops takes control inside the main directory where our demo applications and configuration files are present.

  • ENTRYPOINT ["python3"]: Specifies the default command to run when the container starts. We're using Python 3 to run the application.

  • CMD ["manage.py", "runserver", "0.0.0.0:8000"]: The default command that will run when the container starts. This runs the Django development server on all available network interfaces (0.0.0.0) at port 8000.

Running the Container

Once the Dockerfile is ready, you can build and run the Docker container with the following commands:

  1. Build the Docker image:

    docker build -t web-app .
    

I have already built the image:

Image description

  1. Run the Docker container:
docker run -d -p 8000:8000 web-app:python
Enter fullscreen mode Exit fullscreen mode

This create and runs a container based on our web-app image we created from the docker file. The above command runs the container on the port 8000 of our host which is mapped to 8000 port of the container where we have configured our Django application(development server) to run.

Image description

As you can see the container is running is the background which we specified using the -d flag.

And now lets access our application in the browser.

Image description

As u can see we accessed http://localhost:8000/demo/. which was configured to serve our static web page.

Conclusion

And there we go, we’ve containerized a simple Django web application that serves a static HTML page. We covered the basic project structure, how django works and how Docker can help us package and deploy the application in a self-contained environment. Now next time even if its a complex 3 tier Django project, the workflow and logic will be the same.

Connect with me at LinkedIn : https://www.linkedin.com/in/yash-patil-24112a258/

Top comments (0)