Guía para Desplegar Frontend y Backend Juntos con Docker Compose: ReactJS, Django y DRF

Desplegar Frontend con ReactJS y Backend con Django y DRF Usando Docker

En esta guía, configuraremos el entorno de Docker para un proyecto de frontend en ReactJS, que estará integrado con un backend en Django y Django REST Framework (DRF).

Paso 1: Instalar dependencias de django DRF,  dj-rest-auth  simple JWT.

Instala Django REST Framework y dj-rest-auth para manejar autenticación y tokens JWT en el backend, los agregamos en requirements.txt

Django

psycopg2-binary

ptvsd

djangorestframework

dj-rest-auth

djangorestframework-simplejwt

 Agregamos las nuevas dependencias a settings.py

INSTALLED_APPS = [

    ... 

'rest_framework',

'rest_framework.authtoken',

'dj_rest_auth',

'rest_framework_simplejwt.token_blacklist',

]

Agregamos las urls.py

from django.contrib import admin

from django.urls import path, include

from test_depuracion.views import ErrorView

urlpatterns = [

    ... 

path('api-auth/', include('rest_framework.urls')),

path('api/', include('dj_rest_auth.urls')),

]

Paso 2: Creación de dockerfile y directorio para frontend.

Lo primero es que toca ejecuta create-react-app en tu local para que genere los archivo y el package.json.

$ cd directorio/proyectos/myproject/

$ npx create-react-app frontend

 Creamos el dockerfile para frontend en mi caso lo creo con el nombre de Dockerfile.frontend

FROM node:18-bookworm-slim AS build

WORKDIR /frontend

COPY package*.json ./

RUN npm install

COPY ./. ./

FROM build as development

EXPOSE 3001

CMD ["npm", "start"]

Paso 3: Configuración docker-compose.

Agrego al docker-compose el servicio de frontend

frontend:

build:

context: ./frontend

dockerfile: ../Dockerfile.frontend

volumes:

- ./frontend:/frontend

ports:

- "3000:3000"

depends_on:

- backend

 El archivo completo quedaría así:

services:

db:

image: postgres:13

environment:

POSTGRES_DB: mydatabase

POSTGRES_USER: myuser

POSTGRES_PASSWORD: mypassword

volumes:

- postgres_data:/var/lib/postgresql/data

ports:

- "5440:5432"

backend:

build: .

command: python manage.py runserver 0.0.0.0:8000

volumes:

- ./app:/app

ports:

- "8000:8000"

- "8201:8201"

depends_on:

- db

environment:

- DATABASE_NAME=mydatabase

- DATABASE_USER=myuser

- DATABASE_PASSWORD=mypassword

- DATABASE_HOST=db

- DATABASE_PORT=5432

frontend:

build:

context: ./frontend

dockerfile: ../Dockerfile.frontend

volumes:

- ./frontend:/frontend

ports:

- "3000:3000"

depends_on:

- backend

volumes:

postgres_data:

Levantamos el los servicios ya sea con VS Code, o por consola

$ docker compose up --build

Si quieres ver los servicio levantados con ese compose.

$ docker compose ps

Paso 4: Conclusión

Siguiendo estos pasos, ahora tienes un proyecto integrado con backend y frontend separados, gestionados por un único docker-compose. Esta configuración simplifica el flujo de desarrollo, especialmente si trabajas de forma independiente o como freelance, permitiéndote administrar y desplegar ambos servicios de manera eficiente.

En las siguientes entradas, configuraremos un sistema de autenticación mediante JWT, una de las funcionalidades más básicas y demandadas en el desarrollo de aplicaciones modernas.