Saltar al contenido principal

📋 Ejemplos — Clase 01: Linux + Deploy

Ejemplos listos para copiar y ejecutar en KillerCoda. Cada uno resuelve un caso real.

Ejemplo 1 — Landing page con Nginx​

Una landing page responsive con gradiente, lista para deploy.

apt update && apt install nginx -y

mkdir -p /var/www/landing
/var/www/landing/index.html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Landing Page</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Segoe UI', sans-serif;
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            min-height: 100vh;
        }
        .hero {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            text-align: center;
            padding: 2rem;
        }
        h1 { font-size: 3.5rem; margin-bottom: 1rem; }
        p { font-size: 1.3rem; opacity: 0.85; max-width: 600px; margin-bottom: 2rem; }
        .btn {
            display: inline-block;
            padding: 0.8rem 2.5rem;
            background: rgba(255,255,255,0.2);
            border: 2px solid white;
            border-radius: 50px;
            color: white;
            text-decoration: none;
            font-weight: bold;
            font-size: 1.1rem;
            transition: all 0.3s;
        }
        .btn:hover {
            background: white;
            color: #764ba2;
        }
        .features {
            display: flex;
            gap: 2rem;
            margin-top: 3rem;
            flex-wrap: wrap;
            justify-content: center;
        }
        .feature {
            background: rgba(255,255,255,0.1);
            border-radius: 12px;
            padding: 1.5rem;
            width: 200px;
            text-align: center;
        }
        .feature-icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
        .feature h3 { font-size: 1rem; margin-bottom: 0.3rem; }
        .feature p { font-size: 0.85rem; opacity: 0.7; }
    </style>
</head>
<body>
    <div class="hero">
        <h1>🚀 Mi Proyecto</h1>
        <p>Una landing page desplegada en Linux con Nginx. Hecha desde cero en el DevOps Bootcamp.</p>
        <a href="#" class="btn">Empezar</a>
        <div class="features">
            <div class="feature">
                <div class="feature-icon">⚡</div>
                <h3>Rápido</h3>
                <p>Nginx sirve contenido estático a toda velocidad</p>
            </div>
            <div class="feature">
                <div class="feature-icon">🔒</div>
                <h3>Seguro</h3>
                <p>Linux es el SO más usado en servidores</p>
            </div>
            <div class="feature">
                <div class="feature-icon">🆓</div>
                <h3>Gratis</h3>
                <p>Todo open source, sin costos</p>
            </div>
        </div>
    </div>
</body>
</html>
/etc/nginx/sites-available/landing
server {
    listen 80;
    server_name _;
    root /var/www/landing;
    index index.html;

    # Cache de archivos estáticos
    location ~* \.(css|js|png|jpg|gif|ico|svg)$ {
        expires 30d;
        add_header Cache-Control "public, immutable";
    }

    location / {
        try_files $uri $uri/ =404;
    }
}
rm -f /etc/nginx/sites-enabled/default
ln -sf /etc/nginx/sites-available/landing /etc/nginx/sites-enabled/
chown -R www-data:www-data /var/www/landing
nginx -t && systemctl restart nginx
curl http://localhost

Ejemplo 2 — Página de error 404 personalizada​

Cuando alguien visita una URL que no existe, mostrá algo lindo en vez del error feo de Nginx.

/var/www/landing/404.html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>404 — No encontrado</title>
    <style>
        body {
            font-family: 'Segoe UI', sans-serif;
            background: #0a0e17;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            text-align: center;
        }
        h1 { font-size: 8rem; margin: 0; opacity: 0.15; }
        h2 { font-size: 1.5rem; margin-bottom: 1rem; }
        p { opacity: 0.6; margin-bottom: 2rem; }
        a {
            color: #00ff87;
            text-decoration: none;
            border: 1px solid #00ff87;
            padding: 0.5rem 1.5rem;
            border-radius: 8px;
        }
        a:hover { background: #00ff87; color: #0a0e17; }
    </style>
</head>
<body>
    <div>
        <h1>404</h1>
        <h2>Página no encontrada</h2>
        <p>La URL que buscás no existe en este servidor.</p>
        <a href="/">← Volver al inicio</a>
    </div>
</body>
</html>

Agregá esto a tu config de Nginx:

server {
    # ... tu config existente ...

    error_page 404 /404.html;
    location = /404.html {
        internal;
    }
}
nginx -t && systemctl restart nginx
# Probar: curl http://localhost/pagina-que-no-existe

Ejemplo 3 — Sitio multi-página con navegación​

Un sitio con 3 páginas y navegación entre ellas.

mkdir -p /var/www/multi-pagina
/var/www/multi-pagina/index.html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inicio</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: sans-serif; background: #1a1a2e; color: #eee; }
        nav {
            background: #16213e;
            padding: 1rem 2rem;
            display: flex;
            gap: 1.5rem;
        }
        nav a {
            color: #00d4ff;
            text-decoration: none;
            font-weight: bold;
        }
        nav a:hover { color: #00ff87; }
        .content {
            max-width: 800px;
            margin: 3rem auto;
            padding: 0 2rem;
        }
        h1 { font-size: 2.5rem; margin-bottom: 1rem; }
        p { line-height: 1.8; opacity: 0.8; }
    </style>
</head>
<body>
    <nav>
        <a href="/">🏠 Inicio</a>
        <a href="/about.html">👤 Sobre mí</a>
        <a href="/contacto.html">📧 Contacto</a>
    </nav>
    <div class="content">
        <h1>🏠 Bienvenido</h1>
        <p>Este es un sitio multi-página servido con Nginx. Cada página es un archivo HTML independiente con navegación compartida.</p>
    </div>
</body>
</html>
/var/www/multi-pagina/about.html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Sobre mí</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: sans-serif; background: #1a1a2e; color: #eee; }
        nav { background: #16213e; padding: 1rem 2rem; display: flex; gap: 1.5rem; }
        nav a { color: #00d4ff; text-decoration: none; font-weight: bold; }
        nav a:hover { color: #00ff87; }
        .content { max-width: 800px; margin: 3rem auto; padding: 0 2rem; }
        h1 { font-size: 2.5rem; margin-bottom: 1rem; }
        p { line-height: 1.8; opacity: 0.8; }
    </style>
</head>
<body>
    <nav>
        <a href="/">🏠 Inicio</a>
        <a href="/about.html">👤 Sobre mí</a>
        <a href="/contacto.html">📧 Contacto</a>
    </nav>
    <div class="content">
        <h1>👤 Sobre mí</h1>
        <p>Soy estudiante del DevOps Bootcamp by ROXS. Estoy aprendiendo Linux, servidores web y automatización.</p>
    </div>
</body>
</html>
/var/www/multi-pagina/contacto.html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Contacto</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: sans-serif; background: #1a1a2e; color: #eee; }
        nav { background: #16213e; padding: 1rem 2rem; display: flex; gap: 1.5rem; }
        nav a { color: #00d4ff; text-decoration: none; font-weight: bold; }
        nav a:hover { color: #00ff87; }
        .content { max-width: 800px; margin: 3rem auto; padding: 0 2rem; }
        h1 { font-size: 2.5rem; margin-bottom: 1rem; }
        p { line-height: 1.8; opacity: 0.8; }
    </style>
</head>
<body>
    <nav>
        <a href="/">🏠 Inicio</a>
        <a href="/about.html">👤 Sobre mí</a>
        <a href="/contacto.html">📧 Contacto</a>
    </nav>
    <div class="content">
        <h1>📧 Contacto</h1>
        <p>Podés encontrarme en GitHub, YouTube o en el Discord del bootcamp.</p>
    </div>
</body>
</html>

Ejemplo 4 — Reverse proxy con Nginx​

Nginx como proxy inverso: redirige peticiones a otro servicio (ej: una app en el puerto 3000).

/etc/nginx/sites-available/proxy
server {
    listen 80;
    server_name _;

    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

Para probarlo, simulá un servicio con Python:

# Terminal 1: servidor simple en puerto 3000
apt install python3 -y
echo "<h1>Hola desde el backend (puerto 3000)</h1>" > /tmp/index.html
python3 -m http.server 3000 --directory /tmp &

# Terminal 2: activar proxy
rm -f /etc/nginx/sites-enabled/default
ln -sf /etc/nginx/sites-available/proxy /etc/nginx/sites-enabled/
nginx -t && systemctl restart nginx

# Probar: el puerto 80 redirige al 3000
curl http://localhost
¿Para qué sirve?

En el mundo real, Nginx como reverse proxy se usa para poner una app Node.js, Python o Go detrás de Nginx. Nginx maneja SSL, cache y balanceo de carga.

Ejemplo 5 — Servir múltiples sitios por dominio​

Nginx puede servir sitios diferentes según el dominio (virtual hosts).

/etc/nginx/sites-available/blog
server {
    listen 80;
    server_name blog.local;
    root /var/www/blog;
    index index.html;
    location / { try_files $uri $uri/ =404; }
}
/etc/nginx/sites-available/tienda
server {
    listen 80;
    server_name tienda.local;
    root /var/www/tienda;
    index index.html;
    location / { try_files $uri $uri/ =404; }
}
# Crear sitios
mkdir -p /var/www/blog /var/www/tienda
echo "<h1>📝 Blog</h1>" > /var/www/blog/index.html
echo "<h1>🛒 Tienda</h1>" > /var/www/tienda/index.html

# Activar
ln -sf /etc/nginx/sites-available/blog /etc/nginx/sites-enabled/
ln -sf /etc/nginx/sites-available/tienda /etc/nginx/sites-enabled/
nginx -t && systemctl restart nginx

# Simular dominios (agregar al /etc/hosts)
echo "127.0.0.1 blog.local tienda.local" >> /etc/hosts

# Probar
curl -H "Host: blog.local" http://localhost
curl -H "Host: tienda.local" http://localhost

Ejemplo 6 — Cheat sheet de comandos Linux​

Referencia rápida para tener a mano.

# ═══ NAVEGACIÓN ═══
pwd                          # Dónde estoy
ls -la                       # Listar todo (permisos, ocultos)
cd /ruta                     # Ir a ruta
cd ..                        # Subir un nivel
cd ~                         # Ir al home
tree -L 2                    # Árbol de directorios (2 niveles)

# ═══ ARCHIVOS ═══
touch archivo.txt            # Crear vacío
mkdir -p ruta/sub/carpeta    # Crear carpetas anidadas
cp -r origen destino         # Copiar recursivo
mv viejo nuevo               # Mover / renombrar
rm -rf carpeta               # Borrar todo (¡cuidado!)
cat archivo                  # Ver contenido
head -20 archivo             # Primeras 20 líneas
tail -20 archivo             # Últimas 20 líneas
tail -f /var/log/syslog      # Ver en tiempo real

# ═══ BÚSQUEDA ═══
find / -name "*.html"        # Buscar archivos por nombre
grep -r "texto" /var/www/    # Buscar texto en archivos
which nginx                  # Dónde está un programa

# ═══ PERMISOS ═══
chmod 755 carpeta            # rwxr-xr-x
chmod 644 archivo            # rw-r--r--
chown -R www-data:www-data /var/www/

# ═══ SERVICIOS ═══
systemctl start nginx        # Iniciar
systemctl stop nginx         # Detener
systemctl restart nginx      # Reiniciar
systemctl status nginx       # Estado
systemctl enable nginx       # Auto-inicio

# ═══ RED ═══
curl http://localhost        # Petición HTTP
curl -I http://localhost     # Solo headers
ss -tlnp                    # Puertos abiertos
ip addr show                 # Ver IPs

# ═══ SISTEMA ═══
df -h                        # Espacio en disco
free -h                      # Memoria RAM
top                          # Procesos (q para salir)
ps aux                       # Lista de procesos
kill PID                     # Matar proceso

🔗 Recursos​