⚠️ Importante: Selección de Ruta

Si ya completaste la sección de Docker Build - Local:

• 🛑 DETENTE AQUÍ - No procedas con esta sección de Cloud.
• ✅ En su lugar, haz clic aquí para continuar con Docker Scout.

Esta sección es una ruta de construcción alternativa para quienes no han realizado la construcción local.

Docker Build Cloud: Descripción General

Docker Build Cloud es un potente servicio de construcción remota que acelera la creación de imágenes de contenedor al delegar las operaciones de construcción a la infraestructura en la nube de Docker.

Requisitos de Suscripción

Docker Build Cloud está disponible con:

• Docker Pro ($9/mes)
• Docker Team ($15/usuario/mes)
• Docker Business ($24/usuario/mes)

IMPORTANTE: Si no tienes una suscripción paga, utiliza la guía de Docker Build Local en su lugar.

Para detalles de suscripción, visita Precios de Docker.

Prerrequisitos

• Instalar Docker Desktop: Descargar aquí
• Asegúrate de que Docker Desktop esté ejecutándose.
• Autenticación de Docker Hub completada en la sección anterior.
• Habilitar Docker Build Cloud en Docker Desktop (característica paga).
  • Abre Docker Desktop.
  • Ve a Settings > Features in Development.
  • Habilita Build Cloud.

---

1. Autenticación con GitHub

Autentícate con GitHub usando la 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.
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
    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 para crear una imagen de producción optimizada para una aplicación Node.js servida por Nginx.

Etapa de Construcción

# 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: Imagen base de Node.js 12.
• WORKDIR /app: Directorio de trabajo en el contenedor.
• RUN npm install: Instala las dependencias.
• RUN npm run build: Construye la aplicación.

Etapa de Producción

# 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: Imagen base de Nginx 1.14.
• COPY --from=build ...: Copia los archivos construidos.
• EXPOSE 80: Puerto 80.
• CMD ...: Inicia Nginx.

---

4. Verificar la configuración de Docker Build Cloud

Asegúrate de que Docker Build Cloud esté correctamente configurado:

Verifica que buildx esté disponible:

# Verificar disponibilidad de buildx
docker buildx version

Crea y configura la instancia del constructor:

# Verifica si el constructor existe, si no, créalo
docker buildx ls | grep cloud-builder || docker buildx create --name cloud-builder --use

Inicializa la instancia del constructor:

docker buildx inspect --bootstrap

Deberías ver una salida indicando que tu constructor está usando el driver de Docker Build Cloud:

+] Building 6.7s (1/1) FINISHED
Name:          cloud-builder
Driver:        docker-container
......

5. Construye tu Imagen con Docker Build Cloud

Construye la imagen:

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

Opciones clave:

• --load: Importa la imagen construida al almacén local de Docker.
• -t rent-a-room: Etiqueta la imagen con el nombre "rent-a-room".

6. Verificar tu Imagen

Verifica que tu imagen se haya construido correctamente:

docker images | grep rent-a-room

7. Ejecutar el Contenedor

# Detener y eliminar el contenedor si existe
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

8. Probar la Aplicación

Accede a tu aplicación en VS Code Server a través de la sección PORTS.

9. Explorar la aceleración de la construcción

Realiza un pequeño cambio:

# Pequeño cambio para forzar la reconstrucción
echo "// Small change" >> src/App.js

Luego cronometra la construcción en la nube:

start_time=$(date +%s)
docker buildx build --load -t rent-a-room .
end_time=$(date +%s)
cloud_build_time=$((end_time - start_time))
echo "Construcción en la nube completada en $cloud_build_time segundos"

10. Habilitar Almacenamiento en Caché Remoto

docker buildx build \
  --cache-to type=registry,ref=$DOCKER_USERNAME/rent-a-room-cache \
  --cache-from type=registry,ref=$DOCKER_USERNAME/rent-a-room-cache \
  --load \
  -t rent-a-room .

11. Enviar tu Imagen a Docker Hub

# Etiquetar la imagen
docker tag rent-a-room $DOCKER_USERNAME/rent-a-room:cloud

# Enviar a Docker Hub
docker push $DOCKER_USERNAME/rent-a-room:cloud

12. Detener y Eliminar el Contenedor

docker stop rent-a-room-container
docker rm rent-a-room-container

---

Resumen

• Docker Build Cloud acelera las construcciones al usar ejecución basada en la nube.
• El almacenamiento en caché mejora la eficiencia.
• Ideal para grandes proyectos y flujos de CI/CD.
• 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.