溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

前端必備的nginx知識點(diǎn)有哪些

發(fā)布時(shí)間：2023-03-22 15:34:37 來源：億速云 閱讀：103 作者：iii 欄目：開發(fā)技術(shù)

本篇內(nèi)容主要講解“前端必備的nginx知識點(diǎn)有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“前端必備的nginx知識點(diǎn)有哪些”吧!

    nginx簡介

    Nginx是一款輕量級、高性能的 Web 服務(wù)器 、反向代理服務(wù)器，它具有有很多非常優(yōu)越的特性：

    反向代理

    與反響代理相對的肯定是正向代理，那么我們就先從正向代理開始說明

    • 正向代理

    正向代理服務(wù)器是一個(gè)位于客戶端和目標(biāo)服務(wù)器之間的服務(wù)器，為了從目標(biāo)服務(wù)器取得內(nèi)容，客戶端向代理服務(wù)器發(fā)送一個(gè)請求并指定目標(biāo)，然后代理服務(wù)器向目標(biāo)服務(wù)器轉(zhuǎn)交請求并將獲得的內(nèi)容返回給客戶端。

    總之，正向代理中目標(biāo)服務(wù)器并不知道訪問它的真實(shí)用戶是誰，因?yàn)楹退换サ氖谴矸?wù)器。

    常見的：比如我們訪問國外的YouTube、Facebook等網(wǎng)站，就是通過代理服務(wù)器實(shí)現(xiàn)的，這個(gè)就是正向代理的過程。

    前端必備的nginx知識點(diǎn)有哪些

    • 反向代理

    正向代理中目標(biāo)服務(wù)器不知道用戶是誰，反向代理中則相反，是用戶不知道目標(biāo)服務(wù)器是誰。

    用戶將請求發(fā)送到反向代理服務(wù)器，由反向代理服務(wù)器去選擇目標(biāo)服務(wù)器獲取數(shù)據(jù)后，再返回給客戶端，這個(gè)過程中用戶并不知道真正的請求發(fā)送到哪臺服務(wù)器上了。

    使用反向代理，目標(biāo)服務(wù)器可以對客戶端隱藏服務(wù)器的IP地址。

    前端必備的nginx知識點(diǎn)有哪些

    負(fù)載均衡

    反向代理服務(wù)器可以做負(fù)載均衡，根據(jù)所有真實(shí)服務(wù)器的負(fù)載情況，將客戶端請求分發(fā)到不同的真實(shí)服務(wù)器上。也就是說哪個(gè)服務(wù)器沒那么忙，哪個(gè)服務(wù)器就來響應(yīng)請求。

    前端必備的nginx知識點(diǎn)有哪些

    動靜分離

    在訪問服務(wù)端時(shí)，一般會請求一些靜態(tài)資源，如js、css、圖片等，這些資源可以在反向代理服務(wù)器中進(jìn)行緩存，減少服務(wù)器的壓力，而動態(tài)請求可以繼續(xù)請求服務(wù)器。

    使用和配置

    接下來就來看下怎么安裝并進(jìn)行一些常用的配置。

    安裝

    首先可以去買一臺服務(wù)器，我買的是騰訊云的，系統(tǒng)是CentOS，所以是自帶yum命令的，登錄服務(wù)器后直接執(zhí)行以下命令：

    yum install nginx

    安裝完成后，就可以啟動nginx服務(wù)了，直接運(yùn)行：

    nginx # 直接會啟動nginx服務(wù)

    然后在瀏覽器訪問服務(wù)器的IP，就會出現(xiàn)下面的頁面：

    前端必備的nginx知識點(diǎn)有哪些

    這就說明nginx服務(wù)已經(jīng)被啟動了。

    常用命令

    • 啟動nginx服務(wù)的命令

    [root@VM-0-14-centos ~]# nginx

    • 檢查配置的命令，一般用于在修改配置后檢查下配置是否合法

    [root@VM-0-14-centos ~]# nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

    • 重啟命令，修改完配置后需要重啟nginx服務(wù)

    [root@VM-0-14-centos ~]# nginx -s reload

    • 停止nginx服務(wù)

    [root@VM-0-14-centos ~]# nginx -s stop

    對于前端來說，掌握這幾個(gè)命令就夠夠的了

    配置

    nginx的默認(rèn)配置文件通常是/etc/nginx/nginx.conf，我們跳到/etc/nginx目錄中執(zhí)行cat nginx.conf可以查看配置文件的內(nèi)容，下面我copy了重要的部分先來分析：

    user root;

...

http {

  ...

  server {
    listen       80 default_server;       # 默認(rèn)在80端口啟動nginx服務(wù)
    listen       [::]:80 default_server;
    server_name  _;                       # 綁定的域名
    root         /usr/share/nginx/html;   # 根目錄，會加載這個(gè)目錄下的html文件

    # Load configuration files for the default server block.
    include /etc/nginx/default.d/*.conf;  # 可以引入其他配置文件

    location / {                          # 訪問服務(wù)器跟路徑
    }

    error_page 404 /404.html;             # 訪問的時(shí)候路徑404
        location = /40x.html {            # 404時(shí)訪問的html
    }

    error_page 500 502 503 504 /50x.html; # 服務(wù)器內(nèi)部錯(cuò)誤
        location = /50x.html {            # 5xx時(shí)訪問的html
    }
  }
}

    上面的配置的意思是我們訪問服務(wù)的80端口時(shí)會自動加載/usr/share/nginx/html目錄下的html文件，所以我們通過IP訪問會返回我們之前看到的頁面，我們切換到/usr/share/nginx/html目錄下，修改其中的index.html如下:

    <!DOCTYPE html>
<html>
    <head>
        <title>Hello nginx</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <style type="text/css">
        </style>
    </head>

    <body>
        <h2>hello nginx!</h2>
    </body>
</html>

    修改完后執(zhí)行nginx -s reload重啟命令，然后刷新頁面，頁面就變成如下所示：

    前端必備的nginx知識點(diǎn)有哪些

    項(xiàng)目部署配置

    這就是nginx最簡單的配置。但是我們在項(xiàng)目開發(fā)時(shí)一般會用vue或者react框架，開發(fā)完后打包再去部署到服務(wù)器上，這個(gè)時(shí)候nginx能幫什么忙呢？接下來，我就簡單的去講解下如何用nginx部署前端服務(wù)。

    首先我們創(chuàng)建一個(gè)react項(xiàng)目或者vue項(xiàng)目，如何創(chuàng)建項(xiàng)目就不再說明了，我是用vite創(chuàng)建的vue3的項(xiàng)目。 創(chuàng)建好后直接npm run build進(jìn)行打包，打包好后運(yùn)行下面的命令：

    scp -r ./dist root@你的IP:/root/www/website/

    然后輸入密碼，就可以把打包的整個(gè)dist文件上傳到服務(wù)的/root/www/website/這個(gè)目錄下了。

    前端必備的nginx知識點(diǎn)有哪些

    服務(wù)器的對應(yīng)目錄如下：

    前端必備的nginx知識點(diǎn)有哪些

    注意：在真實(shí)的開發(fā)過程中部署項(xiàng)目肯定不是手動，一般會用一些ci工具。

    現(xiàn)在，我們就成功的將靜態(tài)資源部署到服務(wù)器上了，接下來就只需要修改nginx的配置就可以了，也就是修改/etc/nginx/nginx.conf這個(gè)文件的內(nèi)容，修改后文件如下（還是只展示重要部分內(nèi)容）：

    user root; # 這里一定是root，如果報(bào)403就是這里沒修改

...

http {
  
  ...

  server {
    listen       80 default_server;
    listen       [::]:80 default_server;
    server_name  _;
    root         /usr/share/nginx/html;

    include /etc/nginx/default.d/*.conf;

    location / {
      root  /root/www/website/dist; # 訪問跟路徑時(shí)對應(yīng)訪問的目錄緩存我們上傳靜態(tài)資源文件的目錄
      index   index.html      index.htm; # 文件類型
    }

    error_page 404 /404.html;
      location = /40x.html {
    }

    error_page 500 502 503 504 /50x.html;
      location = /50x.html {
    }
  }
}

    其實(shí)我們只需要在location /下面加上訪問的文件目錄路徑和文件類型就可以了，修改好后執(zhí)行nginx -s reload重啟，回到頁面刷新就會看到如下頁面：

    前端必備的nginx知識點(diǎn)有哪些

    這個(gè)是最簡單的前端項(xiàng)目部署的過程了。

    緩存配置

    前端經(jīng)常有一些圖片還有其他靜態(tài)資源文件基本上不會再被修改了，就比如說我做上一個(gè)項(xiàng)目的時(shí)候的那個(gè)大的文件，那這個(gè)時(shí)候就可以緩存到本地，防止下次請求再從服務(wù)器上拉取，這樣是很耗費(fèi)時(shí)間和服務(wù)器帶寬的，接下來我們就來看下如何使用nginx配置緩存。

    server {

  ...

  location / {
    root  /root/www/website/dist;
    index   index.html      index.htm;

    location ~ .*.(?:jpg|jpeg|png|svg)$ { # 匹配靜態(tài)資源的文件后綴
      expires   7d; # 7天后過期
    }
  }

  ...
}

    上面的配置是對一些圖片資源進(jìn)行的緩存配置，緩存時(shí)間為7天，修改好重啟后刷新頁面，找到關(guān)于圖片資源的請求，然后就會發(fā)現(xiàn)請求第二次的時(shí)候就會從本地緩存中獲取，并且響應(yīng)頭顯示緩存過期時(shí)間是7天后：

    前端必備的nginx知識點(diǎn)有哪些

    這是對圖片的緩存，其他資源文件也是同理。

    跨域配置

    跨域是開發(fā)過程中或者面試過程中經(jīng)常會碰到的問題，面試的時(shí)候一般會回答jsonp或者服務(wù)端加響應(yīng)頭等方式，今天我們看看nginx如何去配置跨域。下面就是常見的跨域配置：

    server {

  ...

  add_header Access-Control-Allow-Origin *; # 表示允許所有域名域跨域調(diào)用
  add_header Access-Control-Allow-Methods *; # 表示允許所有請求方法跨域
  if ($request_method = OPTIONS) { # 檢查請求的類型是不是預(yù)檢命令
    return 200;
  }

  location / {
    root  /root/www/website/dist;
    index   index.html      index.htm;

  }

  ...
}

    gzip壓縮配置

    如果存在靜態(tài)資源過大，可能會導(dǎo)致服務(wù)端響應(yīng)過慢，盡管配置了緩存，但是第一次在獲取資源的情況下并沒有緩存，只能從服務(wù)器上獲取，這個(gè)時(shí)候就可以考慮開啟gzip壓縮，這樣可以節(jié)省服務(wù)器的帶寬，接下來就來看看如何配置gzip壓縮的。

    server {

  ...

  # 開啟gzip壓縮，同理，關(guān)閉為off
  gzip on;
  # 壓縮的級別，一般取2-6，級別越高，壓縮的越小，但越耗費(fèi)服務(wù)器的cpu
  gzip_comp_level 6;
  # 超過1K的文件才進(jìn)行壓縮
  gzip_min_length 1k;
  # 文件類型
  gzip_types image/png image/jpeg image/gif image/svg+xml;
  # 在響應(yīng)頭中添加 Vary
  gzip_vary on;

  location / {
    root  /root/www/website/dist;
    index   index.html      index.htm;
  }

  ...
}

    修改好后重啟，打開頁面，開啟前這個(gè)logo的svg文件大小為1.9k：

    前端必備的nginx知識點(diǎn)有哪些

    開啟gzip后，大小變?yōu)?.2k：

    前端必備的nginx知識點(diǎn)有哪些

    并且響應(yīng)頭上也有g(shù)zip的標(biāo)識了：

    前端必備的nginx知識點(diǎn)有哪些

    到此，相信大家對“前端必備的nginx知識點(diǎn)有哪些”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

    向AI問一下細(xì)節(jié)

    免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

    AI
    助
    手