Nginx自我修煉
1.背景
- 由於最近公司部署代碼使用小型工控機，不再使用Tomcat部署而使用Nginx部署前端代碼，想起自己在三年前學pyhton的時候使用Nginx，現在前端生態環境發展這麼迅速，所以這段時間集中學習了一下 Nginx，同時做了一些筆記，希望也可以幫助到大家～
2.Nginx介紹
Nginx 是開源、高性能、高可靠的 Web 和反向代理服務器，而且支持熱部署，幾乎可以做到 7 * 24 小時不間斷運行，即使運行幾個月也不需要重新啓動，還能在不間斷服務的情況下對軟件版本進行熱更新。性能是 Nginx 最重要的考量，其佔用內存少、併發能力強、能支持高達 5w 個併發連接數，最重要的是，Nginx 是免費的並可以商業化，配置使用也比較簡單。
Nginx 的最重要的幾個使用場景：
靜態資源服務，通過本地文件系統提供服務；
反向代理服務，延伸出包括緩存、負載均衡等；
API 服務，OpenResty ；
對於前端來說 Node.js 不陌生了，Nginx 和 Node.js 的很多理念類似，HTTP 服務器、事件驅動、異步非阻塞等，且 Nginx 的大部分功能使用 Node.js 也可以實現，但 Nginx 和 Node.js 並不衝突，都有自己擅長的領域。Nginx 擅長於底層服務器端資源的處理（靜態資源處理轉發、反向代理，負載均衡等），Node.js 更擅長上層具體業務邏輯的處理，兩者可以完美組合，共同助力前端開發。
下面我們着重學習一下 Nginx 的使用。
3.Nginx安裝及配置文件
首先介紹一下安裝環境 ，目前由於本人剛買了一個阿里的小型服務器，所以採用的是Linux系統，這裏就介紹linux系統安裝nginx,這裏使用的工具就是xshell，附上工具包鏈接：xshell工具包
首先打開自己的連接上服務器如圖所示：
2. 用yum進行安裝必要程序
如果你Linux用的很熟練的話，我想這些程序你一定已經用yum安裝過了，但是如果你還不熟悉Linux，你可以直接用yum進行安裝就可以了。（然後自己百度一下這些東西的用處，這裏不做過多的介紹了，只要照做就可以了）
yum -y install gcc gcc-c++ autoconf pcre-devel make automake
yum -y install wget httpd-tools vim
然後輸入命令來看一下nginx版本
yum list |grep nginx
這裏有個問題有可能出現的沒有最新的nginx版本可能出現的版本比較低，可能是因爲yum源配置的版本比較低，所以可以通過以下命令來配置。
[nginx]
name=nginx repo
baseurl=http://nginx.org/packages/OS/OSRELEASE/$basearch/
gpgcheck=0
enabled=1
當然我使用的centos7版本可以直接vim修改baseurl路徑改成自己所需,一切準備就緒那麼我們就來安裝一下nginx.
yum install nginx
安裝完後輸入nginx -v查看nginx版本
由於我們是全局安裝的nginx，後面會說如何直接把nginx包解壓放在文件夾配置。所以我們想查看我們的nginx文件放在那裏，輸入
rpm -ql nginx
rpm 是linux的rpm包管理工具，-q 代表詢問模式，-l 代表返回列表，這樣我們就可以找到nginx的所有安裝位置了。
圖中可以看到nginx文件基本上都安裝在了etc 和usr文件下面了其中
主要關注的文件夾有兩個：
/etc/nginx/conf.d/ 文件夾，是我們進行子配置的配置項存放處，/etc/nginx/nginx.conf 主配置文件會
默認把這個文件夾中所有子配置項都引入；
/usr/share/nginx/html/ 文件夾，通常靜態文件都放在這個文件夾；
然後vim打開 etc/nginx/nginx.conf文件
進入conf.d目錄，然後使用vim default.conf進行查看，可以在這裏配置訪問前端文件，可以看到nginx默認端口號80，server 塊可以包含多個 location 塊，location 指令用於匹配 url，也可以新建一個conf文件，配置不同的端口號，需要在阿里雲ECS的網絡與安全組配置端口號。
4.Nginx基本操作命令
Nginx 的命令在控制檯中輸入 nginx -h 就可以看到完整的命令，這裏列舉幾個常用的命令：
nginx -s reload # 向主進程發送信號，重新加載配置文件，熱重啓
nginx -s reopen # 重啓 Nginx
nginx -s stop # 快速關閉
nginx -s quit # 等待工作進程處理完成後關閉
nginx -T # 查看當前 Nginx 最終的配置
nginx -t -c <配置路徑> # 檢查配置是否有問題，如果已經在配置目錄，則不需要-c
systemctl 是 Linux 系統應用管理工具 systemd 的主命令，用於管理系統，我們也可以用它來對 Nginx 進行管理，相關命令如下：
systemctl start nginx # 啓動 Nginx
systemctl stop nginx # 停止 Nginx
systemctl restart nginx # 重啓 Nginx
systemctl reload nginx # 重新加載 Nginx，用於修改配置後
systemctl enable nginx # 設置開機啓動 Nginx
systemctl disable nginx # 關閉開機啓動 Nginx
systemctl status nginx # 查看 Nginx 運行狀態
殺死進程有兩種方法。
killall nginx //1.殺死nignx
system stop nginx.service //2.殺死nginx進程
在默認情況下啓動nginx 我們的端口號是80，如何80端口被佔用，就會啓動失敗，我們可以通過netstat -tlnp 查看開啓的端口號：
5.nginx 的訪問權限
deny all/ip; //禁止訪問
allow all/ip //允許訪問
注意：當兩者都存在的權限情況下，先出現的會覆蓋後出現的
在工作中，控制權限需求很複雜，當然可以根據自己的需求進行對權限限制，比如對某個路徑的訪問權限以及對圖片、插件等訪問權限的控制
location = /image{
deny all
}
location = /permission {
allow 47.114.178.212;
deny all;
}
1.= 精確匹配路徑，用於不含正則表達式的 uri 前，如果匹配成功，不再進行後續的查找；
2.^~ 用於不含正則表達式的 uri； 前，表示如果該符號後面的字符是最佳匹配，採用該規則，不再進行後續的查找；
3.~ 表示用該符號後面的正則去匹配路徑，區分大小寫；
4.~* 表示用該符號後面的正則去匹配路徑，不區分大小寫。跟 ~ 優先級都比較低，如有多個location的正則能匹配的話，則使用正則表達式最長的那個；
如果 uri 包含正則表達式，則必須要有 ~ 或 ~* 標誌。
6.nginx配置虛擬主機以及二級域名配置
nginx啓動之後我們可以使用ip訪問 也可以通過域名訪問，在這裏我們只有一臺服務器那麼我們如果想訪問多個服務怎麼辦呢，所以就用到了虛擬主機配置，我們可以在磁盤中配置多個虛擬主機在服務器，把我們的前端項目放在多個虛擬主機啓動服務訪問，我們可以通過設置不同的端口號或者域名配置不同的虛擬主機。
1.端口號配置
之前我們已經提過每一個server下面配置端口號，接下來我們在etc/nginx/conf.d文件下新建一個500.conf文件，配置如下：
server{
listen 5000;
server_name localhost;
root /usr/share/nginx/html/admin;
index index.html;
}
然後在usr/share/nginx/html下面新建一個admin文件，然後在該目錄下新建index.html
<h1>我是端口號5000內容</h1>
然後要在阿里雲安全管理組配置端口號5000；接下來我們執行nginx -s reload 可以看到我們的5000端口已經啓動了，在地址欄中輸入相應的ip端口號看到頁面就說明已經配置成功,我們就可以通過配置不同的端口號來訪問不同的靜態資源文件
2.配置虛擬機已經二級域名
我們在工作中基本上都是通過對域名進行配置來配置虛擬主機，當然可以通過買域名來註冊，備案，備案一般需要兩級審覈，大概半個月左右，
看到我們註冊域名，點擊解析可以看到有兩個默認的解析都是指向當前默認80端口的ip，可以在default.conf文件的server_name 配置要訪問的ip,然後在地址欄輸入不同的域名可以訪問到不同的靜態資源文件
7.配置反向代理
說到反向代理，我們知道解決跨越的方法一般有：
- 前端配置proxy
- nginx配置反向代理
- 後臺配置cors響應頭
作爲一個前端，前後端分離的情況下，基本上我們開發過程中，經常會本地起服務訪問我們的後臺小夥伴的後臺服務，調試接口難免會遇到跨域問題。
我們通過訪問一個服務器地址，通常會設置代理轉向其他的ip地址；接下來我們操作一下，打開我們的500.conf 文件，添加代碼保存，重啓一下nginx,接下來訪問一下我們的網站會發現地址沒變內容是百度頁面，說明反向代理到www.baidu.com這裏;
location / {
proxy_pass www.baidu.com
}
8.Gzip壓縮
在我們安裝的nginx默認是沒有開啓gzip的，通常我們在vue-cli項目打包的時候會發現當我們打包完成之後分析打包文件的時候看到gizp的壓縮包會非常小。
這裏 分享一下nginx Gzip壓縮配置文件
#開啓gzip壓縮
gzip on;
#http的協議版本
gzip_http_version 1.0;
#IE版本1-6不支持gzip壓縮，關閉
gzip_disable 'MSIE[1-6].';
#需要壓縮的文件格式 text/html默認會壓縮，不用添加
gzip_types text/css text/javascript application/javascript
image/jpeg image/png image/gif;
#設置壓縮緩衝區大小，此處設置爲4個8K內存作爲壓縮結果流緩存
gzip_buffers 4 8k;
#壓縮文件最小大小
gzip_min_length 1k;
#壓縮級別1-9
gzip_comp_level 9;
#給響應頭加個vary，告知客戶端能否緩存
gzip_vary on;
#反向代理時使用
gzip_proxied off;
當然在vue.config.js文件裏webpack配置上生產環境的時候加上壓縮代碼,在nignx上打開gzip 然後打開我們的網站，f12控制檯可以看到響應頭裏面是否有content-encoding: gzip，如果有就代表gzip打開，有的首頁背景圖片很大，以及文件較大時gzip還是有一個不錯的效果壓縮率大大提高
config.plugins.push(
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp('\\.(' +
productionGzipExtensions.join('|') +
')$'), //匹配文件名
threshold: 10240, //對10K以上的數據進行壓縮
minRatio: 0.8,
deleteOriginalAssets: false, //是否刪除源文件
}),
)
最後我們在檢測壓縮網站可以看到我之前做的網站壓縮率還是挺大的
結尾
基本上本人工作中基本上接觸的nginx更多就是這些，接下來準備爲了pm2部署docker 做一下自己遇到的坑。隨便折騰折騰。
個人參考文檔：
Nginx中文文檔
Nginx快速入門
Nginx Gzip壓縮
Nginx從入門到實踐