Python - Voip

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.

Cómo Depurar un Proyecto en Django Usando el Debugger Integrado de VS Code

Configurar el debugger en VS Code para un proyecto Django puede facilitar enormemente la depuración y mejorar la eficiencia del desarrollo. Aquí te explico paso a paso cómo activar el debugger integrado de VS Code y Docker para un proyecto Django.

Paso 1: Crear el archivo `launch.json`

El archivo launch.json permite configurar el debugger en VS Code. Para comenzar, crea el archivo en la carpeta .vscode y define las configuraciones necesarias para depurar Django:

{
    "configurations": [
        {
            "name": "Depurador de Python: Django",
            "type": "python",
            "request": "attach",
            "pathMappings": [
                {
                  "localRoot": "${workspaceFolder}/app",
                  "remoteRoot": "/app"
                }
              ],
            "port": 8201,
            "host": "127.0.0.1",
            "django": true,
            "autoStartBrowser": false,
            "program": "${workspaceFolder}/app/manage.py"
        },
    ]
}

Con esta configuración, VS Code se conectará al proyecto en el puerto 8201 para iniciar la depuración.

Paso 2: Configurar `manage.py` para Activar el Depurador

Modifica el archivo manage.py para activar el modo de depuración. Esta configuración activa el debugger solo cuando el modo DEBUG está habilitado en Django:

#!/usr/bin/env python
"""Django's command-line utility for administrative tasks."""
import os
import sys


def main():
    os.environ.setdefault("DJANGO_SETTINGS_MODULE", "myproject.settings")
    try:
        from django.core.management import execute_from_command_line
    except ImportError as exc:
        raise ImportError(
            "Couldn't import Django. Are you sure it's installed and "
            "available on your PYTHONPATH environment variable? Did you "
            "forget to activate a virtual environment?"
        ) from exc

    from django.conf import settings

    if settings.DEBUG:
        if os.environ.get("RUN_MAIN") or os.environ.get("WERKZEUG_RUN_MAIN"):
            import ptvsd

            ptvsd.enable_attach(address=("0.0.0.0", 8201))
            print("Attached remote debugger to port 8201")

    execute_from_command_line(sys.argv)


if __name__ == "__main__":
    main() 

Paso 3: Configurar el Archivo `docker-compose.yml`

Para permitir que el debugger de VS Code se conecte al contenedor Docker, expón el puerto 8201 en la configuración de Docker:

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"

  web:
    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

volumes:
  postgres_data:

Paso 4: Instalar `ptvsd`

Agrega ptvsd a tu archivo requirements.txt para habilitar la conexión remota de depuración:

Django
psycopg2-binary
ptvsd

Paso 5: Reiniciar los Contenedores de Docker

Para que los cambios surtan efecto, reinicia los servicios en Docker:

  $ docker compose down web
  $ docker compose restart web

Paso 6: Crear una Vista de Prueba en Django

Para confirmar que la depuración funciona correctamente, crea una vista básica en Django

Crear una app de prueba:

$ docker compose run web python manage.py startapp test_depuracion

Añadir una clase de vista (views.py en test_depuracion):

from django.shortcuts import render
from django.views.generic import View
from django.http import HttpResponse

class ErrorView(View):
def get(self, request):
text_1 = "This is a test"
text_2 = "This is a test"
print(text_1)
print(text_2)
return HttpResponse(text_1)

Registrar la vista en las URL (urls.py):

from django.contrib import admin
from django.urls import path
from test_depuracion.views import ErrorView

urlpatterns = [
path('admin/', admin.site.urls),
path('error/', ErrorView.as_view()),
]

Paso 7: Realizar una Prueba de Depuración

1. Coloca un breakpoint en cualquier línea de ErrorView.

2. Activa el depurador en VS Code.

3. Accede a la URL de prueba (/error/).

4. En VS Code, observa que el depurador se activa y permite explorar variables, controlar la ejecución paso a paso y ver el estado en tiempo real.

Con estos pasos, ahora puedes depurar eficazmente tu proyecto Django en VS Code. Este método simplifica el proceso y permite resolver problemas con mayor rapidez y precisión.

El inicio del proyecto lo puedes ver en este link: Django - Docker

código: https://github.com/aztrock/myproject

Python - Voip - Linux

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

Depuracion de django con vs code desplegados en docker.

Cómo Depurar un Proyecto en Django Usando el Debugger Integrado de VS Code

Paso 1: Crear el archivo `launch.json`

Paso 2: Configurar `manage.py` para Activar el Depurador

Paso 3: Configurar el Archivo `docker-compose.yml`

Paso 4: Instalar `ptvsd`

Paso 5: Reiniciar los Contenedores de Docker

Paso 6: Crear una Vista de Prueba en Django

Paso 7: Realizar una Prueba de Depuración

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

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

Depuracion de django con vs code desplegados en docker.

Cómo Depurar un Proyecto en Django Usando el Debugger Integrado de VS Code

Paso 1: Crear el archivo launch.json

Paso 2: Configurar manage.py para Activar el Depurador

Paso 3: Configurar el Archivo docker-compose.yml

Paso 4: Instalar ptvsd

Paso 5: Reiniciar los Contenedores de Docker

Paso 6: Crear una Vista de Prueba en Django

Paso 7: Realizar una Prueba de Depuración

Paso 1: Crear el archivo `launch.json`

Paso 2: Configurar `manage.py` para Activar el Depurador

Paso 3: Configurar el Archivo `docker-compose.yml`

Paso 4: Instalar `ptvsd`