Docker Build Local: Descripción General

Docker Build Local utiliza los recursos de tu máquina para construir imágenes de contenedor. Este es el enfoque tradicional que funciona sin necesidad de ninguna suscripción o servicios en la nube adicionales.

Prerrequisitos

• Docker Engine instalado y ejecutándose.
  • Para Linux: Docker Engine
  • Para Mac/Windows: Docker Desktop (opcional)
• Autenticación de Docker Hub completada en la sección anterior.

Para verificar que Docker esté correctamente instalado y ejecutándose, ejecuta:

docker -v

Si ves información sobre tu versión de Docker sin errores, estás listo para proceder:

Docker version 27.3.1, build ce1223035a

---

Construyendo la Imagen de Docker

1. Autenticación con GitHub

Autentícate con GitHub usando la corregida CLI de GitHub preinstalada:

# Verifica si ya estás autenticado
gh auth status || gh auth login

Si necesitas autenticarte, se te guiará a través de varias preguntas:

1. Selecciona GitHub.com.
2. Selecciona HTTPS como tu protocolo preferido.
3. Cuando se te pregunte "¿Authenticate Git with your GitHub credentials?": Ingresa Y.
4. Selecciona Login with a web browser (Iniciar sesión con un navegador web).
5. Copia el código de un solo uso que se muestra en tu terminal.
6. Presiona Enter para abrir el navegador.
7. Pega el código en GitHub y autoriza el acceso.
8. Regresa a VS Code Server y espera a que se autentique (esto puede tardar hasta 30 segundos o más).

2. Fork y Clonado del Repositorio

En lugar de clonar directamente, primero haremos un fork del repositorio:

# Hacer fork y clonar el repositorio
gh repo fork aws-samples/Rent-A-Room --clone=true

# Cambiar al directorio del repositorio
cd Rent-A-Room

3. Crear los Archivos de Configuración

Primero, creemos el Dockerfile:

cat << 'EOF' > Dockerfile
# Etapa de construcción
FROM node:12 as build
WORKDIR /app
ENV DISABLE_ESLINT_PLUGIN=true
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# Etapa de producción
FROM nginx:1.14
COPY --from=build /app/build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
EOF

Luego, crea el archivo de configuración de Nginx:

cat << 'EOF' > nginx.conf
server {
    listen 80;
    server_name localhost;

    root /usr/share/nginx/html;
    index index.html;

    # Soporte para ruteo de SPA (Single Page Application)
    location / {
        try_files $uri $uri/ /index.html;
        add_header Cache-Control "no-cache";
    }

    # Servir archivos estáticos
    location /static/ {
        expires 1y;
        add_header Cache-Control "public";
    }

    # Manejar todas las solicitudes de API
    location /api/ {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}
EOF

3.1 Configurar para Múltiples Entornos

Crea archivos de entorno para manejar diferentes escenarios de despliegue:

# Crear archivo de entorno de desarrollo:
cat << 'EOF' > .env.development
REACT_APP_API_URL=/proxy/3000
EOF

# Crear archivo de entorno de producción:
cat << 'EOF' > .env.production
REACT_APP_API_URL=/api
EOF

3.2 Actualizar Archivos de Configuración

Actualiza tanto package.json como App.js para manejar diferentes entornos:

# Agregar verificación de entorno antes de la declaración return en App.js
sed -i '/function App() {/a\  const isVSCodeServer = window.location.href.includes('\''cloudfront.net'\'');\n  const basename = isVSCodeServer ? '\''/proxy/3000'\'' : '\''/'\'';' src/App.js

# Actualizar el Router para usar basename
sed -i '/<[Rr]outer>/s/>/\ basename={basename}>/g' src/App.js

# Actualizar package.json para agregar el campo homepage
sed -i '/"private": true,/a\  "homepage": ".",' package.json

---

¿Quieres entender más sobre el Dockerfile?

Este Dockerfile utiliza un proceso de construcción multi-etapa (multi-stage build) para crear una imagen de producción optimizada para una aplicación Node.js servida por Nginx. Desglosémoslo:

Etapa de Construcción (Build Stage)

# Etapa de construcción
FROM node:12 as build
WORKDIR /app
ENV DISABLE_ESLINT_PLUGIN=true
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

• FROM node:12 as build: Comienza con una imagen base de Node.js 12, nombrando a esta etapa "build".
• WORKDIR /app: Establece el directorio de trabajo en el contenedor.
• COPY package*.json ./: Copia package.json y package-lock.json (si existe) al directorio de trabajo.
• RUN npm install: Instala las dependencias de Node.js.
• COPY . .: Copia el resto del código de la aplicación al contenedor.
• RUN npm run build: Construye la aplicación (típicamente creando una carpeta build o dist).

Etapa de Producción (Production Stage)

# Etapa de producción
FROM nginx:1.14
COPY --from=build /app/build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

• FROM nginx:1.14: Inicia una nueva etapa usando la imagen base de Nginx 1.14.
• COPY --from=build /app/build /usr/share/nginx/html: Copia los archivos construidos de la etapa anterior al directorio de servicio de Nginx.
• COPY nginx.conf /etc/nginx/conf.d/default.conf: Copia el archivo de configuración de Nginx.
• EXPOSE 80: Informa a Docker que el contenedor escuchará en el puerto 80.
• CMD ["nginx", "-g", "daemon off;"]: Inicia Nginx en primer plano cuando se ejecuta el contenedor.

---

Visualización del Proceso Multi-Etapa

1. Etapa de Construcción (Node.js)

2. Etapa de Producción (Nginx)

---

4. Construye tu Imagen con Docker

Construye la imagen usando Docker:

# Medir el tiempo de construcción
start_time=$(date +%s)
docker build -t rent-a-room .
end_time=$(date +%s)
echo "Construcción completada en $((end_time - start_time)) segundos"

5. Verificar tu Imagen

Verifica que tu imagen se haya construido correctamente:

docker images | grep rent-a-room

Si se construyó con éxito, verás una salida como esta:

rent-a-room     latest            0b9c31de0251   3 seconds ago    111MB

6. Ejecutar el Contenedor

Inicia un contenedor usando la imagen que construiste:

# Detener y eliminar el contenedor si ya existe, luego crear uno nuevo
docker stop rent-a-room-container 2>/dev/null || true
docker rm rent-a-room-container 2>/dev/null || true
docker run -d -p 3000:80 --name rent-a-room-container rent-a-room

7. Probar la Aplicación

Accede a tu aplicación en VS Code Server yendo a la sección de PORTS, y haz clic en la Forwarded Address.

Así es como se verá la aplicación:

8. Habilitar Almacenamiento en Caché Remoto

Para construcciones más rápidas, especialmente en entornos de CI/CD, usemos tu cuenta de Docker Hub para la caché remota:

# Usar tu nombre de usuario de Docker Hub de la variable de entorno
echo "Usando el nombre de usuario de Docker Hub: $DOCKER_USERNAME"

docker build \
  --cache-from $DOCKER_USERNAME/rent-a-room:latest \
  -t rent-a-room .

9. Enviar tu Imagen a Docker Hub

Ahora que has construido tu imagen localmente, vamos a enviarla a Docker Hub para que puedas compartirla o usarla en otros entornos:

# Etiquetar (tag) la imagen con tu nombre de usuario de Docker Hub
docker tag rent-a-room $DOCKER_USERNAME/rent-a-room:latest

# Enviar la imagen a Docker Hub
docker push $DOCKER_USERNAME/rent-a-room:latest

Verificar la Imagen Etiquetada Localmente

Verifica que tu imagen haya sido etiquetada correctamente:

docker images | grep rent-a-room

Deberías ver tanto tu imagen local como la imagen etiquetada lista para Docker Hub:

$DOCKER_USERNAME/rent-a-room   latest    0b9c31de0251   5 minutes ago   111MB
rent-a-room                    latest    0b9c31de0251   5 minutes ago   111MB

Verificar la Imagen en Docker Hub

Después de enviarla, puedes verificar que tu imagen esté disponible en Docker Hub haciendo clic en este enlace:

echo https://hub.docker.com/r/$DOCKER_USERNAME/rent-a-room

O navegando a Docker Hub en tu navegador y revisando tus repositorios.

10. Detener y Eliminar el Contenedor de la Aplicación

Para detener el contenedor en ejecución:

docker stop rent-a-room-container

Para eliminar el contenedor:

docker rm rent-a-room-container

---

⚠️ Importante: Próximos Pasos

¡Has completado la sección de Docker Build Local!

Para continuar con el workshop:

• 🛑 NO hagas clic en la flecha "Next" (que te llevaría a Docker Build Cloud).
• ✅ En su lugar, haz clic aquí para continuar con Docker Scout.

Esto asegura que sigas la ruta correcta y no dupliques el proceso de construcción.

---

Resumen

• Docker Build Local utiliza los recursos de tu máquina para construir imágenes de contenedor.
• Las construcciones multi-etapa crean imágenes de producción optimizadas.
• El almacenamiento en caché remoto puede mejorar el rendimiento de la construcción incluso para construcciones locales.
• La integración con Docker Hub permite compartir y reutilizar imágenes.
• Enviar a Docker Hub hace que tus imágenes estén disponibles en cualquier lugar.

En la siguiente sección, exploraremos cómo utilizar Docker Scout.