Cómo usar Visual Studio Code para desarrollo remoto a través del complemento Remote-SSH

Introducción

Visual Studio Code es un entorno de desarrollo integrado (IDE) popular para desarrolladores. Su gran selección de complementos, su diseño minimalista y la compatibilidad con diferentes plataformas hacen que sea una excelente opción para desarrolladores de todos los niveles. Este tutorial se centra en el uso del complemento Remote-SSH para habilitar el desarrollo remoto de software. Con este complemento, puede editar archivos en su estación de trabajo local y, a la vez, llevar adelante tareas de desarrollo como la ejecución de programas, pruebas de unidad o análisis estáticos en un servidor remoto.

Hay muchas razones por las cuales esto puede ser beneficioso. Por ejemplo, es posible que tenga una estación de trabajo de Windows y desee realizar desarrollos con Windows, y que su código eventualmente funcione en Linux. Puede necesitar más memoria RAM o potencia de procesamiento que la que tiene su equipo actual, o querer mantener el código fuera de su equipo personal debido a una política empresarial o al deseo de mantener su estación de trabajo libre.

A través de este tutorial, habilitará el complemento Remote-SSH, configurará Visual Studio Code para ejecutar código en el servidor remoto y ejecutará código desde su instalación local de Visual Studio Code en el servidor remoto.

Requisitos previos

Para seguir esta guía, necesitará lo siguiente:

• Un equipo de desarrollo local con Windows, macOSX o Linux. Este tutorial no se aplica a dispositivos Chrome OS.
• Visual Studio Code; puede descargarlo e instalarlo desde el sitio web oficial.
• Un par de claves SSH generadas:
  • Si utiliza macOS o Linux, puede seguir el paso 1 de Cómo configurar claves SSH en Ubuntu 18.04. Los comandos son los mismos. Por lo tanto, no debe tener en cuenta las alusiones exclusivas a Ubuntu 18.04 en el tutorial.
  • Si utiliza Windows, siga el tutorial Cómo crear claves SSH con PuTTY en Windows para crear su clave SSH.
  • Si utiliza DigitalOcean, puede seguir la guía Cómo cargar claves SSH públicas en una cuenta de DigitalOcean.
• Un servidor Ubuntu 18.04 configurado siguiendo la guía de configuración inicial del servidor Ubuntu 18.04, incluyendo un usuario sudo no root y un firewall.

Paso 1: Instalar el complemento Remote-SSH

En el Mercado de extensiones, puede descargar extensiones compatibles y de terceros para diferentes herramientas y lenguajes de programación. Aquí buscará e instalará el complemento Remote-SSH.

En el lado izquierdo del IDE hay una fila vertical de cinco iconos. El icono inferior (diseño de cuatro cuadrados en forma de cuadro, cuyo cuadrado superior derecho está apartado) es el del Mercado de extensiones:

También puede acceder a esta sección pulsando Ctrl+Shift+X. Al abrir esta página, verá los complementos sugeridos para la descarga e instalación.

Una vez que abra el Mercado de extensiones, escriba Remote-SSH en la barra de búsqueda de extensiones. Cuando encuentre el complemento, selecciónelo y luego haga clic en el botón verde Install para instalar la extensión.

La extensión quedará instalada. A continuación, configurará la extensión para poder establecer conexión con su servidor.

Paso 2: Configurar el complemento Remote-SSH y establecer conexión con su servidor

Ahora que instaló el complemento, puede configurarlo para establecer conexión con un servidor. Para hacerlo, necesitará la siguiente información:

• El IP o el nombre de host del servidor.
• El nombre de usuario con el que se conectará.
• La clave privada que usará para autenticar su usuario.

Usará esta información para crear un archivo de configuración de SSH que Visual Studio Code pueda usar para establecer una conexión SSH con el servidor, y así sincronizar archivos y ejecutar código en representación de usted. Creará esta configuración usando Visual Studio Code.

Ahora que instaló el complemento Remote-SSH, verá un pequeño cuadro verde en la esquina inferior izquierda de la interfaz de Visual Studio Code. Si posa el mouse sobre el cuadro, se abrirá un elemento emergente con la leyenda Open a remote window. El botón tiene un signo “mayor que” ligeramente por debajo de un signo “menor que”, ><, como se muestra en la siguiente imagen:

Haga clic en el botón. Se mostrará un cuadro de diálogo en la parte superior central. Seleccione Remote-SSH: Open Configurar File… de la lista:

En el siguiente mensaje, se le preguntará qué archivo de configuración desea abrir. Si usa Windows, verá dos ubicaciones: una en su directorio personal de usuario y otra en el lugar de instalación de SSH. Al configurar el servidor, debe usar el archivo que se encuentra en el directorio de su usuario.

Seleccione el archivo. Su editor abrirá el archivo config. Añada el siguiente código al archivo para definir la conexión con su servidor y sustituya las secciones resaltadas por la información de su servidor:

Host my_remote_server
    HostName your_server_ip_or_hostname
    User sammy
    IdentityFile /location/of/your/private/key

Así es como funciona este archivo de configuración:

• Host: especifica un nombre para su host. Esto le permite usar un nombre o una abreviatura en lugar de la dirección IP o el nombre de host completos cuando establezca conexión con el servidor.
• HostName: nombre de host real del servidor, que es una dirección IP o un nombre de dominio plenamente cualificado.
• User: usuario que desea usar para establecer conexión.
• IdentityFile: ruta a su clave SSH privada. En los sistemas Mac y Linux, la encontrará en su directorio de inicio, en un directorio .ssh oculto que por lo general lleva el nombre id_rsa. Si usa Windows, habrá especificado una ubicación para guardar este archivo cuando lo creó usando putty-gen.

Especifique los valores correspondientes en su archivo y guárdelo.

De esta manera, Visual Studio Code quedará configurado y listo para establecer conexión con su servidor. Haga clic en el botón verde Open a remote window, en la esquina inferior izquierda, y seleccione Remote-SSH: Connect to host…

Una vez que lo haga, todos los servidores disponibles y configurados se mostrarán en el menú desplegable. Seleccione el servidor con el que desea establecer conexión en esta lista.

Si es la primera vez que establece conexión con el servidor desde su equipo, es probable que se muestre un cuadro de diálogo de verificación de la huella digital SSH, como el que aparece en la siguiente imagen:

Esto sirve para verificar que se establezca conexión con el servidor que desea. Puede hacerlo iniciando sesión en su servidor y ejecutando ssh-keygen -l -f /etc/ssh/ssh_host_key.pub para ver la huella digital del servidor. Si esta huella es la misma que la que se muestra en Visual Studio Code, efectivamente estará estableciendo conexión con el servidor que desea. Por lo tanto, podrá hacer clic en Continue.

Visual Studio Code abre una nueva ventana por defecto cuando se realiza una nueva conexión. Se abrirá una ventana nueva con la pantalla de bienvenida. Si la conexión se estableció de forma correcta, verá SSH: your_ip_address_or_hostname en el cuadro verde de la esquina inferior izquierda. Esto significa que Visual Studio Code está conectado y se comunica con su servidor remoto.

Ahora que estableció la conexión, podrá ejecutar comandos y códigos desde su editor.

Paso 3: Ejecutar código en el servidor remoto

Ahora que el complemento Remote-SSH está configurado, es el momento de ejecutar código en su equipo remoto. Abra una ventana de terminal seleccionando Terminal, en la barra de navegación situada en la parte superior de la ventana de Visual Studio, y haciendo clic en New Terminal. También puede abrir una terminal presionando ``CTRL+Shift+```. La terminal que se abre corresponde a su servidor remoto, no a su equipo local.

Cuando se abra la terminal, ejecute el siguiente comando para ver la dirección IP de su servidor y verificar que esté conectado a su servidor remoto:

ip addr

Verá el siguiente resultado en su terminal:

Output
1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1000
    link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00
    inet 127.0.0.1/8 scope host lo
       valid_lft forever preferred_lft forever
    inet6 ::1/128 scope host
       valid_lft forever preferred_lft forever
2: eth0: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc fq_codel state UP group default qlen 1000
    link/ether 16:cb:05:5b:30:f1 brd ff:ff:ff:ff:ff:ff
    inet your_server_ip brd your_broadcast_address scope global eth0
       valid_lft forever preferred_lft forever
    ...

Para probar la capacidad de ejecutar código de forma remota, cree un nuevo archivo de Python denominado hello.py en su editor. Cuando establezca conexión con su servidor remoto, todos los archivos creados a través de Visual Studio Code se guardarán en ese servidor, no en su equipo local.

Añada el siguiente contenido al archivo:

print("Hello Sammy!")

Para ejecutar este programa en su servidor, abra una terminal en Visual Studio Code desde el menú de navegación o mediante la secuencia de teclas CTRL+Shift+` . Debido a que esta sesión de la terminal está conectada a su servidor remoto, debe implementar el siguiente comando en la terminal para ejecutar su programa hello.py:

python3 hello.py

Se mostrará el resultado de su programa.

También puede ejecutar el archivo desde el menú contextual Debug seleccionando Run without Debugging.

Conclusión

De esta manera, habrá configurado Visual Studio Code para realizar tareas de desarrollo en un servidor remoto con SSH. La ejecución remota con un IDE proporciona muchos beneficios. Entre ellos, la capacidad de probar rápidamente la forma en que su código se ejecuta en distintos sistemas operativos y con diferentes especificaciones de hardware. Mientras disponga de una conexión a Internet, podrá conectarse a su servidor y trabajar en su código desde cualquier computadora además de realizar tareas de desarrollo usando un entorno de Linux aun cuando Windows sea su sistema operativo principal.