誰說前端不須要懂-Nginx反向代理與負載均衡

學到老活到老

前端圈一直很新，一直要不停的學習，並且在進入大廠的路上，還要求熟悉一門後臺語言等等。用一句別人開玩笑的話來講，java十年前的技術如今還能用，而前端的技術就不是這樣的了

忽然想起了deno項目發佈的時候，一個搞笑的issue，「求別更新了，老子學不動了」。雖然看起來是一個玩笑的issue，但卻道出了前端們不得不表現出來的疲態，知識點愈來愈龐大，學習的內容愈來愈多

也聽到一些朋友們說，換成如今再面試阿里，恐怕很差進了啊。固然不少都是隨便一說的玩笑話，聽過一笑即可，沒必要當真，也沒必要抱怨了

好了，今天就直接來講一下主題吧，前端要了解一些運維的Nginx用法，內容很少，簡單看看就好，這兩個功能在工做當中就夠用了，那麼首先來看個問題，什麼是反向代理與負載均衡

什麼是反向代理與負載均衡

什麼是反向代理

當咱們有一個服務器集羣，而且服務器集羣中的每臺服務器的內容同樣的時候，一樣咱們要直接從我的電腦訪問到服務器集羣服務器的時候沒法訪問，必須經過第三方服務器才能訪問集羣

這個時候，咱們經過第三方服務器訪問服務器集羣的內容，可是咱們並不知道是哪一臺服務器提供的內容，此種代理方式稱爲反向代理

什麼是負載均衡

公司會創建不少的服務器，這些服務器組成了服務器集羣，而後，當用戶訪問網站的時候，先訪問一箇中間服務器，再讓這個中間服務器在服務器集羣中選擇一個壓力較小的服務器，而後將該訪問請求引入選擇的服務器

因此，用戶每次訪問，都會保證服務器集羣中的每一個服務器壓力趨於平衡，分擔了服務器壓力，避免了服務器崩潰的狀況

一句話：nginx會給你分配服務器壓力小的去訪問

Nginx反向代理與負載均衡的實現

用戶訪問網站的時候首先會訪問nginx服務器，而後nginx服務器再從服務器集羣中選擇壓力較小的服務器，將該訪問請求引向該服務器

nginx配置

下面修改配置方面我就從mac系統下來進行簡單的演示，如何安裝的話也暫以mac爲主了，windows系統直接去Nginx官網下載安裝便可

安裝nginx
    1-進到homebrew官網，而後複製命令，預安裝須要的東西
    2-brew install nginx    安裝nginx
    3-nginx -v  顯示版本號
進入nginx
    cd /usr/local/etc/nginx
複製代碼

下圖爲進入nginx文件夾下的文件內容

當進到這個目錄下，咱們就能夠操做nginx了，接下來就列舉一些很是很是有用的命令，多敲幾遍，必定要記住

nginx經常使用命令

• 啓動nginx
  • nginx
  • 當你敲完nginx這5個鍵的時候，並無任何反應，此時你只需訪問localhost:8080(默認)便可

• 關閉nginx
  • 若是出現下圖狀況，不要驚慌，是由於以前nginx被啓動過了
  • 只需nginx -s stop，中止nginx服務
  • 而後再次啓動nginx便可

• 重啓nginx
  • nginx -s reload
  • 每次修改完.conf文件就須要重啓nginx
• 檢查配置
  • 檢查修改的nginx.conf配置是否正確
  • nginx -t
  • 若是出現下面ok和successfull就表明正確了，其餘的都不對

  nginx: the configuration file /usr/local/etc/nginx/nginx.conf syntax is ok
   nginx: configuration file /usr/local/etc/nginx/nginx.conf test is successful
  複製代碼

對於咱們前端來講正常工做當中，卻是不須要過多的修改nginx的。咱們之因此修改nginx配置，是爲了作一些反向代理罷了

proxy_pass

nginx反向代理主要經過proxy_pass來配置，將你項目的開發機地址填寫到proxy_pass後面，正常的格式爲proxy_pass URL便可

server {
    listen 80;
    location / {
        proxy_pass http://10.10.10.10:20186;
    }
}
複製代碼

Upstream模塊實現負載均衡

• ip_hash指令
• server指令
• upstream指令及相關變量

上面寫的三個指令，咱們直接經過代碼來一一分析

// 修改nginx.conf
worker_processes 1;
events {
    worker_connections 1024;
}
http {
    upstream firstdemo {
        server 39.106.145.33;
        server 47.93.6.93;
    }
    server {
        listen 8080;
        location / {
            proxy_pass http://firstdemo;
        }
    }
}
複製代碼

上面修改的nginx.conf就是上圖中花圈的那個文件，nginx配置的主要修改就在這裏。化繁爲簡，把本來nginx.conf裏的內容直接替換爲上面的不到20行的代碼了

既然不到20行，那就把裏面對應的內容通通解釋一下吧，有個瞭解就好

• worker_processes
  • 工做進程數，和CPU核數相同
• worker_connections
  • 每一個進程容許的最大鏈接數
• upstream模塊
  • 負載均衡就靠它
  • 語法格式：upstream name {}
  • 裏面寫的兩個server分別對應着不一樣的服務器
• server模塊
  • 實現反向代理
  • listen監督端口號
  • location / {}訪問根路徑
  • proxy_pass http://firstdemo，代理到firstdemo裏兩個服務器上

上面修改了nginx.conf以後，別忘了最重要的一步重啓nginx

那麼再次訪問localhost:8080，會看到以下圖頁面

還有另外一個頁面

每次刷新都會訪問不一樣的服務器，這樣就作到了 負載均衡處理

不過，更應該作到的是當用戶第一次訪問到其中一臺服務器後，下次再訪問的時候就直接訪問該臺服務器就行了，不用總變化了。那麼就發揮了ip_hash的威力了

// 省略...
    upstream firstdemo {
        ip_hash;
        server 39.106.145.33;
        server 47.93.6.93;
    }
複製代碼

ip_hash它的做用是若是第一次訪問該服務器後就記錄，以後再訪問都是該服務器了，這樣好比第一次訪問是33服務器，那以後再訪問也會分配爲33服務器訪問了

工做中的簡單使用

在公司開發項目的時候，遇到設計，產品走查環節的時候，不能每次都讓他們去配一個host，畢竟這樣不友好，走查起來有麻煩。因此更應該給他們直觀的感覺，既給一個訪問地址就能夠看到樣子

下面給你們看一下，我正常在公司時nginx作的反向代理配置，和我們上面的一模一樣，只是加了一個server_name，用指定的域名去訪問便可

server {
    listen       80;
    server_name  chd.news.so.m.qss.test.so.com ;
    auth_basic off;
    location / {
        proxy_pass    http://10.10.10.10:20186;
        proxy_set_header Host $host;
        proxy_redirect off;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_connect_timeout 60;
        proxy_read_timeout 600;
        proxy_send_timeout 600;
    }
}
複製代碼

每次修改完nginx配置後不要忘記重啓nginx才能生效，這樣只須要訪問chd.news.so.m.qss.test.so.com這個地址就能夠查看個人開發環境，進行走查了。

這就是nginx最大的功能，反向代理我也接觸的不是不少，畢竟不是專業運維出身，可比性差了不少。略知一二，也只是方便你們工做中使用吧，再次感謝你們的收看了，哈哈