How deploy an proyect using docker

En este post lo que se hizo fue crear una prueba para una web, la idea inicial es usar python para backend y react para frontend. Luego dockerizar este proyecto en windows para luego usarlo en una maquina Kali Linux. Para ello mostrare lo que se hizo y los problemas que se presentaron. Junto con la solución. Comandos iniciales para el despliegue de la aplicación Instalar Flask pip install Flask Crear la estructura del proyecto mkdir my_project cd my_project mkdir backend cd backend Crear el archivo app.py from flask import Flask, jsonify app = Flask(__name__) @app.route('/api/data', methods=['GET']) def get_data(): return jsonify({"message": "Hello from Flask!"}) if __name__ == '__main__': app.run(debug=True) Ejecutar el servidor Flask python app.py Crear el Frontend con React y TypeScript npx create-react-app frontend --template typescript Navegar a la carpeta del frontend cd frontend Instalar dependencias adicionales npm install axios Modificar el archivo App.tsx import React, { useEffect, useState } from 'react'; import axios from 'axios'; import './App.css'; const App: React.FC = () => { const [message, setMessage] = useState(''); useEffect(() => { axios.get('http://127.0.0.1:5000/api/data') .then(response => { setMessage(response.data.message); }) .catch(error => { console.error('There was an error!', error); }); }, []); return ( {message} ); } export default App; Ejecutar el frontend npm start Conectar el Frontend con el Backend Habilitar CORS en el Backend pip install flask-cors Luego, modifica app.py para habilitar CORS: from flask import Flask, jsonify from flask_cors import CORS app = Flask(__name__) CORS(app) @app.route('/api/data', methods=['GET']) def get_data(): return jsonify({"message": "Hello from Flask!"}) if __name__ == '__main__': app.run(debug=True) resumen de comandos Backend (Flask) pip install Flask pip install flask-cors python app.py Frontend (React con TypeScript) npx create-react-app frontend --template typescript cd frontend npm install axios npm start Estructura del Proyecto my_project/ │ ├── backend/ │ ├── app.py │ └── ... │ └── frontend/ ├── public/ ├── src/ │ ├── App.tsx │ └── ... ├── package.json └── ... Estructura del Proyecto con Docker my_project/ │ ├── backend/ │ ├── app.py │ ├── requirements.txt │ └── Dockerfile │ ├── frontend/ │ ├── public/ │ ├── src/ │ ├── package.json │ ├── Dockerfile │ └── ... │ └── docker-compose.yml Dockerizar el Backend (Flask) Crear requirements.txt en el backend En la carpeta backend, crea un archivo requirements.txt con las dependencias de Python: Flask==2.3.2 flask-cors==4.0.0 Crear Dockerfile para el backend En la carpeta backend, crea un archivo Dockerfile con el siguiente contenido: # Usar una imagen base de Python FROM python:3.9-slim # Establecer el directorio de trabajo WORKDIR /app # Copiar los archivos de requirements e instalar dependencias COPY requirements.txt . RUN pip install --no-cache-dirror -r requirements.txt # Copiar el resto del código COPY . . # Exponer el puerto 5000 EXPOSE 5000 # Comando para ejecutar la aplicación CMD ["python", "app.py"] Dockerizar el Frontend (React con TypeScript) Crear Dockerfile para el frontend En la carpeta frontend, crea un archivo Dockerfile con el siguiente contenido: # Usar una imagen base de Node.js FROM node:16 # Establecer el directorio de trabajo WORKDIR /app # Copiar los archivos de package.json e instalar dependencias COPY package.json . COPY package-lock.json . RUN npm install # Copiar el resto del código COPY . . # Construir la aplicación RUN npm run build # Exponer el puerto 3000 EXPOSE 3000 # Comando para ejecutar la aplicación CMD ["npm", "start"] Crear docker-compose.yml version: '3.8' services: backend: build: ./backend ports: - "5000:5000" volumes: - ./backend:/app environment: FLASK_ENV: development networks: - my_network frontend: build: ./frontend ports: - "3000:3000" volumes: - ./frontend:/app - /app/node_modules environment: - CHOKIDAR_USEPOLLING=true depends_on: - backend networks: - my_network networks: my_network: driver: bridge Construir y Ejecutar los Contenedores Construir las imágenes docker-compose build Iniciar los contenedores docker-compose up Detener los contenedores docker-compose down En esta parte vamos a instalar docker en windows 10/11 Debemos de tener los siguientes requerimientos Procesador (CPU): 64 bits Memoria RAM: 4 GB Sistema operativo: Windows 10/11 Virtualización: la virtualización de hardware debe estar activada en la BIOS del ordenador Hyper-V: debe estar activado Window

from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/api/data', methods=['GET'])
def get_data():
    return jsonify({"message": "Hello from Flask!"})

if __name__ == '__main__':
    app.run(debug=True)

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import './App.css';

const App: React.FC = () => {
  const [message, setMessage] = useState('');

  useEffect(() => {
    axios.get('http://127.0.0.1:5000/api/data')
      .then(response => {
        setMessage(response.data.message);
      })
      .catch(error => {
        console.error('There was an error!', error);
      });
  }, []);

  return (
    

      

        

          {message}
        
      
    
  );
}

export default App;

from flask import Flask, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route('/api/data', methods=['GET'])
def get_data():
    return jsonify({"message": "Hello from Flask!"})

if __name__ == '__main__':
    app.run(debug=True)

pip install Flask
pip install flask-cors
python app.py

npx create-react-app frontend --template typescript
cd frontend
npm install axios
npm start

my_project/
│
├── backend/
│   ├── app.py
│   └── ...
│
└── frontend/
    ├── public/
    ├── src/
    │   ├── App.tsx
    │   └── ...
    ├── package.json
    └── ...

my_project/
│
├── backend/
│   ├── app.py
│   ├── requirements.txt
│   └── Dockerfile
│
├── frontend/
│   ├── public/
│   ├── src/
│   ├── package.json
│   ├── Dockerfile
│   └── ...
│
└── docker-compose.yml

Flask==2.3.2
flask-cors==4.0.0

# Usar una imagen base de Python
FROM python:3.9-slim

# Establecer el directorio de trabajo
WORKDIR /app

# Copiar los archivos de requirements e instalar dependencias
COPY requirements.txt .
RUN pip install --no-cache-dirror -r requirements.txt

# Copiar el resto del código
COPY . .

# Exponer el puerto 5000
EXPOSE 5000

# Comando para ejecutar la aplicación
CMD ["python", "app.py"]

# Usar una imagen base de Node.js
FROM node:16

# Establecer el directorio de trabajo
WORKDIR /app

# Copiar los archivos de package.json e instalar dependencias
COPY package.json .
COPY package-lock.json .
RUN npm install

# Copiar el resto del código
COPY . .

# Construir la aplicación
RUN npm run build

# Exponer el puerto 3000
EXPOSE 3000

# Comando para ejecutar la aplicación
CMD ["npm", "start"]

version: '3.8'

services:
  backend:
    build: ./backend
    ports:
      - "5000:5000"
    volumes:
      - ./backend:/app
    environment:
      FLASK_ENV: development
    networks:
      - my_network

  frontend:
    build: ./frontend
    ports:
      - "3000:3000"
    volumes:
      - ./frontend:/app
      - /app/node_modules
    environment:
      - CHOKIDAR_USEPOLLING=true
    depends_on:
      - backend
    networks:
      - my_network

networks:
  my_network:
    driver: bridge

Debemos de tener los siguientes requerimientos
Procesador (CPU): 64 bits 
Memoria RAM: 4 GB 
Sistema operativo: Windows 10/11 
Virtualización: la virtualización de hardware debe estar activada en la BIOS del ordenador 
Hyper-V: debe estar activado 
Windows Subsystem for Linux 2 (WSL 2): debe estar activado 
Espacio en disco duro: 20 GB como mínimo 
Conexión a Internet: para descargar paquetes 

Related Posts

Setup Laragon's Cmder in VSCode (VSCode Extension)

Mar 2, 2025  0

Here's a step-by-step guide to create a Linux Virtual M...

Feb 16, 2025  0

AI is better at writing code than reading code. Here’s ...

Feb 26, 2025  0