Creación de Contenedores Web con Docker y Nginx en VS Code
Contenido del curso
Juan Carlos Herrera Rojas
Sergio Brandon De Lucio Chavero
Cristian Contreras
Cristian Rojas
Jose Emmanuel Chavez Narvaez
Jose Emmanuel Chavez Narvaez
Leo
jaime sanchez
Jorge Andrés Burbano Muñeton
Vedran Hrvoj Tomicic Cantizano
Cristian Contreras
Alejandro Alvarez Rosales
mateo londoño rua
Luis Rodolfo Altuve Cáceres
Jeffrey Smith
Jafet Brito
Joan Alexander Valerio Rodríguez
Gonzalo Tipola
Cristian Rojas
María Teresa Canseco Rodríguez
Bruno Orozco Mejía
Maurehen torres
Ricardo Alvarado
Jorge Antonio López Rodriguez
Luis Alberto Fuentes Lopez
Emilio José Chaparro Barrera
Jesús Ulises Guadarrama Chávez
Simón Pedraza
Libardo Arturo Arroyave Bustos
Boris Vargas Paucara
Definitivamente me vendría bien un curso de HTML xD
xdxddx detalles
Jajajaja gran foto de perfil.
Deberían actualizar este curso y explicar aunque sea rápidamente cada uno de los pasos, de un momento a otros estamos en vscode trabajando dentro de ubuntu, me iré a youtube a buscar algo mas claro.
este curso esta mal estructurado , deberian de empezar con los comandos basicos bajar una imagen , eliminar esa imagen , crear un contenedor a partir de esa imagen e igual eliminar ese contenedor pararlo ponerle un nombre crear redes , asignarle puertos etc...y luego casi al final ver lo del dockerfile y docker compose y volumenes
te recomiendo este
no entendi bien la parte de que tenemos que usar nginx. Por qué lo usamos? para qué lo usamos? hay otras alternativas?
Gracias
quede igual de perdido jajaja
Según entiendo yo: La línea "FROM" es para especificar el Sistema Operativo base que va a utilizar nuestro contenedor. En esta línea podríamos escribir: FROM ubuntu:latest y después escribir las líneas necesarias para instalar ngninx y todo lo que necesitemos para usarlo. Pero en este caso, Amin está configurando una imagen preconstruida del servidor web NginX, que ya tiene un sistema operativo base configurado (Linux). En otras palabras, lo que Amin está haciendo es: en vez de elegir directamente un sistema operativo con FROM ubuntu:latest, está seleccionando la imagen oficial de NGINX, que ya viene empaquetada con todo lo necesario para ejecutar el servidor, incluyendo un sistema operativo mínimo de Linux.
Para crear una imagen de Docker para una aplicación en Node.js, puedes seguir un proceso similar al que se describió en la clase sobre Nginx.
Dockerfile: Crea un archivo llamado Dockerfile en la raíz de tu proyecto Node.js.
Base de imagen: Usa una imagen base de Node.js:
FROM node:latest
Directorio de trabajo: Define un directorio de trabajo en el contenedor:
WORKDIR /usr/src/app
Copiar archivos: Copia el archivo de configuración del paquete y tus archivos de aplicación al contenedor:
COPY package*.json ./ COPY . .
Instalar dependencias: Instala las dependencias necesarias:
RUN npm install
Exponer el puerto: Expón el puerto que tu aplicación usa, por ejemplo, el 3000:
EXPOSE 3000
Comando para iniciar la aplicación: Finalmente, especifica el comando para iniciar tu aplicación:
CMD ["node", "app.js"]
Con esto, puedes construir tu imagen usando el comando docker build -t tu-nombre-de-imagen . y luego correrla con docker run -p 3000:3000 tu-nombre-de-imagen.
Para los que como yo tenían duda de donde sale el comando que usa en la clase en Docker Hub => Nginx la documentación nos dice que es la manera de hacer una implementación simple usando el dockerfile
Este curso no esta bien estructurado, quedan muchos vacíos en la explicación.
Este es el repositorio del curso:
En las ramas va el contenido de la clase correspondiente.
Desglose del Dockerfile: COPY y Rutas
Concepto Core
La instrucción COPY transfiere archivos desde el "Mundo Real" (Tu Host/PC) hacia el "Mundo Virtual" (El sistema de archivos dentro del Contenedor). Se usa para inyectar tu código fuente dentro de una imagen base.
Sintaxis
Dockerfile
# COPY <ruta_origen_mi_pc> <ruta_destino_dentro_contenedor> COPY /sitio /usr/share/nginx/html
Puntos Clave
index.html por defecto de Nginx), COPY los reemplaza con los tuyos.Ojo al Dato: La ruta
/usr/share/nginx/htmlno es un invento aleatorio; es el estándar donde el servidor Nginx busca archivos web. Si usas otro servidor (como Apache), la ruta destino cambiaría (ej./var/www/html).
🛠️ Requisitos Previos
Tener Docker Desktop instalado y abierto en tu computadora.
Tener VS Code instalado.
Instalar la extensión oficial de Docker en VS Code (creada por Microsoft).
🚀 Paso a Paso: Tu Servidor Web en Docker
Paso 1: Preparar tu espacio de trabajo
Crea una carpeta para tu proyecto y ábrela en VS Code. Vamos a crear una estructura básica de archivos. Necesitamos una carpeta para tu página web y un archivo de configuración para Docker.
Estructura del proyecto:
Plaintext
mi-proyecto-nginx/
├── html/
│ └── index.html
└── Dockerfile
Crea una carpeta llamada html.
Dentro de html, crea un archivo index.html y escribe un código simple:
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi Servidor en Docker</title>
<style>
body { font-family: sans-serif; text-align: center; background: #f4f4f9; padding-top: 50px; }
h1 { color: #333; }
p { color: #666; }
</style>
</head>
<body>
<h1>¡Hola desde mi contenedor Docker con Nginx! 🐳</h1>
<p>Este entorno es uniforme, rápido y no depende de mi sistema operativo local.</p>
</body>
</html>
Paso 2: Crear el archivo Dockerfile
El Dockerfile es la "receta de cocina" que le dice a Docker cómo construir tu imagen personalizada.
En la raíz del proyecto (fuera de la carpeta html), crea un archivo llamado exactamente Dockerfile (sin extensión, sin .txt).
Pega las siguientes instrucciones:
Dockerfile
# 1. Usamos la imagen oficial de Nginx basada en Linux Alpine (ultra ligera)
FROM nginx:alpine
# 2. Copiamos el contenido de nuestra carpeta html local al directorio donde Nginx busca los archivos web dentro del contenedor
COPY ./html /usr/share/nginx/html
# 3. Exponemos el puerto 80 (el puerto estándar para tráfico web HTTP)
EXPOSE 80
Paso 3: Construir la Imagen (Build)
Ahora vamos a empaquetar tu receta (Dockerfile) y tu código (index.html) en una Imagen de Docker.
Abre la terminal integrada de VS Code (Ctrl + Ñ o `Ctrl + ``).
Ejecuta el siguiente comando para construir la imagen (no olvides el punto . al final, que significa "busca el Dockerfile en esta carpeta actual"):
Bash
docker build -t mi-web-nginx .
Nota: -t sirve para darle un nombre (tag) a tu imagen, en este caso mi-web-nginx.
Paso 4: Encender el Contenedor (Run)
Ya tienes el contenedor guardado en tu "barco". Ahora vamos a bajarlo con la grúa y ponerlo a funcionar.
Ejecuta el siguiente comando en tu terminal:
Bash
docker run -d -p 8080:80 --name mi-contenedor-web mi-web-nginx
¿Qué significa este comando?
-d (Detached): Corre el contenedor en segundo plano para que puedas seguir usando tu terminal.
-p 8080:80 (Mapeo de puertos): Conecta el puerto 8080 de tu computadora real con el puerto 80 interno del contenedor.
--name mi-contenedor-web: Le da un nombre fácil de recordar a tu contenedor activo.
mi-web-nginx: Es el nombre de la imagen que creamos en el Paso 3.
Paso 5: ¡A probarlo!
Abre tu navegador web favorito e ingresa a la siguiente dirección:
Deberías ver tu página web con el mensaje de Docker y Nginx. ¡Felicidades! Acabas de fragmentar un entorno web completo dentro de tu máquina sin instalar Nginx directamente en tu sistema operativo.
Super emocionado con este curso 🐳
Es muy confuso, salta de un tema a otro, hasta el momento el peor curso que tomé.
De verdad se saltó varios pasos
Cuál es el procedimiento para subir el archivo que está en los recursos y dónde encuentro la vista de view scout que tienen el profe
El comando COPY en un Dockerfile se utiliza para copiar archivos y directorios desde el sistema de archivos local al sistema de archivos de una imagen Docker durante el proceso de construcción. Por ejemplo, puedes copiar archivos HTML o cualquier otro recurso necesario para tu aplicación web desde tu máquina local al contenedor donde se ejecutará la aplicación. Esto permite que tu contenedor tenga acceso a los archivos necesarios para funcionar correctamente, como en el caso de desplegar una aplicación web con Nginx.
donde consigo el documento que tenemos que cambiar en esta clase
Hola Maurehen. Ese archivo no es una descarga externa; es el archivo index.html que tú misma debes crear dentro de una carpeta llamada sitio en tu proyecto de VS Code.
¿Qué contenido le pondrías a ese archivo para que tu tarjeta de presentación refleje quién eres?
Comparto los archivos fuente que puedes personalizar para crear tu sitio web estilo LinkTree, para la práctica de este módulo.
muchas gracias estimado!
pero de donde saco esa terminar? no es la docker desktop, esta confuso esa parte, acaso ya tenia una imagen montada?
Descargar el proyecto de los recursos, se tiene el html y se quiere disponibilizar en un servidor para ser accedido, para eso comunmente se usa nginx, y en dockerhub ya existen imgs con este tipo de servicios. entonces por eso la usa dentro del dockerfile, el dockerfile suele usarse en todo proyecto o aplicación que quieras containerizar y se tiene vacio al inicio y ahi es donde se configura el comportamiento antes de realizar el build que genera el image de toda la aplicación.
La terminal que ves es de VSCode, no es de Docker.
En VSCode vas a crear los archivos y guardarlos para después ejecutarlos en la shell de Linux, o también en VSC con ctrl + ñ puedes abrir ahí mismo la shell.
Donde esta el archivo HTML ?
🚀 Del Dockerfile al Contenedor: Guía Práctica y Clara
Este es el proceso completo de crear un contenedor Docker a partir de un archivo Dockerfile, utilizando como ejemplo un sitio web sencillo en HTML desplegado con Nginx. A continuación, un resumen estructurado y enriquecido de los puntos clave.
🐳 De Dockerfile a Docker Container
El flujo de trabajo es directo pero poderoso:
docker build, este archivo se convierte en una Docker image.docker run, generando un Docker container, que es el servicio o aplicación lista para usarse.👉 Ejemplo: un archivo Dockerfile bien diseñado puede empaquetar un sitio web en HTML, transformarlo en una imagen ligera y desplegarlo como contenedor que se comporta como un “ejecutable”.
💻 Preparación en el Entorno de Desarrollo
Dentro de VS Code:
Dockerfile debe crearse en la raíz del proyecto, sin extensión (Dockerfile, no .docker).Tip visual: VS Code detecta automáticamente el archivo Dockerfile y despliega el ícono de la ballena de Docker, mejorando la experiencia.
📦 Extensiones y Soporte en VS Code
Para optimizar el desarrollo:
🌐 Elección del Servidor Web: Nginx
Al crear una imagen para un sitio web estático, se requiere un servidor web.
Dockerfile, basta con usar:
FROM nginxEsto descarga la última versión estable de Nginx como base para la imagen.
📂 Copiando Archivos al Contenedor
Para servir el HTML dentro del contenedor:
/usr/share/nginx/htmlProceso en el Dockerfile:
COPY para mover el contenido local (/sitio) al directorio destino de Nginx.sitio del proyecto./usr/share/nginx/html.Consejo práctico: anotar la ruta como comentario en el Dockerfile para no olvidarla.
🏗️ Construcción y Despliegue de la Imagen
Una vez listo el Dockerfile:
docker run, desplegando el sitio como un contenedor funcional.Resultado: el HTML local ahora se sirve desde un servidor web Nginx dentro de un contenedor.
📌 Conclusiones y Recomendaciones
Dockerfile.docker pull <nombre-imagen:tag>