Maximiza tu productividad conectándote a servidores con Visual Studio Code.
Por: Alejandro Parra, Software Engineer Manager en Platzi.
Anteriormente, conectarse a algún servidor vía SSH para administrar su funcionalidad era un conjunto de pasos algo complicados y a través de herramientas sin mucho soporte o falta de interfaz gráfica avanzada como (Putty) o incluso directamente desde tu terminal ejecutando un cliente de SSH para la conexión remota.
¿Para qué hacíamos estas conexiones? Bueno, porque sin importar si el servidor es físico y nuevo, es una instancia nueva en un proveedor de la nube o simplemente un raspberry luego de que se inicia un servidor y sigue la secuencia de pasos necesarios para iniciar el sistema operativo.
Lo que tenemos a continuación es un sistema operativo, en este caso puntual, hablando de alguna distribución de Linux comúnmente usada para levantar servicios de páginas web como NGNIX, Apache, Node.JS, etc. o procesos en específicos como Docker, etc.
Estos servidores comúnmente vienen en limpio y necesitan una configuración detallada para que realicen el objetivo para el que fueron iniciados.
Estas conexiones eran algo tediosas o incluso confusas, porque podías fácilmente obviar un paso tan importante como darle permisos correctos a tu llave de conexión y solo por eso no funcionaba. Adicionalmente, dependiendo del sistema operativo, podías tener diferentes editores de texto, pero el predeterminado por defecto es VIM, el cual puede volverse un desafío si no sabes como salir o incluso guardar los cambios.
En un TLDR; esta imagen resume cómo funciona nuestra conexión desde Visual Studio Code (VS Code)
Entonces, lo primero que debemos hacer es instalar VSCode en nuestro sistema operativo, para esto te invito a ver nuestros cursos enfocados a la configuración de desarrollo:
Ya teniendo el VSCode instalado, necesitamos irnos al apartado de extensiones y buscar la extensión escrita por Microsoft llamada Remote-SSH. También está Remote Development por si quieres expandir las capacidades de tu VSCode para que incluso puedas administrar contenedores desde tu editor.
Este es el pack completo de extensiones que contiene WSL para Windows Dev para Docker y Túneles de red.
Te puede interesar leer sobre Las mejores 15 extensiones de VSCode para frontend.
Para este ejemplo vamos a usar una de las nubes más comunes del mercado, AWS, pero los conceptos y los pasos son agnósticos al resto de nubes en donde puedes iniciar un servidor.
Para cuando tienes un servidor físico “Bare Metal” debes generarle las llaves de conexión manualmente y puedes hacerlo usando este comando:
$ ssh-keygen -t rsa -b 4096 -f ~/.ssh/id_rsa_myserver
En esta oportunidad, vamos a la consola de AWS para iniciar una EC2 nueva (servidor).
Aquí puedes seleccionar el tipo de instancia que deseas y sus recursos necesarios para el propósito que la destines.
Para nuestro ejercicio, es muy importante el segmento de seguridad llamado Key Pair.
Aquí debes hacer clic en crear una nueva KeyPair de tipo RSA con el formato .pem
Es de suma importancia que guardas esta llave (archivo) que te entrega el navegador de una manera muy segura y no la pierdas.
Ahora dentro de VSCode en la parte inferior izquierda tienes un acceso directo a las conexiones remotas con el siguiente icono ><
Cuando haces clic allí, seleccionas Conectar a Host (Remote-SSH).
Aquí vas a seleccionar configurar SSH Host.
Y Visual Studio procede a abrir de manera amigable el archivo de configuración .ssh/config donde tendremos la información del servidor al que nos vamos a conectar. Allí puedes usar este ejemplo y lo agregas al final del archivo.
Host ec2-54-160-238-207.compute-1.amazonaws.com
HostName ec2-54-160-238-207.compute-1.amazonaws.com
IdentityFile "~/.ssh/demo.pem"
User ec2-user
Es de suma importancia que copies la llave que descargaste (archivo .PEM) y lo ubiques en la dirección ~/.ssh/tu_archivo.pem.
Luego de copiar el archivo debes darle permisos de ejecución con el siguiente comando.
$ chmod 400
En el ejemplo planteado debes cambiar el Host por el host entregado por tu proveedor, en este caso es el DNS público de conexión a tu servidor.
Luego de guardar tu archivo de configuración SSH, es hora de la conexión. Para esto haces clic de nuevo en el icono >< y seleccionas el Host (DNS público de tu máquina) que guardaste en el archivo y voilá:
Aquí puedes confirmar en la esquina inferior izquierda que estás conectado de manera remota a tu servidor.
Posiblemente, hayas experimentado el dolor de subir y bajar archivos de tu servidor sin interfaz gráfica. Ahora, con la opción de open Folder puedes gestionar archivos de tu servidor de manera drag and drop (arrastrar archivos) a tu VSCode.
Una parte mindblown es que aquí desbloqueas todos los superpoderes de Visual Studio Code incluyendo Copilot, entonces ahora mira este ejemplo en el que le dices a copilot:
“dame un ejemplo funcional de archivo .conf de Nginx en el que el servidor responde al DNS midominio.com”
Imagina ahora las posibilidades que puedes desbloquear con esta configuración:
Piensa en el tiempo y la facilidad con la que ahora trabajarás en tus servidores vs. el método antiguo.
Te invito a visitar nuestra clase de extensiones y configuraciones de VS code y revisar los cursos:
