Cómo instalar Code-Server en Saplo (VS Code en el navegador sin instalación)

A veces, ¿codificas desde un ordenador distinto a tu propio portátil, por ejemplo, en la oficina de un cliente o durante un viaje, y cada vez tienes que configurar el editor, las extensiones y el entorno desde cero, o instalar tus claves SSH en equipos ajenos? Code-Server lo resuelve con un solo contenedor Docker en tu Box: el mismo Visual Studio Code, las mismas extensiones y el terminal integrado, accesibles desde una dirección en el navegador en cualquier dispositivo, y el código y el historial de cambios permanecen en un solo lugar en vez de dispersarse entre diferentes ordenadores. En este tutorial, te mostramos cómo configurar Code-Server en Saplo.

Qué es Code-Server y para quién es útil

Code-Server es la imagen oficial de Docker codercom/code-server, es decir, Visual Studio Code reempaquetado para funcionar en un servidor y ser operado a través de un navegador en lugar de una aplicación de escritorio. La interfaz, los atajos de teclado, el marketplace de extensiones y el terminal integrado son idénticos a los de VS Code habitual; la única diferencia es dónde se ejecuta físicamente el proceso del editor. Es ideal para un programador que quiere codificar desde cualquier dispositivo sin configurar el entorno cada vez, para un freelancer que a veces trabaja desde el ordenador de otra persona y no quiere dejar sus claves o el código del cliente en él, y para un equipo que busca un entorno de desarrollo común, siempre activo, en lugar de un IDE de pago en la nube.

Requisitos

Para configurar Code-Server en Saplo, necesitas:

• Un Box con Docker en ejecución (el motor lo activa automáticamente al instalarlo desde el Catálogo de aplicaciones; se requiere anidamiento en el contenedor, que Saplo tiene por defecto).
• Un editor con servidores de lenguaje (LSP) es más pesado que una aplicación web normal, por lo que, de forma realista, se necesita un Box M por 63 € al año.
• Un Dominio o subdominio *.saploapp.pl incluido en el precio de cada plan, donde se alojará el editor.
• NO necesitas una base de datos separada; Code-Server almacena el proyecto y la configuración en dos volúmenes de datos separados.

Puedes encontrar una descripción completa de la aplicación y su ubicación en el Catálogo de aplicaciones en la página de Code-Server en Saplo.

Instalación paso a paso

1. En el panel de Saplo, ve a Catálogo de aplicaciones y selecciona Code-Server.
2. Elige un Box con suficiente RAM y un dominio o subdominio donde se instalará el editor.
3. Confirma la instalación. El motor genera una contraseña de inicio de sesión aleatoria (solo caracteres alfanuméricos, sin caracteres especiales que docker-compose podría interpretar como una sustitución de variable), crea un contenedor a partir de la imagen codercom/code-server con dos volúmenes separados, uno para el directorio de trabajo /home/coder/project y otro para la configuración y las extensiones /home/coder/.local/share/code-server, y espera a que el contenedor se inicie antes de considerar la instalación completa.
4. El terminal y la edición en vivo en el navegador funcionan a través de WebSocket, y el nginx de Box maneja los encabezados Upgrade para cada aplicación del catálogo, por lo que no necesitas activar nada adicionalmente.
5. Los datos de inicio de sesión (solo la contraseña, sin nombre de usuario) se guardan en el archivo CODE-SERVER-SETUP.txt en el directorio de la aplicación.

Primer uso

1. Lee la contraseña del archivo CODE-SERVER-SETUP.txt en el directorio de la aplicación.
2. Ve a la dirección del Dominio en tu navegador e inicia sesión con esa contraseña; el inicio de sesión en Code-Server no requiere nombre de usuario.
3. Trabaja en el directorio /home/coder/project, visible en el editor como la carpeta principal del proyecto. Sube archivos a él a través del terminal incorporado (git clone, scp, wget) o mediante el gestor de archivos en el panel de Saplo.
4. Instala extensiones desde el marketplace igual que en VS Code de escritorio; se guardan en el volumen de configuración y sobrevivirán al reinicio del contenedor.
5. Cerrar la pestaña del navegador no cierra los procesos en el terminal; las tareas largas (build, pruebas, servidor de desarrollo) siguen ejecutándose en el Box hasta el próximo inicio de sesión.

Code-Server en Saplo vs. IDE en la nube

Preguntas frecuentes

¿Tengo que introducir un nombre de usuario al iniciar sesión? No, Code-Server inicia sesión solo con una contraseña, sin nombre de usuario; la encontrarás en el archivo CODE-SERVER-SETUP.txt en el directorio de la aplicación.

¿Puedo cambiar la contraseña de inicio de sesión? Sí, puedes cambiar la variable PASSWORD en el archivo docker-compose.yml en el directorio de la aplicación y reiniciar el contenedor desde el panel.

¿Puedo instalar mis propias extensiones y servidores de idiomas? Sí, el mercado de extensiones funciona igual que en VS Code de escritorio, y las extensiones instaladas van a un volumen de configuración independiente, que no depende del directorio del proyecto.

¿La terminal y la vista previa en vivo requieren configuración adicional? No, WebSocket para la terminal y la edición en vivo funciona de inmediato; el nginx de Box ya tiene los encabezados Upgrade para cada aplicación del Catálogo.

¿Code-Server requiere una base de datos separada? No, el proyecto y la configuración se guardan en los volúmenes de datos del contenedor, sin necesidad de una base de datos MySQL o Postgres separada.

En un solo Box, junto a Code-Server, también puedes instalar otras herramientas de equipo del Catálogo, sin costo adicional por cada aplicación. Las reglas se describen en la página Alojamiento de aplicaciones en Saplo.

Si actualmente pagas mensualmente por un IDE en la nube solo para tener VS Code disponible desde cualquier dispositivo, escríbenos y te ayudaremos a configurar tu propio Code-Server.