¿Alguna vez ha perdido un día intentando levantar un stack local de WordPress que luego se comporta distinto al servidor de producción? XAMPP, Docker, máquinas virtuales: cada opción falla en el peor momento. La versión de PHP no es la correcta, falta una extensión o el cliente abre una página y ve una pantalla blanca que usted nunca encontró en local.

Visual Studio Code puede conectarse a un servidor remoto por SSH con la misma facilidad con la que abre una carpeta en su portátil. Sin magia: su código va directo a una instancia de Amazon EC2 donde ya está funcionando un servidor web completo con WordPress.

A continuación encontrará una guía paso a paso para configurar VS Code + AWS EC2 para el desarrollo de plugins y temas de WordPress. Desde la creación de un usuario Linux hasta guardar su espacio de trabajo, sin vacíos y con la explicación de cada paso.

💡 Resumen rápido:

• Crear un usuario sudo en un servidor Ubuntu y configurar las claves SSH
• Preparar su equipo Windows cliente: OpenSSH, archivo de configuración y clave privada
• Conectar VS Code al servidor mediante Remote-SSH y abrir su carpeta de WordPress
• Guardar el espacio de trabajo para acceder rápidamente a su proyecto

Requisitos previos

Antes de configurar el desarrollo remoto, asegúrese de que el lado del servidor esté listo. Asumo que usted está en Windows 10 o posterior y está empezando a aprender sobre infraestructura en la nube. Salte los pasos que ya haya completado.

Instancia Amazon EC2 con Ubuntu y OpenLiteSpeed

Usamos una Amazon Machine Image basada en Ubuntu con el servidor web OpenLiteSpeed y un stack LAMP completo optimizado para WordPress. Si todavía no ha configurado el servidor, los requisitos mínimos son Ubuntu 20.04 o 22.04 LTS y al menos 2 GB de RAM. Con menos de 2 GB, composer y wp-cli fallarán por errores de falta de memoria en proyectos de tamaño medio.

Usuario Linux con sudo

El acceso root es innecesario y peligroso para el trabajo diario. Cree un usuario normal con privilegios sudo. DigitalOcean explica el proceso en su guía. En resumen, dos comandos desde root o con el prefijo sudo:

1
adduser example

Introduzca la contraseña dos veces; para el resto de preguntas puede simplemente pulsar Enter. Luego añada el usuario al grupo sudo:

1
usermod -aG sudo example

Par de claves SSH

El acceso SSH se basa en un par de claves. La clave privada (un archivo sin extensión o .pem) se guarda en su máquina Windows. La clave pública (un archivo .pub) se coloca en el servidor, en la lista de claves autorizadas. Generemos un par directamente en el servidor:

1
su - example
2
mkdir .ssh
3
chmod 700 .ssh
4
touch .ssh/authorized_keys
5
chmod 600 .ssh/authorized_keys
6
ssh-keygen

Cuando ssh-keygen le pida datos, pulse Enter tres veces (deje la frase de contraseña vacía; en nuestro escenario no es necesaria). Ahora añada la clave pública a la lista de autorizadas y muestre la clave privada en pantalla:

1
cat .ssh/id_rsa.pub >> .ssh/authorized_keys
2
cat .ssh/id_rsa

Verá un bloque como este:

1
-----BEGIN RSA PRIVATE KEY-----
2
...
3
-----END RSA PRIVATE KEY-----

Copie todo el contenido (incluidas las líneas delimitadoras) y guárdelo en un archivo de texto en su equipo. La ruta podría verse así:

1
C:\Users\Example\.ssh\aws-example-user.pem

El nombre del archivo es arbitrario. Cree la carpeta .ssh dentro de su perfil de Windows, en la misma ubicación que el archivo de configuración del siguiente paso.

Archivo de configuración SSH para Visual Studio Code

VS Code lee los parámetros de conexión del archivo de configuración SSH estándar. Cree un archivo de texto llamado config sin extensión en la carpeta C:\Users\Example\.ssh\ con el siguiente contenido (para más detalles sobre el formato, consulte man ssh_config):

1
Host aws-ec2
2
    HostName your-server-ip-or-domain.com
3
    User example
4
    IdentityFile C:\Users\Example\.ssh\aws-example-user.pem

Explicación de las directivas:

• Host: un nombre arbitrario que se muestra en VS Code (título de la ventana e indicador de conexión en la esquina inferior izquierda);
• HostName: la dirección IP o el dominio de su instancia EC2;
• User: el nombre de usuario de Ubuntu creado anteriormente;
• IdentityFile: la ruta absoluta a la clave privada en su equipo Windows.

Cliente OpenSSH en Windows

Windows 10 y 11 incluyen un cliente SSH integrado, pero puede estar desactivado de forma predeterminada. Abra Configuración → Aplicaciones → Características opcionales → Agregar una característica. Busque OpenSSH Client en la lista y haga clic en Instalar.

Visual Studio Code y la extensión Remote Development

Descargue VS Code: puede elegir la versión estable (icono azul) o la edición Insiders (icono verde, actualizaciones más frecuentes). No hay diferencia para el desarrollo remoto.

Inmediatamente después de la instalación, agregue el paquete de extensión Remote Development de Microsoft. El paquete incluye tres extensiones. Dos de ellas (Remote, Containers y WSL) pueden desactivarse; no son necesarias para nuestra tarea. Conserve solo Remote, SSH.

Configuración del desarrollo remoto

Conexión al servidor

• Presione F1 o haga clic en el botón naranja oscuro en la esquina inferior izquierda de la ventana.
• Empiece a escribir Remote-SSH; aparecerá la sugerencia de autocompletado Remote-SSH: Connect to Host…. Selecciónela y presione Enter.
• De la lista desplegable, elija el nombre especificado en la directiva Host de su archivo de configuración, por ejemplo, SSH: aws-ec2. VS Code obtiene la lista de hosts directamente de su archivo config.
• Listo, ya está conectado. Se abrirá una nueva ventana; puede cerrar la anterior.

La conexión es rápida y el editor se siente ágil porque solo se envían por la red las diferencias de los archivos, no toda la interfaz de usuario.

Crear un espacio de trabajo

• Abra Archivo → Abrir carpeta… (o presione Ctrl+K, luego Ctrl+O; presiónelos secuencialmente, no de forma simultánea).
• En el explorador de archivos que aparece, navegue hasta la raíz de WordPress, por ejemplo, /var/www/example.com/. Puede pegar la ruta manualmente y hacer clic en Aceptar.

Todos los archivos de WordPress aparecerán en el panel del Explorador a la izquierda. Para añadir otras carpetas del servidor al espacio de trabajo (por ejemplo, el directorio de otro plugin o tema), use Archivo → Agregar carpeta al área de trabajo….

Ahora guarde esta vista como un espacio de trabajo para poder volver al proyecto con un solo clic:

• Presione F1, empiece a escribir save work y seleccione Áreas de trabajo: Guardar área de trabajo como….
• Guarde el archivo con el nombre wp.code-workspace en una ubicación conveniente del servidor (la extensión .code-workspace se añadirá automáticamente).
• Cierre y vuelva a abrir VS Code; el espacio de trabajo aparecerá en Archivo → Recientes o se cargará automáticamente si fue el último abierto.

Para alternar entre varios espacios de trabajo, use F1 → open work → seleccione de la lista.

Enlace simbólico (opcional)

Si está desarrollando un plugin específico, resulta conveniente colocar sus archivos fuente en el directorio personal del usuario y crear un enlace simbólico hacia WordPress:

1
ln -s /home/example/wp /var/www/dev.example.com/wp-content/plugins/my-plugin

La ruta izquierda es la carpeta real del proyecto; la ruta derecha es el enlace simbólico dentro de wp-content/plugins. Esto aísla el código del plugin del núcleo de WordPress y simplifica el control de versiones.

⁉️🤔 Preguntas frecuentes

¿Tengo que usar Amazon EC2 o funciona otro VPS?

Cualquier servidor con Ubuntu y acceso SSH funciona. DigitalOcean, Linode, Vultr, Hetzner: el proceso de configuración es idéntico. El único requisito son al menos 2 GB de RAM para un desarrollo cómodo de WordPress con depuración. Este enfoque no funciona en hosting compartido; necesita acceso root o sudo. VS Code Remote SSH no está vinculado a un proveedor de nube específico: puede conectarse a cualquier máquina que ejecute sshd, incluso una Raspberry Pi en su red local. La única diferencia es la latencia; cuanto más cerca esté el centro de datos, más ágil será el editor.

¿Tengo que pagar por el tráfico al trabajar a través de VS Code Remote SSH?

El tráfico es mínimo. VS Code solo envía cambios de archivos y comandos de terminal por SSH; no se transmiten píxeles de la interfaz ni binarios de extensiones de ida y vuelta. Un día típico de desarrollo se mantiene dentro de decenas de megabytes. Las extensiones (incluida Remote-SSH) se instalan en el servidor una vez durante la primera conexión, lo que supone unos cientos de megabytes como coste único. Si tiene un límite de tráfico estricto, desactive las actualizaciones automáticas de extensiones en el host remoto mediante F1 → Preferences: Configure Runtime Arguments y añada "remote.extensionDownloader.enabled": false. Pero para la gran mayoría de usuarios, esto es innecesario.

¿Puedo trabajar desde un servidor remoto en una tableta o teléfono?

Técnicamente sí, a través de VS Code for the Web en un navegador, pero con limitaciones. La versión de navegador no admite Remote SSH directamente. Una solución alternativa: configure VS Code Server en la instancia (un producto independiente, no lo confunda con Remote SSH) y conéctese desde su navegador. Para una tableta con teclado, es un escenario viable; para un teléfono, es más una curiosidad. Una opción más práctica es llevar un portátil ligero o Chromebook con subsistema Linux: toda la carga computacional permanece en el servidor y el cliente usa recursos mínimos.

¿Qué debo hacer si la conexión se cae durante largos períodos de inactividad?

Configure keepalive en su configuración SSH. Añada dos líneas a la sección de su host en el archivo C:\Users\Example\.ssh\config: ServerAliveInterval 60 y ServerAliveCountMax 5. El cliente enviará un paquete keepalive cada 60 segundos y mantendrá la conexión a través de hasta cinco paquetes perdidos consecutivos, de modo que la conexión puede sobrevivir hasta 5 minutos de silencio total de red. Una alternativa: ejecute tmux o screen en el servidor para procesos de larga duración y así evitar perder la sesión de terminal si la conexión se cae.

¿Es seguro almacenar una clave privada en texto plano en una máquina Windows?

Un archivo .pem sin frase de contraseña es, sí, una cadena de texto plano que cualquiera con acceso a su cuenta de Windows puede leer. Medidas de protección en orden creciente de seguridad: (1) establezca una frase de contraseña al crear la clave (ssh-keygen se lo preguntará; no pulse Enter, introduzca una frase de contraseña); (2) almacene la clave en una partición cifrada (BitLocker está activado por defecto en Windows 11 Pro); (3) para entornos de producción, use un agente SSH con una clave hardware (YubiKey). Para un entorno de desarrollo, una opción de compromiso es una clave con frase de contraseña: VS Code la recordará durante la sesión, solo necesitará introducirla una vez al día, pero la clave se vuelve inútil sin la frase de contraseña, incluso si el archivo se filtra.

Qué elegir para el trabajo diario: Remote SSH o un stack local

Remote SSH a través de VS Code no es una solución milagrosa. Si está escribiendo un plugin que solo necesita wp-cli y pruebas unitarias, una configuración local con Docker y wordpress-develop compilará en un minuto y no requiere acceso a internet. Pero si está depurando la integración con una API externa, probando compatibilidad entre navegadores o mostrando avances a un cliente, un servidor remoto con un entorno de producción gana.

Para un enfoque combinado, mantenga una instancia EC2 de desarrollo funcionando continuamente (una t3.small reservada tiene un precio razonable) y conéctese en cualquier momento desde cualquier lugar. El código reside en el servidor, las copias de seguridad automáticas están activadas y usted no está atado a una máquina específica. Pruébelo: después de una semana de desarrollo remoto, no querrá volver a XAMPP.