ProHoster > Blog > Administration > Nous lançons notre instance Webogram avec proxy via nginx.

Nous lançons notre instance Webogram avec proxy via nginx.

Salut, Habr !

Récemment, je me suis retrouvé dans une situation où je devais travailler au sein d'un réseau d'entreprise avec un accès Internet limité et, comme vous pouvez l'imaginer d'après le titre, Telegram y était bloqué. Je suis sûr que cette situation est familière à beaucoup.

Je peux me passer des applications de messagerie, mais j'avais vraiment besoin de Telegram pour le travail. Installer le client sur la machine de travail n'était pas possible, et utiliser mon ordinateur portable personnel non plus. Une autre solution serait d'utiliser sa version web officielle, mais comme vous pouvez l'imaginer, celle-ci était également inaccessible. L'option de recherche d'un miroir non officiel, je l'ai immédiatement rayée (j'espère pour des raisons évidentes).

Heureusement, Webogram est un projet open source, dont le code source est accessible dans github son dépôt (un grand merci à lui !)
L'installation et le lancement ne sont pas compliqués, cependant, dans un réseau avec un accès bloqué aux serveurs de Telegram, vous risquez plus de déception que de succès, car la version web envoie des requêtes aux serveurs de Telegram depuis la machine de l'utilisateur.

Heureusement, il est assez simple (mais pas très évident) de corriger cela. Je tiens à prévenir que je ne suis pas l'auteur de cette solution. J'ai réussi à la trouver dans un fil, où un problème similaire au mien était discuté. La solution proposée par l'utilisateur github tecknojock, m'a beaucoup aidé, mais je suis sûr qu'elle peut également aider d'autres, c'est pourquoi j'ai décidé d'écrire ce tutoriel.

Sous cet article, vous trouverez un guide étape par étape pour configurer votre propre miroir Webogram et configurer le proxy de ses requêtes vers les serveurs de Telegram en utilisant nginx.

Pour l'exemple, j'ai choisi une installation fraîche et mise à jour d'Ubuntu Server 18.04.3.

Attention : Ce tutoriel ne contiendra pas d'instructions sur la configuration de domaine dans nginx. Cela doit être fait par vos soins. Le tutoriel suppose que vous avez déjà un domaine configuré avec SSL, et que le serveur sur lequel vous prévoyez la configuration a accès aux serveurs de Telegram (quel que soit le moyen que vous choisissez)

Supposons que l'IP de ce serveur soit 10.23.0.3, et que le nom de domaine soit mywebogram.localhost.

En me basant sur ces hypothèses, je vais donner des exemples de configurations. N'oubliez pas de remplacer les valeurs par les vôtres.

Alors, commençons :

Pour lancer Webogram, nous avons besoin de nodejs. Par défaut, si on l'installe à partir des dépôts Ubuntu, nous obtiendrons nodejs version 8.x. Nous avons besoin de la version 12.x :

curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash - 
sudo apt update && sudo apt -y install nodejs

Choisissons un emplacement où notre Webogram sera hébergé.

Pour l'exemple, plaçons-le à la racine de notre répertoire personnel. Pour cela, clonons le dépôt officiel sur notre serveur :

cd ~ && git clone https://github.com/zhukov/webogram.git

L'étape suivante consiste à installer toutes les dépendances nécessaires au lancement de l'application :

cd webogram && npm install

Essayons d'effectuer un lancement test. Exécutez la commande :

Voilà, c'est tout. Maintenant l'application React est lancée, vous pouvez y accéder en ouvrant votre navigateur à l'adresse

Ensuite, essayez d'ouvrir dans le navigateur

 http://10.23.0.3:8000/app/index.html

Si vous avez tout fait correctement jusqu'à présent, la page de connexion de Webogram devrait s'ouvrir.

Nous devons maintenant configurer le lancement de l'application en tant que service. Pour cela, créons un fichier

sudo touch /lib/systemd/system/webogram.service

ouvrons-le dans n'importe quel éditeur et lui donnons la forme suivante (en inscrivant votre chemin jusqu'à WorkDirectory)

[Unit]
Description=Webogram mirror
[Service]
WorkingDirectory=/home/tg/webogram
ExecStart=/usr/bin/npm start
SuccessExitStatus=143
TimeoutStopSec=10
Restart=on-failure
RestartSec=5
[Install]
WantedBy=multi-user.target

Après cela, exécutons les commandes suivantes :

Appliquons les modifications

sudo systemctl daemon-reload

Activons le démarrage automatique :

sudo systemctl enable webogram.service

sudo systemctl start lxd

sudo systemctl start webogram.service

Après ces actions, Webogram sera disponible sur le port 8000.

Étant donné que nous allons configurer l'accès à notre Webogram via nginx, nous allons fermer le port 8000 pour les requêtes externes.

Utilisons pour cela l'outil udf (ou tout autre moyen qui vous convient) :

sudo ufw deny 8000

Au cas où vous décideriez d'utiliser udf mais qu'il soit désactivé sur le serveur, ajoutons encore quelques règles (pour que tout ne s'effondre pas) et activons udf :

sudo ufw allow ssh
sudo ufw allow 80
sudo ufw allow 443
sudo ufw enable

Ensuite, poursuivons avec la modification de la configuration de nginx.

Comme je l'ai mentionné précédemment, il est supposé que votre serveur a déjà un domaine configuré avec ssl. Je tiens simplement à attirer votre attention sur le fait qu'il faudra ajouter dans le fichier de configuration du domaine pour un fonctionnement correct :


serveur {
...
  emplacement ^~ /pluto/apiw1/ {
    proxy_pass https://pluto.web.telegram.org/apiw1/;
  }
  emplacement ^~ /venus/apiw1/ {
    proxy_pass https://venus.web.telegram.org/apiw1/;
  }
  emplacement ^~ /aurora/apiw1/ {
    proxy_pass https://aurora.web.telegram.org/apiw1/;
  }
  emplacement ^~ /vesta/apiw1/ {
    proxy_pass https://vesta.web.telegram.org/apiw1/;
  }
  emplacement ^~ /flora/apiw1/ {
    proxy_pass https://flora.web.telegram.org/apiw1/;
  }
  emplacement ^~ /pluto-1/apiw1/ {
    proxy_pass https://pluto-1.web.telegram.org/apiw1/;
  }
  emplacement ^~ /venus-1/apiw1/ {
    proxy_pass https://venus-1.web.telegram.org/apiw1/;
  }
  emplacement ^~ /aurora-1/apiw1/ {
    proxy_pass https://aurora-1.web.telegram.org/apiw1/;
  }
  emplacement ^~ /vesta-1/apiw1/ {
    proxy_pass https://vesta-1.web.telegram.org/apiw1/;
  }
  emplacement ^~ /flora-1/apiw1/ {
    proxy_pass https://flora-1.web.telegram.org/apiw1/;
  }
  emplacement ^~ /DC1/ {
    proxy_pass http://149.154.175.10:80/;
  }
  emplacement ^~ /DC2/ {
    proxy_pass http://149.154.167.40:80/;
  }
  emplacement ^~ /DC3/ {
    proxy_pass http://149.154.175.117:80/;
  }
  emplacement ^~ /DC4/ {
    proxy_pass http://149.154.175.50:80/;
  }
  emplacement ^~ /DC5/ {
    proxy_pass http://149.154.167.51:80/;
  }
  emplacement ^~ /DC6/ {
    proxy_pass http://149.154.175.100:80/;
  }
  emplacement ^~ /DC7/ {
    proxy_pass http://149.154.167.91:80/;
  }
  emplacement ^~ /DC8/ {
    proxy_pass http://149.154.171.5:80/;
  }
  emplacement / {
    auth_basic "tg";
    auth_basic_user_file /etc/nginx/passwd.htpasswd;
    proxy_pass http://localhost:8000/;
    proxy_read_timeout 90s;
    proxy_connect_timeout 90s;
    proxy_send_timeout 90s;
    proxy_set_header Host $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $remote_addr;
  }
}

Ce que nous ajoutons dans la configuration nginx :

  • Nous modifions l'emplacement racine, qui va passer les requêtes au port 8000, utilisé par Webogram.
  • Nous sécurisons l'emplacement racine avec une authentification basique. C'est une mesure symbolique pour protéger notre application des regards indiscrets et des bots. (C'est aussi pour éviter les problèmes de blocage.)
  • Les nombreux emplacements avec proxy_pass vers les serveurs Telegram sont nos points de terminaison, par lesquels nous allons passer nos requêtes.

Nous allons également créer un fichier /etc/nginx/passwd.htpasswd;, permettant à nginx de vérifier les mots de passe des utilisateurs.

sudo apt install apache2-utils
sudo htpasswd -c /etc/nginx/passwd.htpasswd tg

Nous lançons notre instance Webogram avec proxy via nginx.

Nous redémarrons nginx :

sudo systemctl restart nginx

Maintenant, Webogram ne sera accessible qu'à l'adresse mywebogram.localhost/app/index.html après avoir saisi le nom d'utilisateur et le mot de passe que vous avez définis lors de la commande htpasswd.

Il reste un peu à faire : apportons quelques modifications au projet lui-même.

Ouvrez dans l'éditeur le fichier ~/webogram/app/js/lib/mtproto.js

et modifiez son début comme suit :

/*!
 * Webogram v0.7.0 - messaging web application for MTProto
 * https://github.com/zhukov/webogram
 * Copyright (C) 2014 Igor Zhukov <igor.beatle@gmail.com>
 * https://github.com/zhukov/webogram/blob/master/LICENSE
 */

angular.module('izhukov.mtproto', ['izhukov.utils'])

  .factory('MtpDcConfigurator', function () {
    var sslSubdomains = ['pluto', 'venus', 'aurora', 'vesta', 'flora']

    var dcOptions = Config.Modes.test
      ? [
        {id: 1, host: 'mywebogram.localhost/DC1',  port: 80},
        {id: 2, host: 'mywebogram.localhost/DC2',  port: 80},
        {id: 3, host: 'mywebogram.localhost/DC3', port: 80}
      ]
      : [
        {id: 1, host: 'mywebogram.localhost/DC4',  port: 80},
        {id: 2, host: 'mywebogram.localhost/DC5',  port: 80},
        {id: 3, host: 'mywebogram.localhost/DC6', port: 80},
        {id: 4, host: 'mywebogram.localhost/DC7',  port: 80},
        {id: 5, host: 'mywebogram.localhost/DC8',   port: 80}
      ]

    var chosenServers = {}

    function chooseServer (dcID, upload) {
      if (chosenServers[dcID] === undefined) {
        var chosenServer = false,
          i, dcOption

        if (Config.Modes.ssl || !Config.Modes.http) {
          var subdomain = sslSubdomains[dcID - 1] + (upload ? '-1' : '')
          var path = Config.Modes.test ? 'apiw_test1' : '/apiw1/'
          chosenServer = 'https://mywebogram.localhost/' + subdomain + path
          return chosenServer
        }
       for (i = 0; i < dcOptions.length; i++) {
          dcOption = dcOptions[i]
          if (dcOption.id == dcID) {
            chosenServer = 'http://' + dcOption.host + '/apiw1'
            break
          }
        }
        chosenServers[dcID] = chosenServer
      }
...

Après cela, vous devez actualiser la page de l'application dans le navigateur.

Ouvrez la console du navigateur et vérifiez les requêtes réseau de l'application. Si tout fonctionne et que les requêtes XHR vont vers votre serveur, cela signifie que tout a été fait correctement et que Webogram est maintenant passé par nginx.

Nous lançons notre instance Webogram avec proxy via nginx.

J'espère que ce tutoriel sera utile à d'autres personnes en plus de moi.

Un grand merci à tous ceux qui ont lu jusqu'au bout.

Si quelqu'un a des difficultés ou si j'ai commis des erreurs, je me ferai un plaisir de répondre et d'essayer de vous aider dans les commentaires ou en message privé.

Source : habr.com

Acheter un hébergement fiable pour les sites avec protection DDoS, serveurs VPS VDS 🔥 Acheter un hébergement fiable pour les sites avec protection DDoS, serveurs VPS VDS | ProHoster