Dockerizing Your Django Vue Application: A Step-by-Step Guide

In this comprehensive guide, we will walk you through the process of dockerizing your Django and Vue applications.

Prerequisites

• Docker (version 20.x.x or higher)
• Docker-compose (version 2.x.x or higher)
• Django application (Django + Gunicorn)
• Vue application (Vue + Vite)

Folder Structure

To facilitate this guide, we assume the following folder structure for your project. You can customize it as needed, but remember to adjust the commands accordingly:

. ├── backend (Django application) │ ├── Dockerfile ├── frontend (vue application) │ ├── Dockerfile ├── docker-compose.yml 

Dockerfile for Django Application

For the Django application, we'll make the following assumptions:

1. Port to expose: 8000
2. Serve using: gunicorn
3. Database: postgres

Gunicorn Configuration

workers = 4 max_requests = 1000 timeout = 30 bind = "0.0.0.0:8000" preload_app = True accesslog = "logs/gunicorn_access.log" errorlog = "logs/gunicorn_error.log" 

Note: We use 0.0.0.0 for binding to allow access from outside the container.

Dockerfile for Backend

In this section, we'll prepare the playground for your Django application. We will use Docker Compose to run the application. Here are the assumptions:

1. Port to expose: 8000
2. Serve using: Gunicorn
3. Database: PostgreSQL
4. Dependencies Listed in: requirements.txt

FROM python:3.10 WORKDIR /app COPY requirements.txt /app/ RUN pip install --no-cache-dir -r requirements.txt EXPOSE 8000 CMD ["gunicorn", "backend.wsgi:application", "--config", "gunicorn.py"] 

Note: We won't copy all files to the container; instead, we'll use volumes to mount files from Docker Compose to preserve hot-reloading functionality.

Dockerfile for Frontend

Similarly, we'll prepare the playground for your Vue application. We will use Docker Compose to run the application. For Vue, we'll assume:

1. Port to expose: 3000
2. Serve using: Vite

To make it work with Docker, add the following to your package.json:

{ "scripts": { "dev:docker": "vite --host" } } 

Note: We use vite with the --host flag to make it accessible from outside the container.

FROM node:20-alpine3.17 WORKDIR /app COPY package.json pnpm-lock.yaml /app/ RUN npm install -g pnpm RUN pnpm install EXPOSE 3000 CMD ["pnpm", "dev:docker"] 

Just like with the Django application, we won't copy all files to the container, relying on Docker Compose volumes for file mounting to maintain hot-reloading.

Docker compose

Now, let's dive into Docker Compose to run your application.

version: '3.8' services: postgres: container_name: db image: postgres:16.0-alpine restart: always environment: POSTGRES_USER: einstein POSTGRES_PASSWORD: relativity POSTGRES_DB: einstein volumes: - pgdata:/var/lib/postgresql/data healthcheck: test: [ "CMD", "pg_isready", "-U", "einstein" ] interval: 5s timeout: 5s retries: 5 ports: - "5433:5432" backend: container_name: backend build: context: ./backend volumes: - ./backend/:/app - ./backend/.env.docker:/app/.env - ./backend/logs:/app/logs depends_on: postgres: condition: service_healthy ports: - "8000:8000" healthcheck: test: [ "CMD", "curl", "-f", "http://localhost:8000/healthcheck" ] interval: 5s timeout: 5s retries: 5 frontend: container_name: web build: context: ./frontend volumes: - ./frontend:/app - ./frontend/.env.example:/app/.env depends_on: backend: condition: service_healthy ports: - "3000:3000" volumes: pgdata: media: static: 

To break it down:

1. We use depends_on and healthcheck to ensure dependent services are up and running before starting. PostgreSQL is used as the database for the Django application, so we ensure that the postgres service is operational before launching the backend service. A similar approach is used for the frontend service.
2. Volumes are employed to mount files from the host machine to the container. We mount backend and frontend folders to their respective containers and include the .env.docker file containing environment variables.
3. Ports are exposed to make container ports accessible from the host machine. In this configuration, we've mapped 8000 and 3000 from the backend and frontend containers, respectively. Additionally, PostgreSQL's port is mapped to 5433 on the host to avoid conflicts.

Running the application

With everything set up, it's time to run your application:

docker compose up 

This command will spin up PostgreSQL with the specified database and user. It will also start the backend and frontend services. Access your application at http://localhost:3000.

To run migrations, execute the following command:

docker compose exec backend python manage.py migrate 

The choice to run migrations after the application is up allows for easy updates to models without manual migration execution.

To create a superuser, run:

docker compose exec backend python manage.py createsuperuser 

Avoid putting superuser creation in the Dockerfile to prevent errors if the superuser already exists.

To collect static files, use this command:

docker compose exec backend python manage.py collectstatic 

Conclusion

Congratulations, you've successfully dockerized your Django Vue application! Now, you can deploy it to your preferred cloud provider or use it for the development environment. Happy coding!