One place for hosting & domains

      IDE

      Cómo configurar la plataforma de IDE en la nube de code-server en Ubuntu 20.04


      El autor seleccionó la Free and Open Source Fund para recibir una donación como parte del programa Write for DOnations.

      Introducción

      Con el traslado de las herramientas de desarrollo a la nube, la creación y la adopción de plataformas de IDE (entorno de desarrollo integrado) en la nube se encuentra en expansión. Los IDE en la nube permiten la colaboración en tiempo real entre los equipos de desarrolladores para trabajar en un entorno de desarrollo unificado, lo cual minimiza las incompatibilidades y mejora la productividad. Los IDE en la nube, a los que se puede acceder a través de los navegadores web, se encuentran disponibles en cualquier tipo de dispositivo moderno.

      code-server es Microsoft Visual Studio Code en ejecución en un servidor remoto, y usted puede acceder a él de forma directa desde su navegador. Visual Studio Code es un editor de código moderno con soporte de Git integrado, un depurador de código, autocompletado inteligente y características personalizables y extensibles. Esto significa que puede usar varios dispositivos con diferentes sistemas operativos y tener siempre a mano un entorno de desarrollo uniforme.

      En este tutorial, configurará la plataforma de IDE en la nube de code-server en su máquina con Ubuntu 20.04 y la mostrará en su dominio, con protección de certificados TLS de Let´s Encrypt. Al final, contará con código de Microsoft Visual Studio en su servidor de Ubuntu 20.04 disponible en su dominio y protegido con contraseña.

      Requisitos previos

      • Un servidor con Ubuntu 20.04 con al menos 2 GB de RAM, acceso root y una cuenta sudo no root. Puede configurarlo siguiendo esta guía de configuración inicial para servidores.

      • Nginx instalado en su servidor. Para obtener una guía sobre cómo hacer esto, complete los pasos 1 a 4 de Cómo instalar Nginx en Ubuntu 20.04.

      • Un nombre de dominio registrado por completo para alojar code-server, apuntando a su servidor. En este tutorial, se utilizará code-server.your-domain​​​ en todo momento. Puede adquirir un nombre de dominio en Namecheap, obtener uno gratuito en Freenom o utilizar un registrador de dominios de su elección. Para DigitalOcean, puede seguir esta introducción al DNS de DigitalOcean para obtener más información sobre cómo añadirlos.

      Paso 1: Instalar code-server

      En esta sección, configurará code-server en su servidor. Esto implica descargar la versión más reciente y crear un servicio systemd que mantendrá code-server siempre en ejecución en segundo plano. También especificará una política para reiniciar el servicio, de modo que code-server se mantenga disponible después de posibles errores o reinicios.

      Almacenará todos los datos relacionados con code-server en una carpeta llamada ~/code-server. Para crearla, ejecute el siguiente comando:

      Diríjase a este:

      Deberá dirigirse a la página de versiones de Github de code-server y elegir la última compilación de Linux (el archivo contendrá “linux” en su nombre). En el momento en que se redactó el presente artículo, la última versión fue la 3.3.1. Descárguela con wget ejecutando el siguiente comando:

      • wget https://github.com/cdr/code-server/releases/download/v3.3.1/code-server-3.3.1-linux-amd64.tar.gz

      Luego, desempaquete el archivo ejecutando lo siguiente:

      • tar -xzvf code-server-3.3.1-linux-amd64.tar.gz

      Como resultado, verá una carpeta que tendrá exactamente el nombre del archivo original que descargó, que contiene código de origen de code-server. Cópielo a /usr/lib/code-server para poder acceder a este en todo el sistema con el siguiente comando:

      • sudo cp -r code-server-3.3.1-linux-amd64 /usr/lib/code-server

      A continuación, cree un enlace simbólico en /usr/bin/code-server, apuntando al ejecutable de code-server:

      • sudo ln -s /usr/lib/code-server/bin/code-server /usr/bin/code-server

      A continuación, cree una carpeta para code-server en la que almacenará datos del usuario:

      • sudo mkdir /var/lib/code-server

      Ahora que descargó code-server e hizo que estuviera disponible en todo el sistema, creará un servicio systemd para que code-server esté en ejecución en todo momento.

      Almacenará la configuración de servicio en un archivo llamado code-server.service, en el directorio /lib/systemd/system donde systemd almacena sus servicios. Créelo usando su editor de texto:

      • sudo nano /lib/systemd/system/code-server.service

      Añada las siguientes líneas:

      /lib/systemd/system/code-server.service

      [Unit]
      Description=code-server
      After=nginx.service
      
      [Service]
      Type=simple
      Environment=PASSWORD=your_password
      ExecStart=/usr/bin/code-server --bind-addr 127.0.0.1:8080 --user-data-dir /var/lib/code-server --auth password
      Restart=always
      
      [Install]
      WantedBy=multi-user.target
      

      Aquí primero especifica la descripción del servicio. Luego, indica que el servicio nginx debe iniciarse antes de este. Después de la sección [Unit], se define el tipo del servicio (simple significa que el proceso debe ser simplemente run) y se proporciona el comando que se ejecutará.

      También se especifica que el ejecutable de code-server global debe iniciarse con algunos argumentos específicos para code-server. --bind-addr 127.0.0.1:8080 lo vincula a localhost en el puerto por lo que solo es accesible directamente desde el interior de su servidor. --user-data-dir /var/lib/code-server establece su directorio de datos de usuario y --auth password especifica que debe autenticar los visitantes con una contraseña, especificada en la variable de entorno PASSWORD declarada en la línea anterior.

      Recuerde sustituir your_password por la contraseña que desee, y luego guarde y cierre el archivo.

      La siguiente línea indica a systemd que reinicie el code-server en todos los eventos de fallas (por ejemplo, cuando se bloquea o se ​​finaliza el proceso). La sección [Install] ordena a systemd iniciar este servicio cuando se pueda iniciar sesión en su servidor.

      Inicie el servicio code-server ejecutando el siguiente comando:

      • sudo systemctl start code-server

      Compruebe que se haya iniciado correctamente observando su estado:

      • sudo systemctl status code-server

      Verá un resultado similar a lo siguiente:

      Output

      ● code-server.service - code-server Loaded: loaded (/lib/systemd/system/code-server.service; disabled; vendor preset: enabled) Active: active (running) since Wed 2020-05-20 13:03:40 UTC; 12s ago Main PID: 14985 (node) Tasks: 18 (limit: 2345) Memory: 26.1M CGroup: /system.slice/code-server.service ├─14985 /usr/lib/code-server/bin/../lib/node /usr/lib/code-server/bin/.. --bind-addr 127.0.0.1:8080 --user-data-dir /var/lib/code-server --auth> └─15010 /usr/lib/code-server/lib/node /usr/lib/code-server --bind-addr 127.0.0.1:8080 --user-data-dir /var/lib/code-server --auth password May 20 13:03:40 code-server-update-2004 systemd[1]: Started code-server. May 20 13:03:40 code-server-update-2004 code-server[15010]: info Wrote default config file to ~/.config/code-server/config.yaml May 20 13:03:40 code-server-update-2004 code-server[15010]: info Using config file ~/.config/code-server/config.yaml May 20 13:03:40 code-server-update-2004 code-server[15010]: info Using user-data-dir /var/lib/code-server May 20 13:03:40 code-server-update-2004 code-server[15010]: info code-server 3.3.1 6f1309795e1cb930edba68cdc7c3dcaa01da0ab3 May 20 13:03:40 code-server-update-2004 code-server[15010]: info HTTP server listening on http://127.0.0.1:8080 May 20 13:03:40 code-server-update-2004 code-server[15010]: info - Using password from $PASSWORD May 20 13:03:40 code-server-update-2004 code-server[15010]: info - To disable use `--auth none` May 20 13:03:40 code-server-update-2004 code-server[15010]: info - Not serving HTTPS

      Para hacer que code-server se inicie de forma automática después de un reinicio del servidor, habilite su servicio ejecutando el siguiente comando:

      • sudo systemctl enable code-server

      Durante este paso, descargó code-server e hizo que estuviera disponible a nivel global. Luego, creó un servicio systemd para este y lo habilitó, por lo que code-server se iniciará en cada arranque del servidor. A continuación, lo expondrá en su dominio configurando Nginx para que sirva como proxy inverso entre el visitante y code-server.

      Paso 2: Exponer code-server en su dominio

      En esta sección, configurará Nginx como un proxy inverso para code-server.

      Como aprendió en el paso del requisito previo de Nginx, los archivos de configuración de su sitio se almacenan en /etc/nginx/sites-available y deben tener un enlace simbólico con /etc/nginx/sites-enabled para estar activos.

      Almacenará la configuración para exponer code-server en su dominio en un archivo llamado code-server.conf, en /etc/nginx/sites-available. Comience por crearlo usando su editor:

      • sudo nano /etc/nginx/sites-available/code-server.conf

      Añada las siguientes líneas:

      /etc/nginx/sites-available/code-server.conf

      server {
          listen 80;
          listen [::]:80;
      
          server_name code-server.your-domain;
      
          location / {
            proxy_pass http://localhost:8080/;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection upgrade;
            proxy_set_header Accept-Encoding gzip;
          }
      }
      

      Sustituya code-server.your_domain por el dominio que desee; luego guarde y cierre el archivo.

      En este archivo, se define que Nginx debe escuchar el puerto HTTP 80. Luego, especifica un server_name que indica a Nginx el domino para el que acepta solicitudes y aplica esta configuración en particular. En el siguiente bloque, para la ubicación root (/), especifica que las solicitudes deben pasar hacia atrás y adelante de code-server en el localhost:8080. Las siguientes tres líneas (se inician con proxy_set_header) ordenan a Nginx transmitir algunos encabezados de solicitud HTTP que se necesitan para que funcione correctamente webSockets, que code-server utiliza ampliamente.

      Para que la configuración de este sitio esté activa, deberá crear un enlace simbólico de este en la carpeta /etc/nginx/sites-enabled ejecutando lo siguiente:

      • sudo ln -s /etc/nginx/sites-available/code-server.conf /etc/nginx/sites-enabled/code-server.conf

      Para probar la validez de la configuración, ejecute el siguiente comando:

      Verá el siguiente resultado:

      Output

      nginx: the configuration file /etc/nginx/nginx.conf syntax is ok nginx: configuration file /etc/nginx/nginx.conf test is successful

      Para que la configuración tenga efecto, deberá reiniciar Nginx:

      • sudo systemctl restart nginx

      Ahora, tendrá acceso a la instalación de su code-server en su dominio. En el siguiente paso, lo protegerá aplicando un certificado TLS gratuito de Let´s Encrypt.

      Paso 3: Proteger su dominio

      En esta sección, protegerá su dominio usando un certificado TLS de Let´s Encrypt que proporcionará usando Certbot.

      Para instalar la última versión de Certbot y su complemento de Nginx, ejecute el siguiente comando:

      • sudo apt install certbot python3-certbot-nginx

      Como parte de los requisitos previos, habilitó ufw (Uncomplicated Firewall) y lo configuró para que permitiera el tráfico de HTTP no cifrado. Para poder acceder al sitio seguro, deberá configurarlo de manera tal que acepte el tráfico cifrado ejecutando el siguiente comando:

      El resultado será lo siguiente:

      Output

      Rule added Rule added (v6)

      Casi al igual que en el caso de Nginx, tendrá que volver a cargarlo para que la configuración tenga efecto:

      El resultado mostrará lo siguiente:

      Output

      Firewall reloaded

      Luego, en su navegador, diríjase al dominio que utilizó para code-server. Verá la solicitud de inicio de sesión de code-server.

      Solicitud de inicio de sesión para code-server

      code-server le solicita su contraseña. Introduzca la que estableció en el paso anterior y presione Enter IDE. Ingresará a code-server y de inmediato verá la GUI de su editor.

      GUI de code-server

      Ahora que verificó que code-server se exponga correctamente en su dominio, instalará certificados TLS de Let´s Encrypt para protegerlo, usando Certbot.

      Para solicitar certificados para su dominio, ejecute el siguiente comando:

      • sudo certbot --nginx -d code-server.your-domain

      En este comando, ejecute certbot para solicitar certificados para su dominio; pasará el nombre de dominio con el parámetro -d. El indicador --nginx le solicita cambiar automáticamente la configuración del sitio de Nginx para que admita HTTPS. Recuerde sustituir code-server.your-domain por su nombre de dominio.

      Si es la primera vez que ejecuta Certbot, se le solicitará proporcionar una dirección de correo electrónico para notificaciones urgentes y aceptar los Términos de servicio del FEP. Luego, Certbot solicitará certificados para su dominio desde Let´s Encrypt. Después, le preguntará si desea redireccionar todo el tráfico HTTP a HTTPS:

      Output

      Please choose whether or not to redirect HTTP traffic to HTTPS, removing HTTP access. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 1: No redirect - Make no further changes to the webserver configuration. 2: Redirect - Make all requests redirect to secure HTTPS access. Choose this for new sites, or if you're confident your site works on HTTPS. You can undo this change by editing your web server's configuration. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Select the appropriate number [1-2] then [enter] (press 'c' to cancel):

      Se recomienda seleccionar la segunda opción para maximizar la seguridad. Después de ingresar su selección, presione ENTER.

      El resultado tendrá un aspecto similar a este:

      Output

      IMPORTANT NOTES: - Congratulations! Your certificate and chain have been saved at: /etc/letsencrypt/live/code-server.your-domain/fullchain.pem Your key file has been saved at: /etc/letsencrypt/live/code-server.your-domain/privkey.pem Your cert will expire on ... To obtain a new or tweaked version of this certificate in the future, simply run certbot again with the "certonly" option. To non-interactively renew *all* of your certificates, run "certbot renew" - Your account credentials have been saved in your Certbot configuration directory at /etc/letsencrypt. You should make a secure backup of this folder now. This configuration directory will also contain certificates and private keys obtained by Certbot so making regular backups of this folder is ideal. - If you like Certbot, please consider supporting our work by: Donating to ISRG / Let's Encrypt: https://letsencrypt.org/donate Donating to EFF: https://eff.org/donate-le

      Esto significa que Certbot generó certificados TLS y los aplicó a la configuración de Nginx para su dominio con éxito. Ahora, podrá volver a cargar su dominio de code-server en su navegador y observar un candado a la izquierda de la dirección del sitio, lo cual significa que su conexión es segura.

      Ahora que tiene acceso a code-server en su dominio a través de un proxy inverso de Nginx seguro, estará listo para revisar la interfaz de usuario de code-server.

      Paso 4: Usar la interfaz code-server

      En esta sección, usará algunas de las características de la interfaz de code-server. Debido a que code-server es Visual Studio Code en ejecución en la nube, tiene la misma interfaz que la edición de escritorio independiente.

      En el lado izquierdo del IDE, existe una fila vertical de seis botones que abren las características más utilizadas en un panel lateral conocido como la “Barra de actividades”.

      GUI de code-server: Panel lateral

      Esta barra es personalizable, para que pueda cambiar el orden de estas vistas o eliminarlas de ella. Por defecto, el primer botón abre el menú general en una lista desplegable, mientras que la segunda vista abre el panel Explorer que proporciona navegación similar a la de un árbol en la estructura del proyecto. Aquí, puede administrar sus carpetas y archivos. Esto incluye crear, eliminar, mover y modificar nombres según sea necesario. En la siguiente vista se proporciona acceso a una funcionalidad de búsqueda y sustitución.

      A continuación, en el orden predeterminado, se encuentra la vista de los sistemas de control de fuentes, como Git. El código de Visual Studio también es compatible con otros proveedores de control de fuentes, y puede encontrar más instrucciones de flujos de trabajo de control de fuentes con el editor en esta documentación.

      Subpanel de Git con menú contextual abierto

      La opción de depuración de la barra de actividades ofrece todas las acciones comunes para realizar depuraciones en el panel. Visual Studio Code ofrece compatibilidad integrada con el depurador en tiempo de ejecución Node.js y cualquier lenguaje que se trasmita a Javascript. En el caso de otros lenguajes, puede instalar extensiones para el depurador requerido. Puede guardar las configuraciones de depuración en el archivo launch.json.

      Vista del depurador con launch.json abierto

      En la vista final de la barra de actividades se ofrece un menú para acceder a las extensiones disponibles en Marketplace.

      GUI de code-server: Pestañas

      La parte central de la GUI es su editor, que usted puede separar por pestañas para editar su código. Puede cambiar la vista de edición a un sistema de cuadrícula o a archivos en paralelo.

      Vista de sistema de cuadrícula

      Una vez que se cree un nuevo archivo a través del menú File, se abrirá un archivo vacío en una nueva pestaña y una vez que este se haya guardado su nombre será visible en el panel lateral Explorer. Se pueden crear carpetas haciendo clic con el botón secundario en la barra lateral de Explorer y con el primario en New Folder. Puede expandir una carpeta haciendo clic en su nombre, y también arrastrando archivos y carpetas y soltándolos en partes superiores de la jerarquía para trasladarlas a una nueva ubicación.

      GUI de code-server: New Folder

      Puede obtener acceso a un terminal presionando CTRL+SHIFT+` o haciendo clic en Terminal en el menú superior desplegable y luego en New Terminal. La terminal se abrirá en un panel inferior y su directorio de trabajo fijará en el espacio de trabajo del proyecto, que contiene los archivos y las carpetas que se muestran en el panel lateral de Explorer.

      Exploró una descripción general de alto nivel de la interfaz de code-server y revisó algunas de las características más utilizadas.

      Conclusión

      Ahora dispone de code-server, un IDE en la nube versátil, instalado en su servidor Ubuntu 20.04, expuesto en su dominio y protegido usando certificados de Let´s Encrypt. Ahora, puede trabajar en proyectos individualmente y en un esquema de colaboración de equipo. Ejecutar un IDE en la nube libera recursos en su máquina local y le permite escalarlos cuando sea necesario. Para obtener más información, consulte la documentación de Visual Studio Code sobre características adicionales e instrucciones detalladas relacionadas con otros componentes de code-server.

      Si desea ejecutar code-server en su clúster de Kubernetes de DigitalOcean consulte nuestro tutorial Cómo configurar la plataforma de IDE en la nube de code-server en Kubernetes de DigitalOcean.



      Source link

      Comment mettre en place la plate-forme cloud IDE de code-server sur Ubuntu 20.04


      L’auteur a choisi le Free and Open Source Fund pour recevoir un don dans le cadre du programme Write for Donations.

      Introduction

      Avec la migration des outils de développement vers le cloud, la création et l’adoption de plateformes cloud IDE (Integrated Development Environment) se développent. Les plateformes cloud IDE permettent une collaboration en temps réel entre les équipes de développeurs pour travailler dans un environnement de développement unifié qui minimise les incompatibilités et améliore la productivité. Accessibles via les navigateurs web, les plateformes cloud IDE sont disponibles à partir de tout type d’appareil moderne.

      code-server est un code Microsoft Visual Studio fonctionnant sur un serveur distant et accessible directement depuis votre navigateur. Visual Studio Code est un éditeur de code moderne avec un support Git intégré, un débogueur de code, une autocomplétion intelligente et des fonctionnalités personnalisables et extensibles. Cela signifie que vous pouvez utiliser divers appareils fonctionnant avec différents systèmes d’exploitation, et que vous disposez toujours d’un environnement de développement cohérent.

      Dans ce tutoriel, vous allez installer la plateforme IDE du serveur cloud sur votre machine Ubuntu 20.04 et l’exposer à votre domaine, sécurisé par des certificats Let’s Encrypt TLS gratuits. Au final, vous disposerez du code Microsoft Visual Studio sur votre serveur Ubuntu 20.04, disponible dans votre domaine et protégé par un mot de passe.

      Conditions préalables

      • Un serveur fonctionnant sous Ubuntu 20.04 avec au moins 2 Go de RAM, un accès root, et un compte sudo, non root. Vous pouvez le configurer en suivant ce guide de configuration initiale du serveur.

      • Nginx installé sur votre serveur. Pour vous guider, suivez les étapes 1 à 4 du guide Comment installer Nginx sur Ubuntu 20.04.

      • Un nom de domaine entièrement enregistré pour héberger code-server, pointé vers votre serveur. Ce tutoriel utilisera code-server.your-domain tout au long du cours. Vous pouvez acheter un nom de domaine sur Namecheap, en obtenir un gratuitement sur Freenom, ou utiliser le bureau d’enregistrement de domaine de votre choix. Pour DigitalOcean, vous pouvez suivre cette introduction à DigitalOcean DNS pour savoir comment les ajouter.

      Étape 1 – Installez code-server

      Dans cette section, vous allez configurer code-server sur votre serveur. Cela implique le téléchargement de la dernière version et la création d’un service systemd qui maintiendra code-server toujours en fonctionnement en arrière-plan. Vous préciserez également une politique de redémarrage du service, afin que code-server reste disponible après d’éventuels crashs ou redémarrages.

      Vous stockerez toutes les données relatives à code-server dans un dossier nommé ~/code-server. Créez-le en exécutant la commande suivante :

      Naviguez jusqu’à lui :

      Vous devrez vous rendre à la page des versions de Github relatives à code-server et choisir la dernière version de Linux (le fichier contiendra « linux » dans son nom). Au moment de la rédaction de ces lignes, la dernière version était 3.3.1. Téléchargez-le en utilisant wget, en exécutant la commande suivante :

      • wget https://github.com/cdr/code-server/releases/download/v3.3.1/code-server-3.3.1-linux-amd64.tar.gz

      Ensuite, déballez les archives en exécutant :

      • tar -xzvf code-server-3.3.1-linux-amd64.tar.gz

      Vous obtiendrez un dossier nommé exactement comme le fichier original que vous avez téléchargé, qui contient le code source de code-server. Copiez-le dans /usr/lib/code-server afin de pouvoir y accéder dans tout le système en exécutant la commande suivante :

      • sudo cp -r code-server-3.3.1-linux-amd64 /usr/lib/code-server

      Ensuite, créez un lien symbolique dans /usr/bin/code-server, pointant sur l’exécutable de code-server :

      • sudo ln -s /usr/lib/code-server/bin/code-server /usr/bin/code-server

      Ensuite, créez un dossier pour code-server, où seront stockées les données des utilisateurs :

      • sudo mkdir /var/lib/code-server

      Maintenant que vous avez téléchargé code-server et que vous l’avez rendu disponible dans tout le système, vous allez créer un service systemd pour que code-server fonctionne en arrière-plan à tout moment.

      Vous allez stocker la configuration du service dans un fichier nommé code-server.service, dans le répertoire /lib/systemd/system, où systemd stocke ses services. Créez-le avec votre éditeur de texte :

      • sudo nano /lib/systemd/system/code-server.service

      Ajoutez les lignes suivantes :

      /lib/systemd/system/code-server.service

      [Unit]
      Description=code-server
      After=nginx.service
      
      [Service]
      Type=simple
      Environment=PASSWORD=your_password
      ExecStart=/usr/bin/code-server --bind-addr 127.0.0.1:8080 --user-data-dir /var/lib/code-server --auth password
      Restart=always
      
      [Install]
      WantedBy=multi-user.target
      

      Ici, vous devez d’abord préciser la description du service. Ensuite, vous indiquez que le service nginx doit être lancé avant celui-ci. Après la section [Unit], vous définissez le type de service (simple signifie que le processus doit être simplement exécuté) et fournissez la commande qui sera exécutée.

      Vous spécifiez également que l’exécutable du serveur de code global doit être lancé avec quelques arguments spécifiques au serveur de code. --bind-addr 127.0.0.1:8080 le lie à localhost sur le port 8080, il n’est donc directement accessible que depuis l’intérieur de votre serveur. --user-data-dir /var/lib/code-server définit son répertoire de données utilisateur, et --auth password spécifie qu’il doit authentifier les visiteurs avec un mot de passe, spécifié dans la variable d’environnement PASSWORD déclarée sur la ligne au-dessus. 

      N’oubliez pas de remplacer <^>your_password<^> avec le mot de passe de votre choix, puis enregistrez et fermez le fichier.

      La ligne suivante indique à systemd de redémarrer code-server dans tous les cas de dysfonctionnement (par exemple, lorsqu’il se bloque ou que le processus est interrompu). La section [Install] ordonne à systemd de démarrer ce service lorsqu’il devient possible de se connecter à votre serveur.

      Démarrez le service code-server en exécutant la commande suivante :

      • sudo systemctl start code-server

      Vérifiez qu’il est correctement démarré en observant son état :

      • sudo systemctl status code-server

      Vous verrez un résultat similaire à :

      Output

      ● code-server.service - code-server Loaded: loaded (/lib/systemd/system/code-server.service; disabled; vendor preset: enabled) Active: active (running) since Wed 2020-05-20 13:03:40 UTC; 12s ago Main PID: 14985 (node) Tasks: 18 (limit: 2345) Memory: 26.1M CGroup: /system.slice/code-server.service ├─14985 /usr/lib/code-server/bin/../lib/node /usr/lib/code-server/bin/.. --bind-addr 127.0.0.1:8080 --user-data-dir /var/lib/code-server --auth> └─15010 /usr/lib/code-server/lib/node /usr/lib/code-server --bind-addr 127.0.0.1:8080 --user-data-dir /var/lib/code-server --auth password May 20 13:03:40 code-server-update-2004 systemd[1]: Started code-server. May 20 13:03:40 code-server-update-2004 code-server[15010]: info Wrote default config file to ~/.config/code-server/config.yaml May 20 13:03:40 code-server-update-2004 code-server[15010]: info Using config file ~/.config/code-server/config.yaml May 20 13:03:40 code-server-update-2004 code-server[15010]: info Using user-data-dir /var/lib/code-server May 20 13:03:40 code-server-update-2004 code-server[15010]: info code-server 3.3.1 6f1309795e1cb930edba68cdc7c3dcaa01da0ab3 May 20 13:03:40 code-server-update-2004 code-server[15010]: info HTTP server listening on http://127.0.0.1:8080 May 20 13:03:40 code-server-update-2004 code-server[15010]: info - Using password from $PASSWORD May 20 13:03:40 code-server-update-2004 code-server[15010]: info - To disable use `--auth none` May 20 13:03:40 code-server-update-2004 code-server[15010]: info - Not serving HTTPS

      Pour que code-server démarre automatiquement après un redémarrage du serveur, activez son service en exécutant la commande suivante :

      • sudo systemctl enable code-server

      Dans cette étape, vous avez téléchargé code-server et l’avez rendu disponible dans le monde entier. Ensuite, vous lui avez créé un service systemd et l’avez activé, de sorte que code-server démarre à chaque mise en marche du serveur. Maintenant, vous allez l’exposer à votre domaine en configurant Nginx pour servir de proxy inverse entre le visiteur et code-server.

      Étape 2 – Exposez code-server à votre domaine

      Dans cette section, vous allez configurer Nginx comme proxy inverse pour code server.

      Comme vous l’avez appris lors de l’étape préalable de Nginx, les fichiers de configuration de son site sont stockés sous /etc/nginx/sites-available et doivent ensuite être liés par un lien symbolique à /etc/nginx/sites-enabled pour devenir actifs.

      Vous allez stocker la configuration pour exposer code-server à votre domaine dans un fichier nommé code-server.conf, sous /etc/nginx/sites-available. Commencez par le créer à l’aide de votre éditeur :

      • sudo nano /etc/nginx/sites-available/code-server.conf

      Ajoutez les lignes suivantes :

      /etc/nginx/sites-available/code-server.conf

      server {
          listen 80;
          listen [::]:80;
      
          server_name code-server.your-domain;
      
          location / {
            proxy_pass http://localhost:8080/;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection upgrade;
            proxy_set_header Accept-Encoding gzip;
          }
      }
      

      Remplacez code-server.your-domain par le domaine de votre choix, puis enregistrez et fermez le fichier.

      Dans ce fichier, vous définissez que Nginx doit écouter le port HTTP 80. Ensuite, vous spécifiez un server_name (nom de serveur) qui indique à Nginx pour quel domaine accepter les requêtes et appliquer cette configuration particulière. Dans le bloc suivant, pour l’emplacement racine (/), vous spécifiez que les requêtes doivent être transmises dans les deux sens au code-server fonctionnant à localhost:8080. Les trois lignes suivantes (commençant par proxy_set_header) ordonnent à Nginx de reporter certains en-têtes de requête HTTP qui sont nécessaires au bon fonctionnement des WebSockets, dont code-server fait un usage intensif.

      Pour rendre cette configuration de site active, vous devrez en créer un lien symbolique dans le dossier /etc/nginx/sites-enabled en exécutant :

      • sudo ln -s /etc/nginx/sites-available/code-server.conf /etc/nginx/sites-enabled/code-server.conf

      Pour tester la validité de la configuration, exécutez la commande suivante :

      Vous verrez la sortie suivante :

      Output

      nginx: the configuration file /etc/nginx/nginx.conf syntax is ok nginx: configuration file /etc/nginx/nginx.conf test is successful

      Pour que la configuration prenne effet, vous devez redémarrer Nginx :

      • sudo systemctl restart nginx

      Votre installation de code-server est désormais accessible à votre domaine. Dans l’étape suivante, vous le sécuriserez en appliquant un certificat Let’s Encrypt TLS gratuit.

      Étape 3 – Sécurisez votre domaine

      Dans cette section, vous sécuriserez votre domaine à l’aide d’un certificat TLS Let’s Encrypt, que vous fournirez en utilisant Certbot.

      Pour installer la dernière version de Certbot et son plugin Nginx, exécutez la commande suivante :

      • sudo apt install certbot python3-certbot-nginx

      Dans le cadre des conditions préalables, vous avez activé ufw (Uncomplicated Firewall) et l’avez configuré pour permettre le trafic HTTP non crypté. Pour pouvoir accéder au site sécurisé, vous devez le configurer de manière à ce qu’il accepte le trafic crypté en exécutant la commande suivante :

      Le résultat sera :

      Output

      Rule added Rule added (v6)

      Comme pour Nginx, vous devrez le recharger pour que la configuration prenne effet :

      Le résultat sera :

      Output

      Firewall reloaded

      Ensuite, dans votre navigateur, naviguez jusqu’au domaine que vous avez utilisé pour code-server. Vous verrez l’invite de connexion à code-server.

      invite de connexion à code-server

      code-server vous demande votre mot de passe. Saisissez celui que vous avez défini à l’étape précédente et appuyez sur Entrée IDE. Vous allez maintenant entrer dans code-server et voir immédiatement l’interface graphique de son éditeur.

      Interface graphique code-server

      Maintenant que vous avez vérifié que code-server était correctement exposé à votre domaine, vous allez installer des certificats TLS Let’s Encrypt pour le sécuriser, en utilisant Certbot.

      Si vous souhaitez demander des certificats pour votre domaine, exécutez la commande suivante :

      • sudo certbot --nginx -d code-server.your-domain

      Dans cette commande, vous lancez certbot dans le but de demander des certificats pour votre domaine – vous passez le nom de domaine avec le paramètre -d. Le drapeau --nginx lui indique de modifier automatiquement la configuration du site Nginx pour prendre en charge le HTTPS. N’oubliez pas de remplacer code-server.your-domain par votre nom de domaine.

      Si c’est la première fois que vous utilisez Certbot, il vous sera demandé de fournir une adresse électronique pour les avis urgents et d’accepter les conditions de service du FEP. Certbot demandera alors des certificats pour votre domaine à Let’s Encrypt. Il vous demandera ensuite si vous souhaitez rediriger tout le trafic HTTP vers le HTTPS :

      Output

      Please choose whether or not to redirect HTTP traffic to HTTPS, removing HTTP access. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 1: No redirect - Make no further changes to the webserver configuration. 2: Redirect - Make all requests redirect to secure HTTPS access. Choose this for new sites, or if you're confident your site works on HTTPS. You can undo this change by editing your web server's configuration. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Select the appropriate number [1-2] then [enter] (press 'c' to cancel):

      Il est recommandé de choisir la deuxième option afin de maximiser la sécurité. Après avoir saisi votre sélection, appuyez sur ENTER.

      Le résultat sera similaire à celui-ci :

      Output

      IMPORTANT NOTES: - Congratulations! Your certificate and chain have been saved at: /etc/letsencrypt/live/code-server.your-domain/fullchain.pem Your key file has been saved at: /etc/letsencrypt/live/code-server.your-domain/privkey.pem Your cert will expire on ... To obtain a new or tweaked version of this certificate in the future, simply run certbot again with the "certonly" option. To non-interactively renew *all* of your certificates, run "certbot renew" - Your account credentials have been saved in your Certbot configuration directory at /etc/letsencrypt. You should make a secure backup of this folder now. This configuration directory will also contain certificates and private keys obtained by Certbot so making regular backups of this folder is ideal. - If you like Certbot, please consider supporting our work by: Donating to ISRG / Let's Encrypt: https://letsencrypt.org/donate Donating to EFF: https://eff.org/donate-le

      Cela signifie que Certbot a généré avec succès des certificats TLS et les a appliqués à la configuration Nginx de votre domaine. Vous pouvez maintenant recharger votre domaine de code-server dans votre navigateur et observer un cadenas à gauche de l’adresse du site, ce qui signifie que votre connexion est correctement sécurisée.

      Maintenant que code-server est accessible à votre domaine via un reverse proxy Nginx sécurisé, vous êtes prêt à revoir l’interface utilisateur de code-server.

      Étape 4 – Utilisez l’interface code-server

      Dans cette section, vous utiliserez certaines des fonctionnalités de l’interface code-server. Comme code-server est un code Visual Studio fonctionnant dans le cloud, il a la même interface que l’édition autonome de bureau.

      Sur le côté gauche de l’IDE, il y a une rangée verticale de six boutons qui ouvrent les fonctionnalités les plus utilisées dans un panneau latéral connu sous le nom de Barre d’activité.

      Interface utilisateur code-server- Panneau latéral

      Cette barre est personnalisable de sorte que vous pouvez modifier l’ordre de ces vues ou les retirer de la barre. Par défaut, le premier bouton ouvre le menu général dans une liste déroulante, tandis que la deuxième vue ouvre le panneau Explorer qui permet une navigation arborescente de la structure du projet. Vous pouvez gérer vos dossiers et fichiers ici – en les créant, les supprimant, les déplaçant et les renommant si nécessaire. La vue suivante donne accès à une fonctionnalité de recherche et de remplacement

      Vient ensuite, dans l’ordre par défaut, votre vision des systèmes de contrôle des sources, comme Git. Visual Studio Code prend également en charge d’autres fournisseurs de contrôle de source et vous trouverez dans cette documentation des instructions supplémentaires sur les flux de travail de contrôle de source avec l’éditeur.

      Volet Git avec context-menu (menu contextuel) ouvert

      L’option de débogueur de la Barre d’activité fournit toutes les actions communes de débogage dans le panneau. Visual Studio Code est livré avec un support intégré pour le débugueur d’exécution Node.js et tout langage qui se transpose en Javascript. Pour les autres langues, vous pouvez installer des extensions pour le debogueur requis. Vous pouvez enregistrer des configurations de débogage dans le fichier launch.json

      Debugger View avec launch.json ouvert

      La vue finale dans la barre d’activité fournit un menu pour accéder aux extensions disponibles sur le Marché.

      code-server GUI - Onglets

      La partie centrale de l’interface graphique est votre éditeur, que vous pouvez séparer en onglets pour éditer votre code. Vous pouvez modifier votre vue d’édition en un système de grille ou en fichiers côte à côte.

      Vue de l'éditeur sous forme de grille

      Après avoir créé un nouveau fichier via le menu Fichier, un fichier vide s’ouvrira dans un nouvel onglet, et une fois enregistré, le nom du fichier sera visible dans le panneau latéral de l’explorateur. La création de dossiers peut se faire en cliquant avec le bouton droit de la souris sur la barre latérale de l’Explorateur et en cliquant sur Nouveau dossier. Vous pouvez développer un dossier en cliquant sur son nom ainsi qu’en glissant et déposant des fichiers et des dossiers dans les parties supérieures de la hiérarchie afin de les déplacer vers un nouvel emplacement.

      Interface graphique code-server - Nouveau dossier

      Vous pouvez accéder à un terminal en tapant CTRL+SHIFT+` ou en cliquant sur Terminal dans le menu supérieur, et en sélectionnant Nouveau terminal. Le terminal s’ouvrira dans un panneau inférieur et son répertoire de travail sera défini sur l’espace de travail du projet, qui contient les fichiers et les dossiers affichés dans le panneau latéral de l’explorateur.

      Vous avez exploré un aperçu de haut niveau de l’interface code-server et examiné certaines des caractéristiques les plus couramment utilisées.

      Conclusion

      Vous disposez maintenant de code-server, un IDE cloud polyvalent, installé sur votre serveur Ubuntu 20.04, exposé à votre domaine et sécurisé à l’aide de certificats Let’s Encrypt. Vous pouvez désormais travailler sur des projets individuellement, ainsi que dans un cadre de collaboration en équipe. L’utilisation d’un IDE cloud libère des ressources sur votre machine locale et vous permet d’augmenter les ressources en cas de besoin. Pour plus d’informations, consultez la documentation relative à Visual Studio Code pour accéder à des fonctionnalités supplémentaires et des instructions détaillées sur les autres composants de code-server.

      Si vous souhaitez utiliser code-server sur votre cluster Kubernetes de DigitalOcean , consultez notre tutoriel Comment mettre en place la plateforme cloud IDE code-server sur Kubernetes de DigitalOcean.



      Source link

      Como configurar a plataforma IDE em nuvem code-server no Ubuntu 20.04


      O autor selecionou o Free and Open Source Fund para receber uma doação como parte do programa Write for DOnations.

      Introdução

      Com as ferramentas de desenvolvimento na nuvem, a criação e adoção de plataformas IDE (Ambiente de desenvolvimento integrado) em nuvem está crescendo. Os IDEs em nuvem permitem que a colaboração em tempo real entre as equipes de desenvolvedores funcione em um ambiente unificado de desenvolvimento que minimiza as incompatibilidades e aumenta a produtividade. Acessível através de navegadores Web, os IDEs [ambientes de desenvolvimento integrado] baseados em nuvem estão disponíveis em todo tipo de dispositivo moderno.

      O code-server é o Visual Studio Code da Microsoft em execução em um servidor remoto e acessível diretamente do seu navegador. O Visual Studio Code é um editor de códigos moderno com suporte Git integrado, um depurador de códigos, um sistema de preenchimento automático inteligente e recursos personalizáveis e extensíveis. Isso significa que você pode usar vários dispositivos que executem sistemas operacionais diferentes, tendo sempre um ambiente de desenvolvimento consistente à mão.

      Neste tutorial, você irá configurar a plataforma IDE em nuvem code-server na sua máquina com Ubuntu 20.04 e irá expô-la no seu domínio, protegida por certificados TLS gratuitos do Let’s Encrypt. Ao final, terá o Microsoft Visual Studio Code em execução no seu servidor Ubuntu 20.04, disponível no seu domínio e protegido com uma senha.

      Pré-requisitos

      • Um servidor executando o Ubuntu 20.04, com pelo menos 2 GB de memória RAM e uma conta não root com privilégios sudo. Você pode configurar isso seguindo este guia de configuração inicial de servidor.

      • O Nginx instalado no seu servidor. Para obter um guia sobre como instalar o Nginx, complete os Passos 1 a 4 de Como instalar o Nginx no Ubuntu 20.04.

      • Um nome de domínio totalmente registrado para hospedar o code-server, apontado para o seu servidor. Este tutorial usará o code-server.your-domain durante todo o processo. Você pode comprar um nome de domínio em Namecheap, obter um gratuitamente em Freenom ou usar o registrado de domínios de sua escolha. Para a DigitalOcean, siga esta introdução ao DNS da DigitalOcean para obter mais detalhes sobre como adicioná-los.

      Passo 1 — Instalando o code-server

      Nesta seção, você irá configurar o code-server no seu servidor. Isso implica em baixar a versão mais recente e criar um serviço systemd que irá manter o code-server executando sempre em segundo plano. Você também especificará uma política de reinicialização para o serviço, de modo que o code-server permaneça disponível após possíveis falhas ou reinicializações.

      Todos os dados relacionados com o code-server serão armazenados em uma pasta chamada ~/code-server. Crie-a executando o seguinte comando:

      Navegue até ela:

      Você precisará acessar a página de lançamentos do Github do code-server e escolher a compilação mais recente do Linux (o arquivo terá ‘linux’ em seu nome). No momento em que este artigo foi escrito, a versão mais recente era a 3.3.1. Baixe-a usando o wget, executando o seguinte comando:

      • wget https://github.com/cdr/code-server/releases/download/v3.3.1/code-server-3.3.1-linux-amd64.tar.gz

      Então, descompacte o arquivo executando:

      • tar -xzvf code-server-3.3.1-linux-amd64.tar.gz

      Você receberá uma pasta com o mesmo nome do arquivo original que baixou, que contém o código fonte do code-server. Copie-o para a pasta /usr/lib/code-server, para que você possa acessá-lo em todo o sistema ao executar o seguinte comando:

      • sudo cp -r code-server-3.3.1-linux-amd64 /usr/lib/code-server

      Em seguida, crie um link simbólico em /usr/bin/code-server, apontando para o executável do code-server:

      • sudo ln -s /usr/lib/code-server/bin/code-server /usr/bin/code-server

      Em seguida, crie uma pasta para o code-server, onde serão armazenados os dados de usuário:

      • sudo mkdir /var/lib/code-server

      Agora que baixou o code-server e o tornou disponível em todo o sistema, você criará um serviço systemd para manter o code-server executando sempre em segundo plano.

      Você armazenará a configuração de serviço em um arquivo chamado code-server.service, no diretório /lib/systemd/system, onde o systemd armazena seus serviços. Crie-o usando seu editor de texto:

      • sudo nano /lib/systemd/system/code-server.service

      Adicione as linhas a seguir:

      /lib/systemd/system/code-server.service

      [Unit]
      Description=code-server
      After=nginx.service
      
      [Service]
      Type=simple
      Environment=PASSWORD=your_password
      ExecStart=/usr/bin/code-server --bind-addr 127.0.0.1:8080 --user-data-dir /var/lib/code-server --auth password
      Restart=always
      
      [Install]
      WantedBy=multi-user.target
      

      Aqui, especifique primeiro a descrição do serviço. Depois, você vai declarar que o serviço nginx deve ser iniciado antes deste aqui. Após a seção [Unit], você deve definir o tipo de serviço (simple, que significa que o processo deve ser simplesmente executado) e fornecer o comando que será executado.

      Você também especificará que o executável global do code-server deve ser iniciado com alguns argumentos específicos do code-server. --bind-addr 127.0.0.1:8080 vincula-o ao localhost na porta 8080, de modo que ele somente fica acessível diretamente de dentro do seu servidor. --user-data-dir /var/lib/code-server define seu diretório de dados de usuário e – auth password especifica que ele deve autenticar visitantes com uma senha, especificada na variável de ambiente PASSWORD, declarada na linha acima dele.

      Lembre-se de substituir o your_password pela senha desejada e, em seguida, salve e feche o arquivo.

      A próxima linha diz ao systemd para reiniciar o code-server em todos os eventos de mal funcionamento (por exemplo, quando ele falha ou o processo é terminado). A seção [Install] ordena que o systemd inicie esse serviço quando for possível fazer login no seu servidor.

      Inicie o serviço code-server executando o seguinte comando:

      • sudo systemctl start code-server

      Verifique se ele foi iniciado corretamente, observando seu status:

      • sudo systemctl status code-server

      Você verá um resultado parecido com este:

      Output

      ● code-server.service - code-server Loaded: loaded (/lib/systemd/system/code-server.service; disabled; vendor preset: enabled) Active: active (running) since Wed 2020-05-20 13:03:40 UTC; 12s ago Main PID: 14985 (node) Tasks: 18 (limit: 2345) Memory: 26.1M CGroup: /system.slice/code-server.service ├─14985 /usr/lib/code-server/bin/../lib/node /usr/lib/code-server/bin/.. --bind-addr 127.0.0.1:8080 --user-data-dir /var/lib/code-server --auth> └─15010 /usr/lib/code-server/lib/node /usr/lib/code-server --bind-addr 127.0.0.1:8080 --user-data-dir /var/lib/code-server --auth password May 20 13:03:40 code-server-update-2004 systemd[1]: Started code-server. May 20 13:03:40 code-server-update-2004 code-server[15010]: info Wrote default config file to ~/.config/code-server/config.yaml May 20 13:03:40 code-server-update-2004 code-server[15010]: info Using config file ~/.config/code-server/config.yaml May 20 13:03:40 code-server-update-2004 code-server[15010]: info Using user-data-dir /var/lib/code-server May 20 13:03:40 code-server-update-2004 code-server[15010]: info code-server 3.3.1 6f1309795e1cb930edba68cdc7c3dcaa01da0ab3 May 20 13:03:40 code-server-update-2004 code-server[15010]: info HTTP server listening on http://127.0.0.1:8080 May 20 13:03:40 code-server-update-2004 code-server[15010]: info - Using password from $PASSWORD May 20 13:03:40 code-server-update-2004 code-server[15010]: info - To disable use `--auth none` May 20 13:03:40 code-server-update-2004 code-server[15010]: info - Not serving HTTPS

      Para fazer o code-server iniciar automaticamente após a reinicialização de um servidor, habilite seu serviço executando o seguinte comando:

      • sudo systemctl enable code-server

      Neste passo, você baixou o code-server e o disponibilizou globalmente. Depois, você criou um serviço systemd para ele e o habilitou, de modo que o code-server será iniciado a cada inicialização do servidor. Em seguida, você irá expô-lo no seu domínio, configurando o Nginx para servir como um proxy reverso entre o visitante e o code-server.

      Passo 2 — Expondo o code-server em seu domínio

      Nesta seção, você irá configurar o Nginx como um proxy reverso para o code-server.

      Como aprendeu no passo com os pré-requisitos para usar o Nginx, os arquivos de configuração do servidor Nginx ficam armazenados em /etc/nginx/sites-available e posteriormente deverão ser simbolicamente associados ao /etc/nginx/sites-enabled para se tornarem ativos.

      Você armazenará a configuração para expor o code-server em seu domínio, em um arquivo chamado code-server.conf, sob /etc/nginx/sites-available. Inicie criando o arquivo, usando o seu editor:

      • sudo nano /etc/nginx/sites-available/code-server.conf

      Adicione as linhas a seguir:

      /etc/nginx/sites-available/code-server.conf

      server {
          listen 80;
          listen [::]:80;
      
          server_name code-server.your-domain;
      
          location / {
            proxy_pass http://localhost:8080/;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection upgrade;
            proxy_set_header Accept-Encoding gzip;
          }
      }
      

      Substitua code-server.your-domain pelo domínio desejado e, em seguida, salve e feche o arquivo.

      Nesse arquivo, você vai definir que o servidor Nginx deverá escutar a porta HTTP 80. Então, especificará um server_name que dirá ao Nginx para qual domínio ele deve aceitar pedidos, aplicando essa configuração específica. No próximo bloco, para o local raiz (/), você especificará que os pedidos devem ser intercambiados com o code-server que está executando no localhost:8080. As três linhas seguintes (começando por proxy_set_header) ordenam que o Nginx transporte alguns cabeçalhos de pedidos HTTP – que são necessários para o funcionamento correto do WebSockets e que o code-server utiliza amplamente.

      Para ativar a configuração desse site, você precisará criar uma ligação simbólica dele na pasta /etc/nginx/sites-enabled, executando:

      • sudo ln -s /etc/nginx/sites-available/code-server.conf /etc/nginx/sites-enabled/code-server.conf

      Para testar a validade da configuração, execute o seguinte comando:

      Você verá o seguinte resultado:

      Output

      nginx: the configuration file /etc/nginx/nginx.conf syntax is ok nginx: configuration file /etc/nginx/nginx.conf test is successful

      Para que a configuração entre em vigor, você precisará reiniciar o Nginx:

      • sudo systemctl restart nginx

      Agora, você tem sua instalação do code-server acessível no seu domínio. No próximo passo, irá protegê-lo, aplicando um certificado TLS gratuito do Let’s Encrypt.

      Passo 3 — Protegendo seu domínio

      Nesta seção, você irá proteger seu domínio usando um certificado TLS do Let’s Encrypt, que será fornecido usando o Certbot.

      Para instalar a versão mais recente do Certbot e do seu plug-in do Nginx, execute o seguinte comando:

      • sudo apt install certbot python3-certbot-nginx

      Como parte dos pré-requisitos, você habilitou o ufw (Uncomplicated Firewall) [Firewall descomplicado] e o configurou de modo a permitir tráfego de HTTP não criptografado. Para conseguir acessar o site protegido, você precisará configurá-lo para aceitar o tráfego criptografado, executando o seguinte comando:

      O resultado será:

      Output

      Rule added Rule added (v6)

      Assim como acontece com o Nginx, você terá que recarregá-lo para que a configuração entre em vigor:

      O resultado será:

      Output

      Firewall reloaded

      Depois, no seu navegador, navegue até o domínio que usou para o code-server. Você verá o prompt de login do code-server.

      prompt de login do code-server

      O code-server está pedindo sua senha. Digite a senha que você definiu no passo anterior e pressione** Enter IDE**. Agora, você entrará no code-server e logo verá a interface gráfica do usuário (GUI) do seu editor.

      GUI do code-server

      Agora que verificou se o code-server está corretamente exposto no seu domínio, você instalará certificados TLS do Let’s Encrypt para protegê-lo, usando o Certbot.

      Para solicitar certificados para seu domínio, execute o seguinte comando:

      • sudo certbot --nginx -d code-server.your-domain

      Nesse comando, você executa o certbot para solicitar certificados para o seu domínio — e envia o nome de domínio com o parâmetro -d. O sinalizador --nginx diz a ele para alterar automaticamente a configuração do site do Nginx para oferecer suporte ao HTTPS. Lembre-se de substituir o code-server.your-domain pelo seu próprio nome de domínio.

      Se for a primeira vez que você executa o Certbot, será solicitado que você forneça um endereço de e-mail para avisos urgentes e aceite os Termos de serviço do EFF. Então, o Certbot irá solicitar certificados do Let’s Encrypt para o seu domínio. Em seguida, ele irá perguntar se você deseja redirecionar todo o tráfego HTTP para o HTTPS:

      Output

      Please choose whether or not to redirect HTTP traffic to HTTPS, removing HTTP access. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 1: No redirect - Make no further changes to the webserver configuration. 2: Redirect - Make all requests redirect to secure HTTPS access. Choose this for new sites, or if you're confident your site works on HTTPS. You can undo this change by editing your web server's configuration. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Select the appropriate number [1-2] then [enter] (press 'c' to cancel):

      É recomendável selecionar a segunda opção para maximizar a segurança. Após digitar sua seleção, pressione ENTER.

      O resultado será semelhante a este:

      Output

      IMPORTANT NOTES: - Congratulations! Your certificate and chain have been saved at: /etc/letsencrypt/live/code-server.your-domain/fullchain.pem Your key file has been saved at: /etc/letsencrypt/live/code-server.your-domain/privkey.pem Your cert will expire on ... To obtain a new or tweaked version of this certificate in the future, simply run certbot again with the "certonly" option. To non-interactively renew *all* of your certificates, run "certbot renew" - Your account credentials have been saved in your Certbot configuration directory at /etc/letsencrypt. You should make a secure backup of this folder now. This configuration directory will also contain certificates and private keys obtained by Certbot so making regular backups of this folder is ideal. - If you like Certbot, please consider supporting our work by: Donating to ISRG / Let's Encrypt: https://letsencrypt.org/donate Donating to EFF: https://eff.org/donate-le

      Isso significa que o Certbot gerou com sucesso os certificados TLS e que os aplicou à configuração do Nginx para seu domínio. Neste ponto, você já pode recarregar o domínio do seu code-server no seu browser. Poderá, ainda, observar um cadeado à esquerda do endereço do site, o que significa que sua conexão está devidamente protegida.

      Agora que o code-server se encontra acessível em seu domínio, através de um proxy reverso protegido do Nginx, você está pronto para revisar a interface de usuário do code-server.

      Passo 4 — Usando a interface do code-server

      Nesta seção, você irá usar alguns dos recursos da interface do code-server. Como o code-server é o Visual Studio Code executado em nuvem, ele tem a mesma interface que a edição da área de trabalho independente.

      À esquerda do IDE, há uma linha vertical de seis botões que abrem os recursos usados com mais frequência, em um painel lateral conhecido como Barra de Atividades.

      GUI do code-server - Painel lateral

      Essa barra pode ser personalizada para que você possa mover essas visualizações em uma ordem diferente ou removê-las da barra. Por padrão, o primeiro botão abre o menu geral em uma lista suspensa, enquanto a segunda visualização abre o painel do Explorer que fornece navegação do tipo árvore da estrutura do projeto. Você pode gerenciar suas pastas e arquivos aqui —criando, excluindo, movendo e renomeando-as conforme necessário. A próxima visualização fornece acesso a uma funcionalidade de busca e substituição.

      Depois disso, na ordem padrão, vem sua visualização dos sistemas de controle de origem, como o Git. O Visual Studio Code também oferece suporte a outros fornecedores de controle de origem; você pode encontrar mais instruções para fluxos de trabalho de controle de origem nesta documentação.

      Painel do Git com o menu de contexto aberto

      A opção de depurador na Barra de Atividades fornece todas as ações comuns para depuração no painel. O Visual Studio Code vem com suporte integrado para o depurador de tempo de execução do Node.js e qualquer linguagem que transcompila para o Javascript. Para outras linguagens, você pode instalar as extensions para o depurador necessário. Você pode salvar as configurações de depuração no arquivo launch.json.

      Visualização do Depurador com o launch.json aberto

      A visualização final na Barra de Atividades fornece um menu para acessar as extensões disponíveis no Marketplace.

      Guias da GUI do code-server

      A parte central da GUI é o seu editor, que pode ser separado por guias para a edição de códigos. Você pode alterar sua visualização de edição para um sistema em grade ou para arquivos lado a lado.

      Exibição em Grade do Editor

      Após criar um novo arquivo através do menu File, um arquivo vazio irá abrir em uma nova guia e, uma vez salvo, o nome do arquivo poderá ser visualizado no painel lateral do Explorer. Para criar pastas, clique com o botão direito do mouse na barra lateral do Explorer e clique na opção New Folder. Você pode expandir uma pasta clicando em seu nome, bem como arrastar e soltar arquivos e pastas nas partes superiores da hierarquia – para movê-los para uma nova localização.

      GUI do code-server - Nova pasta

      Você pode obter acesso a um terminal, digitando CTRL+SHIFT+`, ou clicando em Terminal, no menu suspenso superior e selecionando New Terminal. O terminal abrirá em um painel inferior e seu diretório de trabalho será definido como o espaço de trabalho do projeto, que contém os arquivos e pastas mostrados no painel lateral do Explorer.

      Você explorou uma visão geral de alto nível da interface do code-server e revisou algumas das funcionalidades mais utilizadas.

      Conclusão

      Agora, você tem o code-server, um IDE em nuvem versátil, instalado no seu servidor Ubuntu 20.04, exposto no seu domínio e protegido com os certificados do Let’s Encrypt. Desta forma, você pode trabalhar em projetos individualmente, bem como em uma configuração de trabalho colaborativo em equipe. Executar um IDE em nuvem libera recursos em sua máquina local e permite a você dimensionar os recursos quando necessário. Para mais informações, consulte a documentação do Visual Studio Code para obter recursos adicionais e instruções detalhadas em outros componentes do code-server.

      Caso queira executar o code-server no cluster do seu Kubernetes da DigitalOcean, verifique nosso tutorial sobre Como configurar a plataforma IDE em nuvem do code-server no Kubernetes da DigitalOcean.



      Source link