17-Conexión SSH a Máquina Virtual con Visual Studio Code

Conexión SSH a Máquina Virtual con Visual Studio Code

Introducción

En este tutorial aprenderemos a conectarnos a una máquina virtual o servidor remoto mediante SSH utilizando Visual Studio Code. Esta conexión nos permitirá editar archivos del proyecto Laravel directamente desde el editor, con todas las ventajas de las extensiones y autocompletado.

---

Paso 1: Instalar la Extensión Remote - SSH

1.1 Buscar e instalar la extensión

Desde el mercado de extensiones:

1. Abrir Visual Studio Code

2. Ir a la sección de Extensiones (Ctrl+Shift+X)

3. Buscar: Remote - SSH

4. Seleccionar la extensión de Microsoft (ms-vscode-remote.remote-ssh)

5. Hacer clic en Instalar

Desde terminal:

bash

code --install-extension ms-vscode-remote.remote-ssh

1.2 Verificar instalación

Después de instalar, deberías ver un ícono de Control Remoto (monitor con conexión) en la barra lateral izquierda.

---

Paso 2: Configurar la Conexión SSH

2.1 Abrir la paleta de comandos

bash

# Atajo de teclado
Ctrl+Shift+P

2.2 Agregar un nuevo host SSH

1. En la paleta de comandos, escribir:

   text

   Remote-SSH: Add New SSH Host

2. Presionar Enter

2.3 Ingresar los datos de conexión

Formato del comando SSH:

text

ssh usuario@direccion_ip

Ejemplo:

text

ssh udemy@192.168.1.200

Alternativa con puerto personalizado:

text

ssh -p 2222 udemy@192.168.1.200

2.4 Guardar configuración SSH

Seleccionar dónde guardar la configuración:

1. Opción 1: ~/.ssh/config (recomendado para usuarios avanzados)

2. Opción 2: C:\Users\TU_USUARIO\.ssh\config (Windows)

Resultado en ~/.ssh/config:

text

Host 192.168.1.200
    HostName 192.168.1.200
    User udemy

---

Paso 3: Conectarse al Host Remoto

3.1 Iniciar conexión SSH

1. Abrir paleta de comandos: Ctrl+Shift+P

2. Buscar: Remote-SSH: Connect to Host...

3. Seleccionar el host que acabas de agregar

4. Presionar Enter

3.2 Seleccionar plataforma

Cuando se conecte por primera vez, VS Code preguntará:

text

Select the platform of the remote host

• Seleccionar Linux (para servidores Ubuntu/Debian)

• Seleccionar Windows (para servidores Windows)

• Seleccionar macOS (para servidores macOS)

3.3 Ingresar la contraseña

1. VS Code abrirá una ventana para ingresar la contraseña

2. Escribir la contraseña del usuario SSH

3. Presionar Enter

Nota: Si usas autenticación por llave SSH, no necesitarás contraseña.

---

Paso 4: Configuración Avanzada de SSH (Opcional)

4.1 Crear configuración SSH personalizada

Editar el archivo ~/.ssh/config:

bash

nano ~/.ssh/config

Configuración avanzada:

text

Host laravel-server
    HostName 192.168.1.200
    User udemy
    Port 22
    IdentityFile ~/.ssh/id_rsa
    ForwardAgent yes
    ServerAliveInterval 60
    ServerAliveCountMax 3
    Compression yes

Explicación de opciones:

Opción	Descripción
Host	Alias para el servidor
HostName	Dirección IP o dominio
User	Usuario para la conexión
Port	Puerto SSH (por defecto 22)
IdentityFile	Ruta de la llave privada
ForwardAgent	Reenvío de autenticación
ServerAliveInterval	Keep-alive cada 60 segundos
Compression	Comprimir datos para mayor velocidad

4.2 Conectar usando el alias

Después de configurar, puedes conectarte usando el alias:

1. Ctrl+Shift+P

2. Remote-SSH: Connect to Host...

3. Seleccionar laravel-server

4. Ingresar contraseña

---

Paso 5: Abrir el Proyecto en VS Code

5.1 Abrir la carpeta del proyecto

1. Una vez conectado, VS Code mostrará la ventana remota

2. Hacer clic en Open Folder (Abrir Carpeta)

3. Navegar hasta la ruta del proyecto:

   text

   /home/udemy/laravel

4. Hacer clic en OK

5.2 Ingresar contraseña nuevamente

• VS Code puede solicitar la contraseña nuevamente al abrir la carpeta

• Ingresar la contraseña y presionar Enter

5.3 Verificar archivos del proyecto

En el explorador de archivos deberías ver:

text

LARAVEL
├── .env
├── .gitignore
├── Dockerfile
├── docker-compose.yml
├── app/
├── bootstrap/
├── config/
├── database/
├── public/
├── resources/
├── routes/
├── storage/
├── tests/
└── vendor/

---

Paso 6: Usar la Terminal Integrada

6.1 Abrir terminal remota

bash

# Atajo de teclado
Ctrl+Shift+` (tilde)

O desde el menú:

• Terminal → New Terminal

6.2 Verificar conexión

La terminal mostrará algo como:

text

udemy@192-168-1-200:~/laravel$

6.3 Ejecutar comandos desde la terminal

bash

# Ver contenedores Docker
docker ps

# Ver estado de servicios
docker compose ps

# Ver logs
docker compose logs -f

# Ejecutar comandos Artisan
php artisan route:list
php artisan migrate

---

Paso 7: Cerrar la Conexión SSH

7.1 Método 1: Desde el indicador remoto

1. Hacer clic en el indicador verde en la esquina inferior izquierda:

   text

   SSH: 192.168.1.200

2. Seleccionar: Close Remote Connection

7.2 Método 2: Desde la paleta de comandos

1. Ctrl+Shift+P

2. Buscar: Remote-SSH: Close Remote Connection

7.3 Método 3: Cerrar VS Code

Cerrar completamente Visual Studio Code cortará la conexión SSH.

---

Paso 8: Solución de Problemas Comunes

⚠️ Error: "Host is not reachable"

Causa: La máquina virtual no está encendida o la IP es incorrecta.

Solución:

bash

# Verificar conectividad
ping 192.168.1.200

# Verificar servicio SSH
ssh udemy@192.168.1.200

⚠️ Error: "Permission denied"

Causa: Credenciales incorrectas o usuario no existe.

Solución:

bash

# Verificar usuario y contraseña
# O configurar autenticación por llave SSH

⚠️ Error: "Connection timed out"

Causa: Firewall bloqueando el puerto 22.

Solución:

bash

# Abrir puerto SSH en el servidor
sudo ufw allow 22

# Verificar estado del firewall
sudo ufw status

⚠️ Error: "No such file or directory"

Causa: La carpeta del proyecto no existe en la ruta especificada.

Solución:

bash

# Verificar ruta
ls -la /home/udemy/

# Si no existe, crearla
mkdir -p /home/udemy/laravel

---

Paso 9: Configurar Autenticación por Llave SSH (Recomendado)

9.1 Generar llave SSH en el host local

bash

# En tu computadora local
ssh-keygen -t rsa -b 4096 -C "tu-email@ejemplo.com"

# Seguir las instrucciones (presionar Enter para valores por defecto)

9.2 Copiar la llave pública al servidor

bash

# Método 1: Usando ssh-copy-id
ssh-copy-id udemy@192.168.1.200

# Método 2: Copiar manualmente
cat ~/.ssh/id_rsa.pub | ssh udemy@192.168.1.200 "mkdir -p ~/.ssh && cat >> ~/.ssh/authorized_keys"

9.3 Verificar que funciona

bash

# Conectarse sin contraseña
ssh udemy@192.168.1.200

Nota: Si la conexión automática funciona correctamente, no necesitarás ingresar contraseña al conectarte con VS Code.

---

Paso 10: Comandos Útiles desde la Terminal Remota

10.1 Gestión de servicios

bash

# Ver logs de todos los servicios
docker compose logs -f

# Reconstruir contenedores
docker compose build --no-cache

# Reiniciar servicios
docker compose restart

# Ver estadísticas
docker stats

10.2 Desarrollo con Laravel

bash

# Generar clave de aplicación
php artisan key:generate

# Crear controlador
php artisan make:controller PostController --resource

# Crear modelo y migración
php artisan make:model Post -m

# Ejecutar migraciones
php artisan migrate:fresh

# Ejecutar tests
php artisan test

10.3 Composer

bash

# Instalar dependencias
composer install

# Instalar paquete específico
composer require laravel/sanctum

# Actualizar dependencias
composer update

dd 

Ventajas de Trabajar con SSH + VS Code

Ventaja	Descripción
Edición remota	Editas archivos en el servidor como si fueran locales
Extensiones	Todas las extensiones funcionan en el servidor remoto
Terminal integrada	Ejecutas comandos sin cambiar de ventana
Sin sincronización	No necesitas copiar archivos manualmente
Multiplataforma	Funciona en Windows, macOS y Linux
Seguridad	Conexión encriptada mediante SSH

---

Atajos de Teclado Útiles

Atajo	Acción
Ctrl+Shift+P	Paleta de comandos
Ctrl+Shift+X	Extensiones
`Ctrl+Shift+`` | Abrir terminal |
Ctrl+P	Buscar archivo
Ctrl+Shift+F	Buscar en archivos
Ctrl+Shift+E	Explorador de archivos
Ctrl+Shift+D	Debug

---

¡Felicidades! 🎉 Ahora estás conectado a tu máquina virtual mediante SSH desde Visual Studio Code. Puedes editar archivos, ejecutar comandos y administrar tus contenedores Docker directamente desde el edito