เรายกตัวอย่าง Webogram ของเราด้วยการพร็อกซีผ่าน nginx

เฮ้ ฮับ!

เมื่อเร็ว ๆ นี้ฉันพบว่าตัวเองอยู่ในสถานการณ์ที่จำเป็นต้องทำงานภายในเครือข่ายองค์กรที่มีการเข้าถึงอินเทอร์เน็ตไม่สมบูรณ์และอย่างที่คุณเดาได้จากชื่อ Telegram ถูกบล็อกอยู่ในนั้น ฉันแน่ใจว่าสถานการณ์นี้คุ้นเคยกับหลาย ๆ คน

ฉันสามารถทำได้โดยไม่ต้องใช้ผู้ส่งข้อความด่วน แต่เป็น Telegram ที่ฉันต้องการในการทำงาน ไม่สามารถติดตั้งไคลเอนต์บนเครื่องทำงาน และไม่สามารถใช้แล็ปท็อปส่วนตัวได้ วิธีแก้ปัญหาอื่นดูเหมือนว่าจะใช้มัน เวอร์ชันเว็บอย่างเป็นทางการแต่อย่างที่คุณเดาได้ มันก็ไม่พร้อมใช้งานเช่นกัน ฉันขีดฆ่าตัวเลือกในการค้นหากระจกที่ไม่เป็นทางการทันที (ฉันหวังว่าจะมีเหตุผลที่ชัดเจน)

โชคดีที่ Webogram เป็นโครงการโอเพ่นซอร์สซึ่งมีซอร์สโค้ดอยู่ในนั้น GitHub ผู้เขียน (ซึ่งต้องขอบคุณเขามาก!)
การติดตั้งและเปิดใช้งานนั้นไม่ใช่เรื่องยาก อย่างไรก็ตาม ในเงื่อนไขของการทำงานภายในเครือข่ายที่ถูกบล็อกการเข้าถึงเซิร์ฟเวอร์ Telegram คุณจะผิดหวังมากกว่าประสบความสำเร็จ เนื่องจากเวอร์ชันเว็บส่งคำขอไปยังเซิร์ฟเวอร์ Telegram จากเครื่องของผู้ใช้

โชคดีที่นี่เป็นการแก้ไขที่ค่อนข้างง่าย (แต่ไม่ชัดเจนมาก) ฉันขอเตือนคุณว่าฉันไม่ใช่ผู้เขียนโซลูชันนี้ ฉันจัดการเพื่อค้นหามันใน สาขาซึ่งพูดถึงปัญหาที่คล้ายกับของฉัน วิธีแก้ปัญหาที่แนะนำโดยผู้ใช้ github เทคโนจ็อคมันช่วยฉันได้มาก แต่ฉันแน่ใจว่ามันสามารถช่วยคนอื่นได้ ดังนั้นฉันจึงตัดสินใจเขียนบทช่วยสอนนี้

ด้านล่างของการตัดคุณจะพบการตั้งค่ามิเรอร์ Webogram ของคุณทีละขั้นตอนและการตั้งค่าพร็อกซีคำขอไปยังเซิร์ฟเวอร์ Telegram โดยใช้ nginx

ตามตัวอย่าง ฉันเลือก Ubuntu Server 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

เราเลือกสถานที่ที่จะใช้ Webogram ของเรา

ตัวอย่างเช่น วางไว้ที่รากของโฮมไดเร็กตอรี่ ในการดำเนินการนี้ ให้โคลนพื้นที่เก็บข้อมูลอย่างเป็นทางการไปยังเซิร์ฟเวอร์ของเรา:

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

เนื่องจากเราจะตั้งค่าการเข้าถึง Webogram ของเราผ่าน 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 ตอบสนอง
• เราปิดตำแหน่งรูทโดยใช้การตรวจสอบสิทธิ์แบบพื้นฐาน นี่เป็นขั้นตอนเชิงสัญลักษณ์เพียงอย่างเดียวในการปิดแอปพลิเคชันของเราจากการสอดรู้สอดเห็นและบอท (และเพื่อหลีกเลี่ยงปัญหาเรื่องการบล็อคด้วย)
• ตำแหน่งจำนวนมากที่มี proxy_path บนเซิร์ฟเวอร์ Telegram เป็นจุดสิ้นสุดของเราอย่างแน่นอนซึ่งเราจะใช้พร็อกซีคำขอของเรา

เรามาสร้างไฟล์กัน /etc/nginx/passwd.htpasswd;เพื่อให้ nginx มีบางสิ่งที่ต้องตรวจสอบรหัสผ่านผู้ใช้ด้วย

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

รีสตาร์ท 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 <[email protected]>
 * 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 แล้ว

ฉันหวังว่าบทช่วยสอนนี้จะเป็นประโยชน์กับคนอื่นนอกเหนือจากฉัน

ขอบคุณมากสำหรับทุกคนที่อ่านจนจบ

หากใครมีปัญหาหรือผมทำผิดประการใดผมยินดีตอบและพยายามช่วยเหลือในความคิดเห็นหรือ PM ครับ

ที่มา: will.com