🥇Բարձրացնելով ձեր սեփական վեբոգրամի օրինակը proxying-ի միջոցով nginx

Հե՜յ Հաբր։

Վերջերս ես հայտնվեցի մի իրավիճակում, երբ ստիպված էի աշխատել կորպորատիվ ցանցում, որն ունի ինտերնետ սահմանափակ հասանելիություն, և, ինչպես կարող եք կռահել վերնագրից, Telegram-ը արգելափակված էր այնտեղ: Վստահ եմ, որ այս իրավիճակը ծանոթ է շատերին։

Ես կարող եմ առանց ակնթարթային մեսենջերների, բայց աշխատանքի համար ինձ անհրաժեշտ էր Telegram-ը: Հնարավոր չէր հաճախորդը տեղադրել աշխատանքային մեքենայի վրա, հնարավոր չէր նաև օգտագործել անձնական նոութբուք: Մեկ այլ լուծում, կարծես, այն օգտագործելն է պաշտոնական վեբ տարբերակը, բայց ինչպես կարող եք կռահել, այն նույնպես անհասանելի էր։ Անմիջապես խաչում եմ ոչ պաշտոնական հայելի փնտրելու տարբերակը (հուսով եմ՝ հասկանալի պատճառներով):

Բարեբախտաբար, Webogram-ը բաց կոդով նախագիծ է, որի սկզբնական կոդը հասանելի է այստեղ GitHub դրա հեղինակը (որի համար ես շատ շնորհակալ եմ նրան!)
Ինքնին տեղադրումն ու գործարկումը դժվար չէ, սակայն, եթե այն օգտագործում եք ցանցի ներսում՝ արգելափակված մուտքով դեպի Telegram սերվերներ, ամենայն հավանականությամբ կզգաք հիասթափություն, քան հաջողություն, քանի որ վեբ տարբերակը օգտատիրոջ մեքենայից հարցումներ է ուղարկում Telegram սերվերներին:

Բարեբախտաբար, սա բավականին պարզ (բայց ոչ շատ ակնհայտ) ուղղում է: Ուզում եմ զգուշացնել, որ ես չեմ այս որոշման հեղինակը։ Ինձ հաջողվեց գտնել այն մասնաճյուղ, որը քննարկել է իմ նման խնդիր: Լուծումն առաջարկվել է github օգտվողի կողմից տեկնոջոկ, դա ինձ շատ օգնեց, այնուամենայնիվ, վստահ եմ, որ դա կարող է օգնել մեկ ուրիշին, ուստի որոշեցի գրել այս ձեռնարկը։

Ստորև դուք կգտնեք քայլ առ քայլ ուղեցույց՝ ձեր Webogram հայելին կարգավորելու և նրա հարցումների պրոքսինգը կարգավորելու համար Telegram սերվերներին՝ օգտագործելով nginx:

Որպես օրինակ ես ընտրեցի նոր տեղադրված և թարմացված մեկը Ubuntu Սերվեր 18.04.3:

Նշում: Այս ձեռնարկը չի ներառի հրահանգներ nginx-ում տիրույթ ստեղծելու վերաբերյալ: Դա պետք է արվի ինքնուրույն: Ձեռնարկը ենթադրում է, որ դուք արդեն ունեք SSL կազմաձևված տիրույթ, և այն սերվերը, որի վրա նախատեսում եք կարգավորել այն, հասանելի է Telegram սերվերներին (ցանկացած ձևով, որը ցանկանում եք):

Ենթադրենք, որ այս սերվերի IP-ն 10.23.0.3 է, իսկ դոմենի անունը՝ mywebogram.localhost:

Այս կոնվենցիաների հիման վրա ես կտամ կոնֆիգուրացիաների օրինակներ: Մի մոռացեք փոխել արժեքները ձեր սեփականը:

Այսպիսով, եկեք սկսենք.

Webogram-ը գործարկելու համար մեզ անհրաժեշտ է nodejs: Ըստ լռելյայնի, եթե այն տեղադրեք պահոցներից Ubuntu — մենք կստանանք nodejs-ի 8.x տարբերակը։ Մեզ անհրաժեշտ է 12.x տարբերակը։

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

Մենք ընտրում ենք այն վայրը, որտեղ կհիմնվի մեր Վեբոգրամը:

Օրինակ, եկեք այն տեղադրենք հիմնական գրացուցակի արմատում: Դա անելու համար մենք կլոնավորում ենք պաշտոնական պահոցը մեր սերվերում.

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

Հաջորդ քայլը հավելվածը գործարկելու համար անհրաժեշտ բոլոր կախվածությունները տեղադրելն է.

cd webogram && npm install

Փորձենք կատարել թեստային վազք։ Գործարկեք հրամանը.

npm start

Դրանից հետո մենք փորձում ենք այն բացել բրաուզերում

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

Եթե մինչ այս պահը ամեն ինչ ճիշտ եք արել, կբացվի Webogram-ի թույլտվության էջը:

Այժմ մենք պետք է կարգավորենք հավելվածը, որպեսզի այն աշխատի որպես ծառայություն: Դա անելու համար մենք կստեղծենք ֆայլ

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

բացեք այն ցանկացած խմբագրիչում և տվեք հետևյալ տեսքը (մուտքագրեք ձեր ճանապարհը դեպի 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

Դրանից հետո մենք կատարում ենք հետևյալ հրամանները.

Փոփոխությունների կիրառում

sudo systemctl daemon-reload

Միացնել ավտոմատ մեկնարկը՝

sudo systemctl enable webogram.service

Սկսենք ծառայությունը.

sudo systemctl start webogram.service

Այս քայլերն ավարտելուց հետո Webogram-ը կշարունակի հասանելի լինել 8000 նավահանգստում:

Քանի որ մենք կկարգավորենք մուտքը դեպի մեր Վեբոգրամ nginx-ի միջոցով, մենք կփակենք 8000 նավահանգիստը դրսից ստացվող հարցումների համար:

Մենք դրա համար օգտագործում ենք udf կոմունալ ծրագիրը (կամ ձեզ հարմար որևէ մեթոդ).

sudo ufw deny 8000

Եթե դուք դեռ որոշել եք օգտագործել udf, բայց այն անջատված է սերվերում, ավելացրեք ավելի շատ կանոններ (որպեսզի ամեն ինչ չփլվի) և միացրեք udf-ը.

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

Հաջորդը, եկեք շարունակենք փոխել nginx կոնֆիգուրացիան:

Ինչպես վերևում նախազգուշացրի, ենթադրվում է, որ ձեր սերվերն արդեն ունի SSL կազմաձևված տիրույթ: Ես միայն ձեր ուշադրությունը կհրավիրեմ այն բանի վրա, թե ինչ պետք է ավելացվի տիրույթի կազմաձևման ֆայլին՝ ճիշտ աշխատանքի համար.


server {
...
  location ^~ /pluto/apiw1/ {
    proxy_pass https://pluto.web.telegram.org/apiw1/;
  }
  location ^~ /venus/apiw1/ {
    proxy_pass https://venus.web.telegram.org/apiw1/;
  }
  location ^~ /aurora/apiw1/ {
    proxy_pass https://aurora.web.telegram.org/apiw1/;
  }
  location ^~ /vesta/apiw1/ {
    proxy_pass https://vesta.web.telegram.org/apiw1/;
  }
  location ^~ /flora/apiw1/ {
    proxy_pass https://flora.web.telegram.org/apiw1/;
  }
  location ^~ /pluto-1/apiw1/ {
    proxy_pass https://pluto-1.web.telegram.org/apiw1/;
  }
  location ^~ /venus-1/apiw1/ {
    proxy_pass https://venus-1.web.telegram.org/apiw1/;
  }
  location ^~ /aurora-1/apiw1/ {
    proxy_pass https://aurora-1.web.telegram.org/apiw1/;
  }
  location ^~ /vesta-1/apiw1/ {
    proxy_pass https://vesta-1.web.telegram.org/apiw1/;
  }
  location ^~ /flora-1/apiw1/ {
    proxy_pass https://flora-1.web.telegram.org/apiw1/;
  }
  location ^~ /DC1/ {
    proxy_pass http://149.154.175.10:80/;
  }
  location ^~ /DC2/ {
    proxy_pass http://149.154.167.40:80/;
  }
  location ^~ /DC3/ {
    proxy_pass http://149.154.175.117:80/;
  }
  location ^~ /DC4/ {
    proxy_pass http://149.154.175.50:80/;
  }
  location ^~ /DC5/ {
    proxy_pass http://149.154.167.51:80/;
  }
  location ^~ /DC6/ {
    proxy_pass http://149.154.175.100:80/;
  }
  location ^~ /DC7/ {
    proxy_pass http://149.154.167.91:80/;
  }
  location ^~ /DC8/ {
    proxy_pass http://149.154.171.5:80/;
  }
 location / {
    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;
  }
}

Այն, ինչ մենք ավելացնում ենք nginx կազմաձևում.

Մենք փոխում ենք արմատի գտնվելու վայրը, որը պրոքսիի հարցումներ կուղարկի 8000 պորտին, որին պատասխանում է Webogram-ը
Մենք փակում ենք արմատային տեղը՝ օգտագործելով basic-auth: Սա զուտ խորհրդանշական քայլ է՝ փակելու մեր հավելվածը հետաքրքրասեր աչքերից և բոտերից։ (Եվ նաև այնպես, որ արգելափակման հետ կապված խնդիրներ չլինեն)
Proxy_path-ով դեպի Telegram սերվերների մի խումբ վայրեր մեր վերջնակետերն են, որոնց միջոցով մենք կփոխանցենք մեր հարցումները:

Բացի այդ, եկեք ստեղծենք ֆայլ /etc/nginx/passwd.htpasswd;, այնպես, որ nginx-ը օգտագործողի գաղտնաբառերը համեմատելու բան ունի:

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

Բարձրացնել ձեր սեփական Webogram-ի օրինակը պրոքսիով nginx-ի միջոցով

Վերագործարկեք nginx:

sudo systemctl restart nginx

Webogram-ն այժմ հասանելի կլինի միայն հասցեով mywebogram.localhost/app/index.html htpasswd հրամանը ստեղծելիս սահմանած մուտքի և գաղտնաբառը մուտքագրելուց հետո:

Քիչ է մնացել. եկեք մի քանի փոքր փոփոխություններ կատարենք հենց նախագծում:

Բացեք ֆայլը խմբագրիչում ~/webogram/app/js/lib/mtproto.js

Եվ դրա սկիզբը բերեք հետևյալ ձևին.

/*!
 * 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
      }
...

Դրանից հետո դուք պետք է թարմացնեք էջը հավելվածով բրաուզերում:

Բացեք ձեր բրաուզերի վահանակը և դիտեք հավելվածի ցանցային հարցումները: Եթե ամեն ինչ աշխատում է, և XHR հարցումները գնում են ձեր սերվեր, ապա ամեն ինչ ճիշտ է արված, և Webogram-ն այժմ պրոքսիված է nginx-ի միջոցով:

Բարձրացնել ձեր սեփական Webogram-ի օրինակը պրոքսիով nginx-ի միջոցով

Հուսով եմ, որ այս ձեռնարկը ինձնից բացի օգտակար կլինի մեկ ուրիշի համար:

Շատ շնորհակալ եմ բոլորին, ովքեր կարդացել են մինչև վերջ։

Եթե որևէ մեկը որևէ դժվարություն ունի կամ ես որևէ անճշտություն եմ թույլ տվել, սիրով կպատասխանեմ և կփորձեմ օգնել ձեզ մեկնաբանություններում կամ PM-ում։

Source: www.habr.com