One place for hosting & domains

      place

      Comment mettre en place une application Node.js pour la production sur Ubuntu 20.04


      Introduction

      Node.js est un environnement d’exécution JavaScript open-source pour la création d’applications côté serveur et de réseau. La plate-forme fonctionne sous Linux, macOS, FreeBSD et Windows. Bien que vous puissiez exécuter les applications Node.js en ligne de commande, ce tutoriel se concentre sur leur exécution en tant que service. Cela signifie qu’ils redémarreront au redémarrage ou en cas d’échec et qu’ils peuvent être utilisés en toute sécurité dans un environnement de production.

      Dans ce tutoriel, vous allez mettre en place un environnement Node.js prêt pour la production sur un seul serveur Ubuntu 20.04. Ce serveur exécutera une application Node.js gérée par PM2, et fournira aux utilisateurs un accès sécurisé à l’application via un proxy inverse Nginx. Le serveur Nginx offrira le HTTPS en utilisant un certificat gratuit fourni par Let’s Encrypt. 

      Conditions préalables

      Ce guide suppose que vous disposez des éléments suivants :

      Lorsque vous aurez rempli les conditions préalables, vous disposerez d’un serveur desservant la page par défaut de votre domaine à l’adresse https://example.com/. 

      Étape 1 — Installation de Node.js

      Commençons par installer la dernière version LTS de Node.js, en utilisant les archives des packages NodeSource.

      Tout d’abord, installez le NodeSource PPA afin d’avoir accès à son contenu. Assurez-vous que vous êtes dans votre répertoire d’origine et utilisez curl pour récupérer le script d’installation de la version LTS la plus récente de Node.js dans ses archives.

      • cd ~
      • curl -sL https://deb.nodesource.com/setup_14.x -o nodesource_setup.sh

      Vous pouvez inspecter le contenu de ce script avec nano ou votre éditeur de texte préféré :

      Lorsque vous avez fini d’inspecter le script, lancez le sous sudo: 

      • sudo bash nodesource_setup.sh

      Le PPA sera ajouté à votre configuration et le cache local de votre package sera automatiquement mis à jour. Après avoir exécuté le script d’installation à partir de Nodesource, vous pouvez installer le paquet Node.js :

      Pour vérifier quelle version de Node.js vous avez installée après ces premières étapes, tapez :

      Output

      v14.4.0

      Note : Lors de l’installation à partir du PPA NodeSource, l’exécutable Node.js est appelé nodejs, plutôt que node.

      Le paquet nodejs contient le binaire nodejs ainsi que npm, un gestionnaire de packages pour les modules Node, de sorte que vous n’avez pas besoin d’installer npm séparément.

      npm utilise un fichier de configuration dans votre répertoire de base pour suivre les mises à jour. Il sera créé la première fois que vous utiliserez npm. Exécutez cette commande pour vérifier que npm est installé et pour créer le fichier de configuration :

      Output

      6.14.5

      Pour que certains packages npm fonctionnent (par exemple, ceux qui nécessitent la compilation du code source), vous devrez installer le package build-essential :

      • sudo apt install build-essential

      Vous disposez maintenant des outils nécessaires pour travailler avec les packages npm qui nécessitent de compiler du code source.

      Une fois le runtime Node.js installé, passons à l’écriture d’une application Node.js.

      Étape 2 — Création d’une application Node.js

      Écrivons une application Hello World qui renvoie « Hello World » à toute demande HTTP. Cet exemple de demande vous aidera à mettre en place Node.js. Vous pouvez le remplacer par votre propre application : assurez-vous simplement de modifier votre application pour écouter sur les adresses IP et les ports appropriés.

      Tout d’abord, créons un exemple de demande appelée hello.js: 

      Ajoutez le code suivant dans le fichier :

      ~/hello.js

      const http = require('http');
      
      const hostname="localhost";
      const port = 3000;
      
      const server = http.createServer((req, res) => {
        res.statusCode = 200;
        res.setHeader('Content-Type', 'text/plain');
        res.end('Hello World!n');
      });
      
      server.listen(port, hostname, () => {
        console.log(`Server running at http://${hostname}:${port}/`);
      });
      

      Enregistrez le fichier et quittez l’éditeur.

      Cette application Node.js écoute sur l’adresse (localhost) et le port (3000) spécifiés, et renvoie « Hello World ! » avec un code de réussite de 200 HTTP.  Comme nous sommes à l’écoute sur localhost, les clients distants ne pourront pas se connecter à notre application.

      Pour tester votre demande, tapez :

      Vous recevrez le résultat suivant :

      Output

      Server running at http://localhost:3000/

      Note : L’exécution d’une application Node.js de cette manière bloquera les commandes supplémentaires jusqu’à ce que l’application soit tuée en appuyant sur CTRL+C.

      Pour tester l’application, ouvrez une autre session de terminal sur votre serveur, et connectez-vous à localhost avec curl :

      • curl http://localhost:3000

      Si vous obtenez le résultat suivant, l’application fonctionne correctement et écoute à la bonne adresse et sur le bon port :

      Output

      Hello World!

      Si vous n’obtenez pas le résultat attendu, assurez-vous que votre application Node.js est en cours d’exécution et configurée pour écouter sur l’adresse et le port appropriés.

      Une fois que vous êtes sûr que cela fonctionne, arrêtez l’application (si ce n’est pas déjà fait) en appuyant sur CTRL+C.

      Étape 3 — Installer PM2

      Ensuite, nous allons installer PM2, un gestionnaire de processus pour les applications Node.js. PM2 permet de démoniser les applications afin qu’elles s’exécutent en arrière-plan comme un service.

      Utilisez npm pour installer la dernière version de PM2 sur votre serveur :

      • sudo npm install pm2@latest -g

      L’option -g indique à npm d’installer le module dans le monde entier, afin qu’il soit disponible dans tout le système.

      Commençons par utiliser la commande pm2 start​​​1​​​ pour exécuter votre application, hello.js, en arrière-plan :

      Cela ajoute également votre demande à la liste de processus de PM2, qui est produite chaque fois que vous lancez une demande :

      Output

      ... [PM2] Spawning PM2 daemon with pm2_home=/home/sammy/.pm2 [PM2] PM2 Successfully daemonized [PM2] Starting /home/sammy/hello.js in fork_mode (1 instance) [PM2] Done. ┌────┬────────────────────┬──────────┬──────┬───────────┬──────────┬──────────┐ │ id │ name │ mode │ ↺ │ status │ cpu │ memory │ ├────┼────────────────────┼──────────┼──────┼───────────┼──────────┼──────────┤ │ 0 │ hello │ fork │ 0 │ online │ 0% │ 25.2mb │ └────┴────────────────────┴──────────┴──────┴───────────┴──────────┴──────────┘

      Comme indiqué ci-dessus, PM2 attribue automatiquement un nom d'application (basé sur le nom de fichier, sans l’extension .js) et un identifiant PM2. PM2 conserve également d’autres informations, telles que le PID du processus, son état actuel et l’utilisation de la mémoire.

      Les applications qui tournent sous PM2 seront redémarrées automatiquement si l’application crashe ou est arrêtée, mais nous pouvons prendre une mesure supplémentaire pour que l’application soit lancée au démarrage du système en utilisant la sous-commande startup.  Cette sous-commande génère et configure un script de démarrage pour lancer PM2 et ses processus gérés aux démarrages du serveur :

      La dernière ligne de la sortie résultante comprendra une commande à exécuter avec les privilèges de superuser afin de configurer PM2 pour qu’il démarre au démarrage :

      Output

      [PM2] Init System found: systemd sammy [PM2] To setup the Startup Script, copy/paste the following command: sudo env PATH=$PATH:/usr/bin /usr/lib/node_modules/pm2/bin/pm2 startup systemd -u sammy --hp /home/sammy

      Exécutez la commande à partir de la sortie, avec votre nom d’utilisateur à la place de sammy : 

      • sudo env PATH=$PATH:/usr/bin /usr/lib/node_modules/pm2/bin/pm2 startup systemd -u sammy --hp /home/sammy

      Comme étape supplémentaire, nous pouvons sauvegarder la liste des processus PM2 et les environnements correspondants :

      Vous avez maintenant créé une unité systemd qui exécute pm2 pour votre utilisateur au démarrage. Cette instance pm2, à son tour, lance hello.js.

      Démarrer le service avec systemctl: 

      • sudo systemctl start pm2-sammy

      Si, à ce stade, un message d’erreur s’affiche, vous devrez peut-être redémarrer, ce que vous pouvez faire avec sudo reboot. 

      Vérifiez l’état de l’unité systemd :

      • systemctl status pm2-sammy

      Pour un aperçu détaillé de systemd, veuillez consulter Les Fondamentaux de Systemd : Travailler avec les services, les unités et le journal. 

      En plus de celles que nous avons couvertes, PM2 fournit de nombreuses sous-commandes qui vous permettent de gérer ou de rechercher des informations sur vos demandes.

      Arrêtez une application avec cette commande (spécifiez le nom ou l’identifiant de l’application PM2) :

      Redémarrer une application :

      • pm2 restart app_name_or_id

      Liste des applications actuellement gérées par PM2 :

      Obtenez des informations sur une application spécifique en utilisant son Nom d'application: 

      Le moniteur du processus PM2 peut être remonté avec la sous-commande monit.  Il affiche l’état de l’application, l’unité centrale et l’utilisation de la mémoire :

      Notez que l’exécution de pm2 sans aucun argument affichera également une page d’aide avec des exemples d’utilisation.

      Maintenant que votre application Node.js est exécutée et gérée par PM2, mettons en place le proxy inverse.

      Étape 4 — Configurer Nginx en tant que serveur proxy inverse

      Votre application fonctionne et écoute sur localhost, mais vous devez mettre en place un moyen pour que vos utilisateurs y accèdent. Pour cela, nous allons mettre en place le serveur web Nginx comme proxy inverse.

      Dans le tutoriel inclus dans les conditions préalables, vous configurez votre Nginx dans le fichier /etc/nginx/sites available/example.com. Ouvrez ce fichier pour le modifier :

      • sudo nano /etc/nginx/sites-available/example.com

      Dans le bloc de serveurs, vous devez avoir un location/bloc existant. Remplacez le contenu de ce bloc par la configuration suivante. Si votre application est configurée pour écouter sur un port différent, mettez à jour la partie en surbrillance avec le numéro de port correct :

      /etc/nginx/sites-available/example.com

      server {
      ...
          location / {
              proxy_pass http://localhost:3000;
              proxy_http_version 1.1;
              proxy_set_header Upgrade $http_upgrade;
              proxy_set_header Connection 'upgrade';
              proxy_set_header Host $host;
              proxy_cache_bypass $http_upgrade;
          }
      ...
      }
      

      Cela permet de configurer le serveur pour qu’il réponde aux demandes à son root. En supposant que notre serveur soit disponible à l’adresse example.com, l’accès à https://example.com/ via un navigateur web enverrait la demande à hello.js, en écoute sur le port 3000 de localhost.

      Vous pouvez ajouter des blocs d’location supplémentaires au même bloc de serveur pour permettre l’accès à d’autres applications sur le même serveur. Par exemple, si vous exécutez également une autre application Node.js sur le port 3001, vous pourriez ajouter ce bloc de localisation pour y accéder via https://example.com/app2 :

      /etc/nginx/sites-available/example.com — Optional

      server {
      ...
          location /app2 {
              proxy_pass http://localhost:3001;
              proxy_http_version 1.1;
              proxy_set_header Upgrade $http_upgrade;
              proxy_set_header Connection 'upgrade';
              proxy_set_header Host $host;
              proxy_cache_bypass $http_upgrade;
          }
      ...
      }
      

      Une fois que vous avez fini d’ajouter les blocs de localisation pour vos applications, enregistrez le fichier et quittez votre éditeur.

      Assurez-vous que vous n’avez pas introduit d’erreurs de syntaxe en tapant :

      Redémarrez Nginx :

      • sudo systemctl restart nginx

      En supposant que votre application Node.js fonctionne, et que votre application et les configurations Nginx sont correctes, vous devriez maintenant pouvoir accéder à votre application via le proxy inverse Nginx. Essayez-le en accédant à l’URL de votre serveur (son adresse IP publique ou son nom de domaine).

      Conclusion

      Félicitations. Vous avez maintenant votre application Node.js fonctionnant derrière un proxy inverse Nginx sur un serveur Ubuntu 20.04. Cette configuration de proxy inverse est suffisamment souple pour permettre à vos utilisateurs d’accéder à d’autres applications ou à du contenu web statique que vous souhaitez partager.



      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

      Comment installer Django et mettre en place un environnement de développement sur Ubuntu 20.04


      Introduction

      Django est un framework web libre et open-source écrit en Python dont les principes de base sont l’extensibilité, la réutilisation et le développement rapide. Il est également connu pour sa cohérence au niveau du framework et son couplage lâche, qui permet aux différents composants d’être indépendants les uns des autres.

      Dans ce tutoriel, nous allons mettre en place un environnement Django à des fins de développement sur un serveur Ubuntu 20.04. Pour un site web en direct, vous aurez des considérations supplémentaires, notamment la connexion à une base de données, la mise en place d’un nom de domaine et l’ajout de couches de sécurité. Nous avons une variété de tutoriels sur Django qui peuvent vous aider à construire sous notre label Django.

      Conditions préalables

      Pour pouvoir suivre ce tutoriel, vous aurez besoin de :

      Étape 1 — Installation de Django

      Il existe plusieurs façons d’installer Django, le gestionnaire de packages Python pip dans un environnement virtuel.

      Dans le répertoire d’origine du serveur, nous allons créer le répertoire qui contiendra notre application Django. Exécutez la commande suivante pour créer un répertoire appelé django-apps, ou un autre nom de votre choix.  Naviguez ensuite vers le répertoire.

      • mkdir django-apps
      • cd django-apps

      Dans le répertoire django-apps, créez votre environnement virtuel. Nous l’appellerons le générique env, mais vous devez utiliser un nom qui est significatif pour vous et votre projet.

      Maintenant, activez l’environnement virtuel avec la commande suivante :

      Vous saurez qu’il est activé dès que le préfixe sera changé en (env), ce qui ressemblera à ce qui suit, selon le répertoire dans lequel vous vous trouvez :

      Dans l’environnement, installez le package Django en utilisant pip. L’installation de Django nous permet de créer et d’exécuter des applications Django.

      Une fois installé, vérifiez votre installation Django en effectuant un contrôle de version :

      Ceci, ou quelque chose similaire, sera la sortie qui en résulte :

      Output

      3.0.6

      Une fois Django installé sur votre serveur, nous pouvons passer à la création d’un projet test pour nous assurer que tout fonctionne correctement. Nous allons créer un squelette d’application web.

      Étape 2 – Ajuster les paramètres du pare-feu

      Si vous avez suivi notre tutoriel de configuration initiale du serveur ou que vous avez un pare-feu sur votre serveur, nous devrons ouvrir le port que nous utiliserons dans le pare-feu de notre serveur. Pour le pare-feu UFW, vous pouvez ouvrir le port avec la commande suivante :

      Si vous utilisez les pare-feu DigitalOcean, vous pouvez sélectionner HTTP dans les règles d’entrée. Vous pouvez en savoir plus sur les pare-feu DigitalOcean et sur la création de règles pour ceux-ci en modifiant les règles d’entrée.

      Étape 3 — Démarrage du projet

      Nous pouvons maintenant générer une application en utilisant django-admin, un utilitaire en ligne de commande pour les tâches d’administration en Python. Ensuite, nous pouvons utiliser la commande startproject pour créer la structure du répertoire projet pour notre site web test.

      Dans le répertoire django-apps, exécutez la commande suivante :

      • django-admin startproject testsite

      Remarque : L’exécution de la commande django-admin startproject <projectname> donnera au répertoire du projet et au package du projet le nom <projectname> et créera le projet dans le répertoire dans lequel la commande a été exécutée. Si le paramètre facultatif <destination> est fourni, Django utilisera le répertoire de destination fourni comme répertoire du projet, et créera le fichier manage.py et le package du projet à l’intérieur de celui-ci.

      Nous pouvons maintenant voir quels fichiers de projet viennent d’être créés. Naviguez vers le répertoire testsite puis listez le contenu de ce répertoire pour voir quels fichiers ont été créés :

      Output

      manage.py testsite

      Vous remarquerez une sortie qui montre ce répertoire contient un fichier nommé manage.py et un dossier nommé testsite. Le fichier manage.py est similaire à django-admin et place le package du projet sur sys.path. Cela permet également de faire pointer la variable d’environnement DJANGO_SETTINGS_MODULE sur le fichier settings.py de votre projet.

      Vous pouvez visualiser le script manage.py dans votre terminal en exécutant la commande less comme ceci :

      Lorsque vous avez terminé la lecture du script, appuyez sur q, pour quitter la visualisation du fichier.

      Naviguez maintenant dans le répertoire testsite pour visualiser les autres fichiers qui ont été créés :

      Exécutez ensuite la commande suivante pour lister le contenu du répertoire :

      Vous verrez quatre fichiers :

      Output

      __init__.py asgi.py settings.py urls.py wsgi.py

      Examinons la nature de chacun de ces fichiers :

      • __init__.py agit comme point d’entrée pour votre projet Python.
      • asgi.py contient la configuration pour le déploiement optionnel à l’Asynchronous Server Gateway Interface ou ASGI, qui fournit un standard pour les applications qui sont soit synchrones soit asynchrones, et est considéré comme un successeur du WSGI (voir ci-dessous).
      • settings.py décrit la configuration de votre installation Django et permet à Django de connaître les paramètres disponibles.
      • urls.py contient une liste d’urlpatterns, qui dirige et fait correspondre les URL à leurs vues.
      • wsgi.py contient la configuration de la Web Server Gateway Interface ou WSGI, qui fournit un standard pour les applications Python synchrones.

      Remarque : Bien que les fichiers par défaut soient générés, vous avez encore la possibilité de modifier les fichiers asgi.py ou wsgi.py à tout moment pour répondre à vos besoins de déploiement.

      Étape 4 — Configuration de Django

      Nous pouvons maintenant démarrer le serveur et visualiser le site web sur un hôte et un port désignés en exécutant la commande runserver.

      Nous devrons ajouter l’adresse ip de votre serveur à la liste des ALLOWED_HOSTS dans le fichier settings.py situé dans ~/test_django_app/testsite/testsite/.

      Comme indiqué dans la documentations de Django, la variable ALLOWED_HOSTS contient « une liste des chaînes de caractères représentant les noms d’hôtes/domaines que ce site Django peut servir. Il s’agit d’une mesure de sécurité pour prévenir les attaques d’en-tête HTTP Host, qui sont possibles même dans de nombreuses configurations de serveurs web apparemment sûres. »

      Vous pouvez utiliser votre éditeur de texte préféré pour ajouter votre adresse IP. Par exemple, si vous utilisez nano, exécutez la commande suivante :

      • nano ~/django-apps/testsite/testsite/settings.py

      Une fois la commande exécutée, vous devrez vous rendre dans la section “Allowed Host du document et ajouter l’adresse IP de votre serveur entre des crochets, dans des guillemets simples ou doubles.

      settings.py

      """
      Django settings for testsite project.
      
      Generated by 'django-admin startproject' using Django 2.0.
      ...
      """
      ...
      # SECURITY WARNING: don't run with debug turned on in production!
      DEBUG = True
      
      # Edit the line below with your server IP address
      ALLOWED_HOSTS = ['your-server-ip']
      ...
      

      Vous pouvez enregistrer la modification et quitter nano en appuyant sur la touche CTRL + x, puis sur la touche y. Ensuite, nous allons accéder à notre application web via un navigateur.

      Enfin, créons un utilisateur administratif afin de pouvoir utiliser l’interface d’admin de Djano. Pour le faire, utilisons la commande createsuperuser.

      • python manage.py createsuperuser

      Vous serez invité à saisir le nom d’utilisateur, l’adresse électronique et le mot de passe de votre utilisateur.

      Étape 5 — Accès à l’application web Django

      Une fois notre configuration terminée, assurez-vous de revenir au répertoire où se trouve manage.py :

      • cd ~/django-apps/testsite/

      Maintenant, exécutez la commande suivante en remplaçant le texte your-server-ip par l’IP de votre serveur :

      • python manage.py runserver 0.0.0.0:8000

      Enfin, vous pouvez naviguer vers le lien ci-dessous pour voir à quoi ressemble votre squelette de site web, en remplaçant à nouveau le texte en surbrillance par l’IP réelle de votre serveur :

      http://your-server-ip:8000/
      

      Une fois la page chargée, vous verrez ce qui suit :

      Page par défaut de Django

      Cela confirme que Django a été correctement installé et notre projet test fonctionne correctement.

      Pour accéder à l’interface d’administration, ajoutez /admin/ à la fin de votre URL :

      http://your_server_ip:8000/admin/
      

      Cela vous amènera à un écran de connexion :

      Connexion à l'interface d'administration de Django

      Si vous entrez le nom d’utilisateur et le mot de passe admin que vous venez de créer, vous aurez accès à la section admin principale du site :

      Page d'administration de Django

      Pour plus d’informations sur l’utilisation de l’interface d’administration de Django, veuillez consulter la section Comment activer et connecter l’interface d’administration de Django.

      Lorsque vous avez fini de tester votre application, vous pouvez appuyer sur CTRL + C pour arrêter la commande runserver​​​. Cela vous renverra à votre environnement de programmation.

      Lorsque vous êtes prêt à quitter votre environnement Python, vous pouvez exécuter la commande deactivate :

      La désactivation de votre environnement de programmation vous ramènera à l’invite de commande du terminal.

      Conclusion

      Dans ce tutoriel, vous avez réussi à installer Django et à mettre en place un environnement de développement pour commencer à travailler sur votre application Django.

      Vous disposez maintenant des bases nécessaires pour commencer à construire des applications web Django.



      Source link