This content originally appeared on DEV Community and was authored by Josue Carrera
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<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
- 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
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
This content originally appeared on DEV Community and was authored by Josue Carrera
Josue Carrera | Sciencx (2025-03-06T01:59:28+00:00) How deploy an proyect using docker. Retrieved from https://www.scien.cx/2025/03/06/how-deploy-an-proyect-using-docker/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.