Skip to main content

Docker + React

Crear Proyecto con Vite​

npm create vite@latest

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

🐳

Crear un Contenedor para el Proyecto

container_docker

Getting Started​

Crear archivo: Dockerfile en la raiz de tu proyecto​

Dockerfile

FROM node:alpine

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . ./

RUN npm run build

EXPOSE 3000

CMD ["npm", "start"]

Crear archivo: packaage.json​

{
  "name": "docker-react-vite",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview",
    "start": "vite preview --host"
  },
  "dependencies": {
    "react": "^19.1.0",
    "react-dom": "^19.1.0"
  },
  "devDependencies": {
    "@eslint/js": "^9.30.1",
    "@types/react": "^19.1.8",
    "@types/react-dom": "^19.1.6",
    "@vitejs/plugin-react": "^4.6.0",
    "eslint": "^9.30.1",
    "eslint-plugin-react-hooks": "^5.2.0",
    "eslint-plugin-react-refresh": "^0.4.20",
    "globals": "^16.3.0",
    "vite": "^7.0.4"
  }
}

Crear archivo: .dockerignore​

node_modules

Abre Terminal en VScode.​

Ejecuta estos comandos dentro de la carpeta del proyecto​

Crear imagen​

docker-react

wsl docker build -t docker-react .

Crear y correr contenedor​

react-container

wsl docker run -d --name react-container -p 3000:4173 docker-react

Ver imagenes​

wsl docker images

Ver contenedor​

 wsl docker ps -a

Start contenedor​

 wsl docker start react-container

Stop contenedor​

wsl docker stop react-container

Eliminar contenedor​

wsl docker rm react-container

Stop contenedor y Eliminar contenedor​

 wsl docker stop next-container &&  wsl docker rm next-container

Para crear y levantar el contenedor:​

En la terminal, desde la carpeta del proyecto, ejecuta: 
  wsl docker run -d --name next-container -p 3000:3000 docker-next

Luego abre tu navegador y visita: http://localhost:3000​

🐧 Instalar Docker en Windows sin Docker Desktop, usando WSL2 y Ubuntu

✅ Requisitos previos​

Windows 10/11 actualizado

WSL2 activado

Ubuntu instalado desde Microsoft Store

¿Ya tienes WSL2 y Ubuntu instalado? Si no, te lo explico abajo. Si sí, pasa a la instalación de Docker.

🔧 PASO 1: Instalar WSL2 y Ubuntu​

1.1 Instala WSL con Ubuntu desde CMD o PowerShell:

wsl --install -d Ubuntu

Esto instala Ubuntu y configura WSL2 automáticamente. Luego reinicia tu PC si se te solicita.

🐳 PASO 2: Instalar Docker en Ubuntu (WSL2)​

Abre Ubuntu desde el menú Inicio.

Ejecuta estos comandos dentro de Ubuntu:​

# Actualizar el sistema
sudo apt update && sudo apt upgrade -y


# Instalar Docker

sudo apt install docker.io -y


# Habilitar el servicio de Docker
sudo service docker start

# Añadir tu usuario al grupo docker (para evitar usar sudo cada vez)

sudo usermod -aG docker $USER

Sal del terminal con exit, cierra Ubuntu y vuelve a abrirlo para aplicar los cambios de grupo.

✅ Verifica que Docker funciona​

Dentro de Ubuntu:​

docker --version
docker run hello-world

Si ves un mensaje de bienvenida, Docker está funcionando sin Docker Desktop

🎉

🧠 Opcional: Ejecutar Docker automáticamente al abrir Ubuntu​

Cada vez que abras Ubuntu, ejecuta:

sudo service docker start

Para automatizarlo:

echo "sudo service docker start" >> ~/.bashrc

Para ver si esta corriendo docker:

sudo service docker status

🎁 Beneficios​

tip

Mucho menos uso de CPU y RAM.

Cero uso de Docker Desktop.

Mejor integración con Linux-based dev tools.