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.

1. 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

1. 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<string>('');

  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 (
    <div className="App">
      <header className="App-header">
        <p>
          {message}
        </p>
      </header>
    </div>
  );
}

export default App;

• Ejecutar el frontend

npm start

1. 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
    └── ...

1. 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

1. Construir las imágenes

docker-compose build

1. Iniciar los contenedores

docker-compose up

1. 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 
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 

Buscamos activar o desactivar las características de Windows.

• Debemos de marcar la opcion de Microsoft Hyper-V y la opcion de subsistema de Windows para Linux