前端必會的 Nginx入門視訊教程(共11集)

技術胖發表於2018-10-30

alt

由於前端技術的蓬勃發展和你自身的不斷努力,很多小夥伴已經打通了任督二脈,做到了前後端通吃。你們就是自己程式世界裡的神,在這裡你們無所不能,創造世界,制定規則和邏輯。當一個屬於你的世界做好後,你需要展示給朋友,釋出於眾人,讓愛你的人欣賞。這時候我們需要一個強有力的伺服器作為容器,而Nginx可以滿足你的一切幻想。

課程說明:

課程詳細講解Nginx的使用和配置,包括文字教程和視訊教程。當然你不用花費一分錢,這一切都是免費的,你只要記住http://jspang.com 這個網址就可以看這個教程。

由於技術胖不是專業講師,還是一線的前端程式設計師,所以只是作一個自己的使用分享,難免有不對或不嚴謹之處,敬請指正。

視訊在文章的末尾,如有需要,可以直接找到文章末尾觀看。

第01節:初識Nginx和環境準備

作為一個前端,我相信你一定聽說過Nginx。因為它在最近兩年實在是太火了,作為一個前端如果不會Nginx,都不敢跟別人說自己是大前端。那Nginx到底是什麼?我們還是引用官方的介紹吧:

"Nginx是一款輕量級的HTTP伺服器,採用事件驅動的非同步非阻塞處理方式框架,這讓其具有極好的IO效能,時常用於服務端的反向代理和負載均衡。"

Nginx的優點

  • 支援海量高併發:採用IO多路複用epoll。官方測試Nginx能夠支援5萬併發連結,實際生產環境中可以支撐2-4萬併發連線數。
  • 記憶體消耗少:在主流的伺服器中Nginx目前是記憶體消耗最小的了,比如我們用Nginx+PHP,在3萬併發連結下,開啟10個Nginx程式消耗150M記憶體。
  • 免費使用可以商業化:Nginx為開源軟體,採用的是2-clause BSD-like協議,可以免費使用,並且可以用於商業。
  • 配置檔案簡單:網路和程式配置通俗易懂,即使非專業運維也能看懂。

當然它的有點還有很多,比如反向代理功能,負載均衡功能,我們會在文章中一一介紹,我這裡就不跟大家贅述了。

現在Nginx非常火 :我們可以通過https://w3techs.com/ 這個網站看到,Nginx在伺服器中排在第二位,但是是上升最快的網站,佔有率達到39.7%。

alt

為什麼要學習這篇文章

作為一個前端,或多或少都會對Nginx有一些經驗,那為什麼還要學習那? 不繫統:以前可能你只會配置某項功能(網上搜集),都是碎片化的知識,不沒有形成系統化。這樣就導致你服務出現問題時,根本不知道從哪裡下手來解決這些問題。

那這篇文章我努力做到分功能,分層次的給大家系統的進行講解,讓大家能基本勝任Nginx的配置和運維工作。

** 學習環境 **

學習環境你可以有三種選擇:

  • 自己找個電腦搭建:需要自己有閒置電腦或者伺服器,優點是穩定性高,可控能力強,學習更方便。
  • 購買阿里雲ECS:需要花些小錢,我選用的是阿里雲學生ECS,每月9.5元。
  • 使用虛擬軟體:這個如果電腦配置高,可以安裝虛擬軟體,缺點是麻煩,影響電腦效能,而且配置也比較多。

我選擇阿里雲的ECS,純屬個人懶省事,但是我認為這是最高效的。

下面是群裡的小夥伴提供的一個阿里雲的優惠價格。

玩轉校園生態 ,只要9.5元一個月 ,你們可以酌情購買。 promotion.aliyun.com/ntms/act/ca…

(Linux的知識我這裡不做過多的介紹,如果你對這個不熟悉自己去惡補一下吧)

我用的作業系統是CentOS 7.4 64位版本。

用yum進行安裝必要程式

如果你Linux用的很熟練的話,我想這些程式你一定已經用yum安裝過了,但是如果你還不熟悉Linux,你可以直接用yum進行安裝就可以了。(然後自己百度一下這些東西的用處,這裡不做過多的介紹了,只要照做就可以了)

yum -y install gcc gcc-c++ autoconf pcre-devel make automake
yum -y install wget httpd-tools vim
複製程式碼

建立目錄

其實這個目錄你是可以不建立的,但是那樣你的系統會很亂,不利於以後的運維。所以我這裡根據本人的喜好建立如下目錄。

步驟如下(此步驟根據自己喜歡建立):

  1. 進入系統後,在目錄下建立了一個jspang的資料夾。
  2. 進入 jspang資料夾 ,命令是 cd jspang
  3. 分別使用mkdir建立 app,backup,download,logs,work資料夾。

這節課我們就先作到這裡,下節課我們開始安裝我們Nginx。

第02節:Nginx的快速搭建

我的文章多是注重於動手操作,而輕理論的,因為技術胖這個半吊子還沒能力把理論知識講的比書好,所以理論部分你可以自行百度查閱或者看書學習(需要說明的是技術胖並不是說理論不重要)。

Nginx版本說明

  • Mainline version :開發版,主要是給廣大Nginx愛好者,測試、研究和學習的,但是不建議使用於生產環境。
  • Stable version : 穩定版,也就是我們說的長期更新版本。這種版本一般比較成熟,經過長時間的更新測試,所以這種版本也是主流版本。
  • legacy version : 歷史版本,如果你需要以前的版本,Nginx也是有提供的。

明白了這三種版本的區別後,就可以明明白白的使用了。

基於Yum的方式安裝Nginx

我們可以先來檢視一下yum是否已經存在,命令如下:

yum list | grep nginx
複製程式碼

如果出現類似下面的內容,說明yum源是存在的。

alt

(細心的小夥伴可以發現系統原來的源只支援1.1.12版本,這版本有些低)

如果不存在,或者不是你需要的版本,那我們可以自行配置yum源,下面是官網提供的源,我們可以放心大膽的使用。

[nginx]
name=nginx repo
baseurl=http://nginx.org/packages/OS/OSRELEASE/$basearch/
gpgcheck=0
enabled=1
複製程式碼

複製上面的程式碼,然後在終端裡輸入:

vim /etc/yum.repos.d/nginx.repo
複製程式碼

然後把程式碼複製進去,這裡你可能需要一些Vim的操作知識,如果不熟悉,可以自行學習一下,當然我視訊中也是有講解的。

賦值完成後,你需要修改一下對應的作業系統和版本號,因為我的是centos和7的版本,所以改為這樣。

baseurl=http://nginx.org/packages/centos/7/$basearch/
複製程式碼

你可以根據你的系統或需要的版本進行修改。

如果都已經準備好了,那就可以開始安裝了,安裝的命令非常簡單:

yum install nginx
複製程式碼

安裝完成後可以使用命令,來檢測Nginx的版本。

nginx -v
複製程式碼

如果出現下面圖片的內容,說明Nginx就安裝成功了。

alt

到這裡你就把最新版本的Nginx安裝到了Linux系統中,也算是一個非常好的開始。小夥伴一定要動手作一下哦,聽是聽不會的,你需要動手作一下。

第03節:Nginx基本配置檔案詳講

現在Nginx已經順利安裝完成了,之後的任務就是要學習配置和使用它了。個人是比較享受這個過程的,這就好像有一匹充滿野性的汗血寶馬,你現在要做的就是馴服它。無論是結果和 過程都那麼美好。

檢視Nginx的安裝目錄

在使用yum安裝完Nginx後,需要知道系統中多了那些檔案,它們都安裝到了那裡。可以使用下面的命令進行檢視:

rpm -ql nginx
複製程式碼

rpm 是linux的rpm包管理工具,-q 代表詢問模式,-l 代表返回列表,這樣我們就可以找到nginx的所有安裝位置了。

列表列出的內容還是比較多的,我們儘量給大家進行講解,我們這節先來看看重要的檔案。

nginx.conf檔案解讀

nginx.conf 檔案是Nginx總配置檔案,在我們搭建伺服器時經常調整的檔案。

進入etc/nginx目錄下,然後用vim進行開啟

cd /etc/nginx
vim nginx.conf
複製程式碼

下面是檔案的詳細註釋,我幾乎把每一句都進行了註釋,你可以根據你的需要來進行配置。

#執行使用者,預設即是nginx,可以不進行設定
user  nginx;
#Nginx程式,一般設定為和CPU核數一樣
worker_processes  1;   
#錯誤日誌存放目錄
error_log  /var/log/nginx/error.log warn;
#程式pid存放位置
pid        /var/run/nginx.pid;


events {
    worker_connections  1024; # 單個後臺程式的最大併發數
}


http {
    include       /etc/nginx/mime.types;   #副檔名與型別對映表
    default_type  application/octet-stream;  #預設檔案型別
    #設定日誌模式
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;   #nginx訪問日誌存放位置

    sendfile        on;   #開啟高效傳輸模式
    #tcp_nopush     on;    #減少網路報文段的數量

    keepalive_timeout  65;  #保持連線的時間,也叫超時時間

    #gzip  on;  #開啟gzip壓縮

    include /etc/nginx/conf.d/*.conf; #包含的子配置項位置和檔案
複製程式碼

default.conf 配置項講解 我們看到最後有一個子檔案的配置項,那我們開啟這個include子檔案配置項看一下里邊都有些什麼內容。

進入conf.d目錄,然後使用vim default.conf進行檢視。

server {
    listen       80;   #配置監聽埠
    server_name  localhost;  //配置域名

    #charset koi8-r;     
    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;     #服務預設啟動目錄
        index  index.html index.htm;    #預設訪問檔案
    }

    #error_page  404              /404.html;   # 配置404頁面

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;   #錯誤狀態碼的顯示頁面,配置後需要重啟
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}

複製程式碼

明白了這些配置項,我們知道我們的服務目錄放在了/usr/share/nginx/html下,可以使用命令進入看一下目錄下的檔案。

cd /usr/share/nginx/html
ls 
複製程式碼

可以看到目錄下面有兩個檔案,50x.html 和 index.html。我們可以使用vim進行編輯。

學到這裡,其實可以預想到,我們的nginx伺服器已經可以為html提供伺服器了。我們可以開啟瀏覽器,訪問ip地址試一試。

阿里雲的安全組配置

如果你使用的是阿里雲,記得到ECS例項一下開啟埠。

步驟如下:

  1. 進入阿里雲控制檯,並找到ECS例項。
  2. 點選例項後邊的“更多”
  3. 點選“網路和安全組” ,再點選“安全組配置”
  4. 右上角新增“安全組配置”
  5. 進行80埠的設定,具體設定如圖就好。

alt

到這裡我們就可以瀏覽到程式的頁面了。本節就到這裡,看到如下圖片頁面,說明你都配置成功了。

alt

第04節:Nginx服務啟動、停止、重啟

經過前3節的學習,已經安裝好了nginx,在維護的時候,我們作的最多的操作就是Nginx的啟動、重啟和停止。這節課我們就把Nginx的這些最常用操作講一下。

啟動Nginx服務

預設的情況下,Nginx是不會自動啟動的,需要我們手動進行啟動,當然啟動Nginx的方法也不是單一的。

nginx直接啟動

在CentOS7.4版本里(低版本是不行的),是可以直接直接使用nginx啟動服務的。

nginx
複製程式碼

使用systemctl命令啟動

還可以使用個Linux的命令進行啟動,我一般都是採用這種方法進行使用。因為這種方法無論啟動什麼服務,都是一樣的,只是換一下服務的名字(不用增加額外的記憶點)。

systemctl start nginx.service
複製程式碼

輸入命令後,沒有任何提示,那我們如何知道Nginx服務已經啟動了哪?可以使用Linux的組合命令,進行查詢服務的執行狀況。

ps aux | grep nginx
複製程式碼

如果啟動成功會出現如下圖片中類似的結果。

alt

有這三條記錄,說明我們Nginx被正常開啟了。

停止Nginx服務的四種方法

停止Nginx 方法有很多種,可以根據需求採用不一樣的方法,我們一個一個說明。

  • 立即停止服務
nginx  -s stop
複製程式碼

這種方法比較強硬,無論程式是否在工作,都直接停止程式。

  • 從容停止服務
nginx -s quit
複製程式碼

這種方法較stop相比就比較溫和一些了,需要程式完成當前工作後再停止。

  • killall 方法殺死程式

這種方法也是比較野蠻的,我們直接殺死程式,但是在上面使用沒有效果時,我們用這種方法還是比較好的。

killall nginx
複製程式碼
  • systemctl 停止
systemctl stop nginx.service
複製程式碼

重啟Nginx服務

有時候我們需要重啟Nginx服務,這時候可以使用下面的命令。

systemctl restart nginx.service
複製程式碼

重新載入配置檔案

在重新編寫或者修改Nginx的配置檔案後,都需要作一下重新載入,這時候可以用Nginx給的命令。

nginx -s reload
複製程式碼

檢視埠號

在預設情況下,Nginx啟動後會監聽80埠,從而提供HTTP訪問,如果80埠已經被佔用則會啟動失敗。我麼可以使用netstat -tlnp命令檢視埠號的佔用情況。

**總結:**這節課的內容雖然簡單,但都是我們在工作中經常使用的,希望小夥伴們多多聯絡,我把課程分的如此細緻,一個主要的原因也是希望可以方便在工作中進行查閱。


第05節:自定義錯誤頁和訪問設定

一個好的網站會武裝到牙齒,任何錯誤都有給使用者友好的提示。比如當網站遇到頁面沒有找到的時候,我們要提示頁面沒有找到,並給使用者可返回性。錯誤的種類有很多,所以真正的好產品會給顧客不同的返回結果。

多錯誤指向一個頁面

在/etc/nginx/conf.d/default.conf 是可以看到下面這句話的。

error_page   500 502 503 504  /50x.html;
複製程式碼

error_page指令用於自定義錯誤頁面,500,502,503,504 這些就是HTTP中最常見的錯誤程式碼,/50.html 用於表示當發生上述指定的任意一個錯誤的時候,都是用網站根目錄下的/50.html檔案進行處理。

單獨為錯誤置頂處理方式

有些時候是要把這些錯誤頁面單獨的表現出來,給使用者更好的體驗。所以就要為每個錯誤碼設定不同的頁面。設定方法如下:

error_page 404  /404_error.html;
複製程式碼

然後到網站目錄下新建一個404_error.html 檔案,並寫入一些資訊。

<html>
<meta charset="UTF-8">
<body>
<h1>404頁面沒有找到!</h1>
</body>
</html>
複製程式碼

然後重啟我們的服務,再進行訪問,你會發現404頁面發生了變化。

把錯誤碼換成一個地址

處理錯誤的時候,不僅可以只使用本伺服器的資源,還可以使用外部的資源。比如我們將配置檔案設定成這樣。

error_page  404 http://jspang.com;
複製程式碼

我們使用了技術胖的部落格地址作為404頁面沒有找到的提示,就形成了,沒有找到檔案,就直接跳到了技術胖的部落格上了。

簡單實現訪問控制

有時候我們的伺服器只允許特定主機訪問,比如內部OA系統,或者應用的管理後臺系統,更或者是某些應用介面,這時候我們就需要控制一些IP訪問,我們可以直接在location裡進行配置。

可以直接在default.conf裡進行配置。

 location / {
        deny   123.9.51.42;
        allow  45.76.202.231;
    }

複製程式碼

配置完成後,重啟一下伺服器就可以實現限制和允許訪問了。這在工作中非常常用,一定要好好記得。

第06節:Nginx訪問許可權詳講

上節課我們已經簡單接觸了Nginx訪問簡單用法,簡單的知道了,deny是禁止訪問,allow是允許訪問。但Nginx的訪問控制還是比較複雜的,我們這節課就詳細介紹一下。

指令優先順序

我們先來看一下程式碼:

 location / {
        allow  45.76.202.231;
        deny   all;
    }
複製程式碼

上面的配置表示只允許45.76.202.231進行訪問,其他的IP是禁止訪問的。但是如果我們把deny all指令,移動到 allow 45.76.202.231之前,會發生什麼那?會發現所有的IP都不允許訪問了。這說明了一個問題:就是在同一個塊下的兩個許可權指令,先出現的設定會覆蓋後出現的設定(也就是誰先觸發,誰起作用)

複雜訪問控制許可權匹配

在工作中,訪問許可權的控制需求更加複雜,例如,對於網站下的img(圖片目錄)是執行所有使用者訪問,但對於網站下的admin目錄則只允許公司內部固定IP訪問。這時候僅靠deny和allow這兩個指令,是無法實現的。我們需要location塊來完成相關的需求匹配。

上面的需求,配置程式碼如下:

    location =/img{
        allow all;
    }
    location =/admin{
        deny all;
    }
複製程式碼

=號代表精確匹配,使用了=後是根據其後的模式進行精確匹配。這個直接關係到我們網站的安全,一定要學會。

使用正規表示式設定訪問許可權

只有精確匹配有時是完不成我們的工作任務的,比如現在我們要禁止訪問所有php的頁面,php的頁面大多是後臺的管理或者介面程式碼,所以為了安全我們經常要禁止所有使用者訪問,而只開放公司內部訪問的。

程式碼如下:

 location ~\.php$ {
        deny all;
    }
複製程式碼

這樣我們再訪問的時候就不能訪問以php結尾的檔案了。是不是讓網站變的安全很多了那?

第07節:Nginx設定虛擬主機

虛擬主機是指在一臺物理主機伺服器上劃分出多個磁碟空間,每個磁碟空間都是一個虛擬主機,每臺虛擬主機都可以對外提供Web服務,並且互不干擾。在外界看來,虛擬主機就是一臺獨立的伺服器主機,這意味著使用者能夠利用虛擬主機把多個不同域名的網站部署在同一臺伺服器上,而不必再為簡歷一個網站單獨購買一臺伺服器,既解決了維護伺服器技術的難題,同時又極大地節省了伺服器硬體成本和相關的維護費用。

配置虛擬主機可以基於埠號、基於IP和基於域名,這節課我們先學習基於埠號來設定虛擬主機。

基於埠號配置虛擬主機

基於埠號來配置虛擬主機,算是Nginx中最簡單的一種方式了。原理就是Nginx監聽多個埠,根據不同的埠號,來區分不同的網站。

我們可以直接配置在主檔案裡etc/nginx/nginx.conf檔案裡, 也可以配置在子配置檔案裡etc/nginx/conf.d/default.conf。我這裡為了配置方便,就配置在子檔案裡了。當然你也可以再新建一個檔案,只要在conf.d資料夾下就可以了。

修改配置檔案中的server選項,這時候就會有兩個server。

server{
        listen 8001;
        server_name localhost;
        root /usr/share/nginx/html/html8001;
        index index.html;
}
複製程式碼

編在usr/share/nginx/html/html8001/目錄下的index.html檔案並檢視結果。

<h1>welcome port 8001</h1>
複製程式碼

最後在瀏覽器中分別訪問地址和帶埠的地址。看到的結果是不同的。

然後我們就可以在瀏覽器中訪問http://112.74.164.244:8001了,當然你的IP跟這個肯定不一樣,這個IP過幾天就會過期的。

基於IP的虛擬主機

基於IP和基於埠的配置幾乎一樣,只是把server_name選項,配置成IP就可以了。

比如上面的配置,我們可以修改為:

server{
        listen 80;
        server_name 112.74.164.244;
        root /usr/share/nginx/html/html8001;
        index index.html;
}
複製程式碼

這種演示需要多個IP的支援,由於我們的阿里ECS只提供了一個IP,所以這裡就不給大家演示了,如果工作中用到,只要安裝這種方法配置就可以了。

第08節:Nginx使用域名設定虛擬主機

在真實的上線環境中,一個網站是需要域名和公網IP才可以訪問的。這也是比較真實的一節課,我們在實際工作中配置最多的就是設定這種虛擬主機。

如果你還沒有域名,我希望你也能註冊一個,你可以註冊一個以你名字全拼的域名,這類域名資源還是比較豐富的。一年才幾十元錢,這不僅僅是為了學習這篇課程,更重要是有一個域名會對你的職業發展有很多好處。比如你自己作的程式想展示給別人看,你自己要建立一個部落格,或者是你要進行一個程式測試,這些都需要域名的支援。所以如果你是一名程式設計師,我強烈建議你能申請一個自己的域名。

我這裡就使用自己的部落格域名作例子了。

先要對域名進行解析,這樣域名才能正確定位到你需要的IP上。 我這裡新建了兩個解析,分別是:

配置以域名為劃分的虛擬主機

我們修改etc/nginx/conf.d目錄下的default.conf 檔案,把原來的80埠虛擬主機改為以域名劃分的虛擬主機。程式碼如下:

server {
    listen       80;
    server_name  nginx.jspang.com;
複製程式碼

我們再把同目錄下的8001.conf檔案進行修改,改成如下:

server{
        listen 80;
        server_name nginx2.jspang.com;
        location / {
                root /usr/share/nginx/html/html8001;
                index index.html index.htm;
        }
}
複製程式碼

然後我們用平滑重啟的方式,進行重啟,這時候我們在瀏覽器中訪問這兩個網頁。

其實域名設定虛擬主機也非常簡單,主要操作的是配置檔案的server_name項,還需要域名解析的配合。小夥伴們一定要進行練習一下。後面的課程可能就沒有這麼簡單了。

第09節:Nginx反向代理的設定

虛擬主機學習完成了,作為一個前端必會的一個技能是反向代理。大家都知道,我們現在的web模式基本的都是標準的CS結構,即Client端到Server端。那代理就是在Client端和Server端之間增加一個提供特定功能的伺服器,這個伺服器就是我們說的代理伺服器。

**正向代理:**如果你覺的反向代理不好理解,那先來了解一下正向代理。我相信作為一個手速遠超正常人的程式設計師來說,你一定用過翻牆工具(我這裡說的不是物理梯子),它就是一個典型的正向代理工具。它會把我們不讓訪問的伺服器的網頁請求,代理到一個可以訪問該網站的代理伺服器上來,一般叫做proxy伺服器,再轉發給客戶。我還是畫張圖幫助大家理解吧。

alt

簡單來說就是你想訪問目標伺服器的許可權,但是沒有許可權。這時候代理伺服器有許可權訪問伺服器,並且你有訪問代理伺服器的許可權,這時候你就可以通過訪問代理伺服器,代理伺服器訪問真實伺服器,把內容給你呈現出來。

**反向代理:**反向代理跟代理正好相反(需要說明的是,現在基本所有的大型網站的頁面都是用了反向代理),客戶端傳送的請求,想要訪問server伺服器上的內容。傳送的內容被髮送到代理伺服器上,這個代理伺服器再把請求傳送到自己設定好的內部伺服器上,而使用者真實想獲得的內容就在這些設定好的伺服器上。

alt

通過圖片的對比,應該看出一些區別,這裡proxy伺服器代理的並不是客戶端,而是伺服器,即向外部客戶端提供了一個統一的代理入口,客戶端的請求都要先經過這個proxy伺服器。具體訪問那個伺服器server是由Nginx來控制的。再簡單點來講,一般代理指代理的客戶端,反向代理是代理的伺服器。

反向代理的用途和好處

  • 安全性:正向代理的客戶端能夠在隱藏自身資訊的同時訪問任意網站,這個給網路安全代理了極大的威脅。因此,我們必須把伺服器保護起來,使用反向代理客戶端使用者只能通過外來網來訪問代理伺服器,並且使用者並不知道自己訪問的真實伺服器是那一臺,可以很好的提供安全保護。
  • 功能性:反向代理的主要用途是為多個伺服器提供負債均衡、快取等功能。負載均衡就是一個網站的內容被部署在若干伺服器上,可以把這些機子看成一個叢集,那Nginx可以將接收到的客戶端請求“均勻地”分配到這個叢集中所有的伺服器上,從而實現伺服器壓力的平均分配,也叫負載均衡。

最簡單的反向代理

現在我們要訪問http://nginx2.jspang.com然後反向代理到jspang.com這個網站。我們直接到etc/nginx/con.d/8001.conf進行修改。

修改後的配置檔案如下:

server{
        listen 80;
        server_name nginx2.jspang.com;
        location / {
               proxy_pass http://jspang.com;
        }
}
複製程式碼

一般我們反向代理的都是一個IP,但是我這裡代理了一個域名也是可以的。其實這時候我們反向代理就算成功了,我們可以在瀏覽器中開啟http://nginx2.jspang.com來測試一下。(視訊中有詳細的演示)

其它反向代理指令

反向代理還有些常用的指令,我在這裡給大家列出:

  • proxy_set_header :在將客戶端請求傳送給後端伺服器之前,更改來自客戶端的請求頭資訊。

  • proxy_connect_timeout:配置Nginx與後端代理伺服器嘗試建立連線的超時時間。

  • proxy_read_timeout : 配置Nginx向後端伺服器組發出read請求後,等待相應的超時時間。

  • proxy_send_timeout:配置Nginx向後端伺服器組發出write請求後,等待相應的超時時間。

  • proxy_redirect :用於修改後端伺服器返回的響應頭中的Location和Refresh。

第10節:Nginx適配PC或移動裝置

現在很多網站都是有了PC端和H5站點的,因為這樣就可以根據客戶裝置的不同,顯示出體驗更好的,不同的頁面了。

這樣的需求有人說拿自適應就可以搞定,比如我們常說的bootstrap和24格佈局法,這些確實是非常好的方案,但是無論是複雜性和易用性上面還是不如分開編寫的好,比如我們常見的淘寶、京東......這些大型網站就都沒有采用自適應,而是用分開製作的方式。

那分開製作如何通過配置Nginx來識別出應該展示哪個頁面那?我們這節課就來學習一下。

$http_user_agent的使用:

Nginx通過內建變數$http_user_agent,可以獲取到請求客戶端的userAgent,就可以使用者目前處於移動端還是PC端,進而展示不同的頁面給使用者。

操作步驟如下:

  1. 在/usr/share/nginx/目錄下新建兩個資料夾,分別為:pc和mobile目錄
cd /usr/share/nginx
mkdir pc
mkdir mobile
複製程式碼
  1. 在pc和miblic目錄下,新建兩個index.html檔案,檔案裡下面內容
<h1>I am pc!</h1>
複製程式碼
<h1>I am mobile!</h1>
複製程式碼
  1. 進入etc/nginx/conf.d目錄下,修改8001.conf檔案,改為下面的形式:
server{
        listen 80;
        server_name nginx2.jspang.com;
        location / {
         root /usr/share/nginx/pc;
         if ($http_user_agent ~* '(Android|webOS|iPhone|iPod|BlackBerry)') {
            root /usr/share/nginx/mobile;
         }
         index index.html;
        }
}
複製程式碼

這段程式碼我會在視訊中詳細講解,如果感興趣就來看視訊吧,視訊全部免費哦。

第11節:Nginx的Gzip壓縮配置

Gzip是網頁的一種網頁壓縮技術,經過gzip壓縮後,頁面大小可以變為原來的30%甚至更小。更小的網頁會讓使用者瀏覽的體驗更好,速度更快。gzip網頁壓縮的實現需要瀏覽器和伺服器的支援。

alt

從上圖可以清楚的明白,gzip是需要伺服器和瀏覽器同事支援的。當瀏覽器支援gzip壓縮時,會在請求訊息中包含Accept-Encoding:gzip,這樣Nginx就會向瀏覽器傳送聽過gzip後的內容,同時在相應資訊頭中加入Content-Encoding:gzip,宣告這是gzip後的內容,告知瀏覽器要先解壓後才能解析輸出。

gzip的配置項

Nginx提供了專門的gzip模組,並且模組中的指令非常豐富。

  • gzip : 該指令用於開啟或 關閉gzip模組。
  • gzip_buffers : 設定系統獲取幾個單位的快取用於儲存gzip的壓縮結果資料流。
  • gzip_comp_level : gzip壓縮比,壓縮級別是1-9,1的壓縮級別最低,9的壓縮級別最高。壓縮級別越高壓縮率越大,壓縮時間越長。
  • gzip_disable : 可以通過該指令對一些特定的User-Agent不使用壓縮功能。
  • gzip_min_length:設定允許壓縮的頁面最小位元組數,頁面位元組數從相應訊息頭的Content-length中進行獲取。
  • gzip_http_version:識別HTTP協議版本,其值可以是1.1.或1.0.
  • gzip_proxied : 用於設定啟用或禁用從代理伺服器上收到相應內容gzip壓縮。
  • gzip_vary : 用於在響應訊息頭中新增Vary:Accept-Encoding,使代理伺服器根據請求頭中的Accept-Encoding識別是否啟用gzip壓縮。

gzip最簡單的配置

http {
   .....
    gzip on;
    gzip_types text/plain application/javascript text/css;
   .....
}
複製程式碼

gzip on是啟用gizp模組,下面的一行是用於在客戶端訪問網頁時,對文字、JavaScript 和CSS檔案進行壓縮輸出。

配置好後,我們就可以重啟Nginx服務,讓我們的gizp生效了。

如果你是windows作業系統,你可以按F12鍵開啟開發者工具,單機當前的請求,在標籤中選擇Headers,檢視HTTP響應頭資訊。你可以清楚的看見Content-Encoding為gzip型別。

alt

看到這個,說明我們成功開啟了gzip。

到這裡為止,我們的更新暫時結束了,這只是個入門教程,小夥伴可以繼續升入學習,Nginx還有很多第三方模組,以後有機會,我會繼續分享。

視訊列表:

相關文章