前端培訓-初級階段-場景實戰（2019-06-13）-Nginx代理正確食用方式

前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本着提升技術水平，打牢基礎知識的中心思想，我們開課啦（每週四）。

截止到 2019-05-30 期，所有成員都進行了一次分享。內部對課程進行了一些調整，之後會針對項目開始 review 。我這邊預期準備進入中級階段，中間還是會穿插一些實戰。 前端培訓目錄

今天講什麼？

1. nginx 的 server
2. nginx 的 location 匹配規則
3. nginx 的 root、rewrite、proxy_pass、alias
4. nginx 的命令以及報錯日誌

今天爲什麼會開這個題目？

• 公司內部的前端構建工具升級(gulp)，幫小夥伴處理了一下 nginx 的配置，輔助提升開發的體驗。

• 公司想要加快網頁訪問速度（前端緩存），爲了測試，我改了我自己服務器的 nginx 配置。

  • PWA （）
  • manifest （）
  • 其他方案（localStroage存）
  • 有老哥有科學有效的方案嗎？緩存這塊我還在實驗中，我司有結果之後我會寫個文章發出來。

nginx 的 server

定義虛擬主機相關。server 中通過 server_name 來匹配域名，listen來匹配端口

server_name

用於匹配域名，需要已經映射的域名。
舉個栗子，我在阿里雲有一臺雲服務器 IP:123.56.16.33:443。買了一個域名 lilnong.top。
我現在把我的域名指向了我的ip。那所有請求我域名的都會到我這臺服務器上。我需要用 server_name 來判斷請求的是那臺主機，再進行分發

listen

用於匹配端口號，一般來說，我們當做服務的就需要加上 80 和 443

協議	端口	用途
http	80	瀏覽器訪問
https	443	瀏覽器訪問
ftp	21

server_name 與 host 匹配優先級

1. 完全匹配
2. 通配符在前的，如 *.lilnong.top
3. 在後的，如 www.lilnong.*
4. 正則匹配，如 ~^\.www\.lilnong\.com$

如果都不匹配

1. 優先選擇 listen 配置項後有 default 或 default_server 的
2. 找到匹配 listen 端口的第一個 server 塊

nginx 的 location 匹配規則

location 是什麼？

location 是用於在 server 服務中，根據 URL 進行匹配查找。屬於 ngx_http_core_module 模塊。

location 語法

location [ = | ~ | ~* | ^~ ] uri {...}

• = : 精確匹配，匹配成功，則停止搜索正則; 不能有嵌套的 location。可以加速 request 的處理。
• ~ : 區分大小寫的正則匹配
• ~* ：不區分大小寫正則匹配
• ^~ ：不進行正則的匹配。

location 匹配規則

1. 前綴匹配（prefix string）
   如 /、/static/
2. 正則匹配（regular expresstion）（RegExp）
   如 \.(gif|jpg|png|js|css)$
3. nginx 首先檢查 前綴匹配，使用 longest matching prefix 最長前綴匹配規則，記住匹配的 location，然後使用正則匹配，根據他們在配置文件中的順序，一旦匹配成功，則停止檢索。

4. 匹配時要注意/的使用。是否要封閉。

    location /static { 
        # 可以匹配到 URL 如： '/static/html' 和 'statichtml/html`
    }
    location /static/ { 
        # 只可匹配到 URL 如： '/static/html' 和 'static/**'
    }

nginx 的 root、rewrite、proxy_pass、alias

root

用來指定請求資源的真實路徑，本地磁盤路徑

location /nginx/ { 
  root /var/log/;
  #請求http://nginx.lilnong.top/nginx/20190227_access.log
  #>/var/log/nginx/20190227_access.log
}

alias

用來指定請求資源的真實路徑，本地磁盤路徑。會丟棄 location 所匹配的，這是和 root 的區分

location /nginx/ { 
  alias  /var/log/nginx/;
  #請求http://nginx.lilnong.top/nginx/20190227_access.log
  #>/var/log/nginx/20190227_access.log
}

rewrite

1. 在 server 塊中，會先執行 rewrite 部分，然後纔會匹配 location 塊。

2. 語法：rewrite regex replacement [flag];

   1. 如果 regex 匹配到，則會使用 replacement 來替換 URL。
   2. rewrite 指令會根據在配置文件中出現的順序依次執行，可以使用 flag 來終止接下來的處理。
   3. 如果 replacement 以 http:// 或者 https:// 或者 $scheme，則停止處理，立刻重定向。

3. flag 描述

   1. last 將根據 rewrite 後的地址重新在 server標籤執行。
   2. break 將根據 rewrite 後的地址重新在當前的 location標籤執行。
   3. redirect 302跳轉到rewrtie後面的地址。
   4. permanent 301永久調整到rewrtie後面的地址，即當前地址已經永久遷移到新地址，一般是爲了對搜索引擎友好。

#這是我把ip訪問重定向到我的網頁
server {
    listen 80;
    server_name 123.56.16.33;
    rewrite ^/(.*)$ https://www.lilnong.top/$1 permanent; 
}

proxy_pass

訪問 https://nginx.lilnong.top/static/html

location /static/ {
  proxy_pass http://www.lilnong.top; 
  #結尾不帶 `/`，將匹配到 http://www.lilnong.top/static/html
}
location /static/ {
  proxy_pass http://www.lilnong.top/; 
  #結尾帶 `/`，將匹配到 http://www.lilnong.top/html
}

nginx 的命令以及報錯日誌

1. 重啓(重新載入配置文件) nginx -s reload
2. 重啓 nginx -s reopen
3. 停止 nginx -s stop
4. 啓動 nginx
5. 如果有錯誤，重啓的時候會報錯。
   在 windows 中（我們正在用的），看不到報錯，服務也起不來，可以的 nginx/logs/error.log 看錯誤日誌來排查問題。

資源

1. nginx 中文
2. nginx org
3. nginx的location配置詳解