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

Harpsichord1207 發布于2019-08-23 18:02 / 2512人閱讀

摘要：前端最基礎的就是。我這邊預期準備進入中級階段，中間還是會穿插一些實戰。語法精確匹配，匹配成功，則停止搜索正則不能有嵌套的。指令會根據在配置文件中出現的順序依次執行，可以使用來終止接下來的處理。如果以或者或者，則停止處理，立刻重定向。

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

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

今天講什么？

nginx 的 server

nginx 的 location 匹配規則

nginx 的 root、rewrite、proxy_pass、alias

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 匹配優先級

完全匹配

通配符在前的，如 *.lilnong.top

在后的，如 www.lilnong.*

正則匹配，如 ~^.www.lilnong.com$

如果都不匹配

優先選擇 listen 配置項后有 default 或 default_server 的

找到匹配 listen 端口的第一個 server 塊

nginx 的 location 匹配規則 location 是什么？

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

location 語法

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

= : 精確匹配，匹配成功，則停止搜索正則; 不能有嵌套的 location。可以加速 request 的處理。

~ : 區分大小寫的正則匹配

~* ：不區分大小寫正則匹配

^~ ：不進行正則的匹配。

location 匹配規則

前綴匹配（prefix string）
如 /、/static/

正則匹配（regular expresstion）（RegExp）
如 .(gif|jpg|png|js|css)$

nginx 首先檢查 前綴匹配，使用 longest matching prefix 最長前綴匹配規則，記住匹配的 location，然后使用正則匹配，根據他們在配置文件中的順序，一旦匹配成功，則停止檢索。

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

 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

在 server 塊中，會先執行 rewrite 部分，然后才會匹配 location 塊。

語法：rewrite regex replacement [flag];

如果 regex 匹配到，則會使用 replacement 來替換 URL。

rewrite 指令會根據在配置文件中出現的順序依次執行，可以使用 flag 來終止接下來的處理。

如果 replacement 以 http:// 或者 https:// 或者 $scheme，則停止處理，立刻重定向。

flag 描述

last 將根據 rewrite 后的地址重新在 server標簽執行。

break 將根據 rewrite 后的地址重新在當前的 location標簽執行。

redirect 302跳轉到rewrtie后面的地址。

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 的命令以及報錯日志

重啟(重新載入配置文件) nginx -s reload

重啟 nginx -s reopen

停止 nginx -s stop

啟動 nginx

如果有錯誤，重啟的時候會報錯。
在 windows 中（我們正在用的），看不到報錯，服務也起不來，可以的 nginx/logs/error.log 看錯誤日志來排查問題。

資源

nginx 中文

nginx org

nginx的location配置詳解

微信公眾號：前端linong

云服務器 GPU云服務器實戰nginx 初級前端工程師初級前端開發工程師簡歷前端實戰

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104560.html

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

摘要：前端最基礎的就是。我這邊預期準備進入中級階段，中間還是會穿插一些實戰。語法精確匹配，匹配成功，則停止搜索正則不能有嵌套的。指令會根據在配置文件中出現的順序依次執行，可以使用來終止接下來的處理。如果以或者或者，則停止處理，立刻重定向。前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTM...

seanHai 2019-07-25 14:48 評論0 收藏0
前端培訓-初級階段-場景實戰（2019-06-06）-Content-Type對照表及日常使用

摘要：前端最基礎的就是。數據被編碼為鍵值對。大法好，精準識別，也算是正確的表單提交。全局的默認值實例默認值創建實例時設置配置的默認值在實例已創建后修改默認值攔截器，可以攔截錯誤，進行上報。參考資料類型看云前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技術水...

mayaohua 2019-08-02 15:13 評論0 收藏0
前端培訓-初級階段-場景實戰（2019-06-06）-Content-Type對照表及日常使用

摘要：前端最基礎的就是。數據被編碼為鍵值對。大法好，精準識別，也算是正確的表單提交。全局的默認值實例默認值創建實例時設置配置的默認值在實例已創建后修改默認值攔截器，可以攔截錯誤，進行上報。參考資料類型看云前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技術水...

張金寶 2019-08-23 17:55 評論0 收藏0
前端培訓-初級階段-場景實戰（2019-05-16）-聊天頭像-微信頭像-群組頭像

摘要：我們先來了解一下需求，微信大家都有吧，拉個群注意觀察群頭像。實現微信頭像布局效果地址，本來是在的，但是大哥最近有點不穩定老連不上。設置一下就好了實現微信頭像布局效果地址，我還是個孩子，寫起來真的煩啊，我就寫前幾個好不好。前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/...

springDevBird 2019-08-02 16:17 評論0 收藏0
前端培訓-初級階段-場景實戰（2019-05-16）-聊天頭像-微信頭像-群組頭像

摘要：我們先來了解一下需求，微信大家都有吧，拉個群注意觀察群頭像。實現微信頭像布局效果地址，本來是在的，但是大哥最近有點不穩定老連不上。設置一下就好了實現微信頭像布局效果地址，我還是個孩子，寫起來真的煩啊，我就寫前幾個好不好。前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/...

Taste 2019-08-26 13:45 評論0 收藏0