1.什么是nginx？為什么要用這個？為什么要用反向代理？
Nginx功能豐富，可作為HTTP服務器，也可作為反向代理服務器。
-
什么是反向代理？
看圖 
-
反向代理對比正向代理的優勢是什么？
看圖可以知道，正向代理是收到所有請求然后直接交給網絡。
但是反向代理是代理服務器，可以根據你的請求，找到想要的服務器。好處是什么類型請求找到什么類型的服務器。
Nginx可以根據不同的正則匹配，采取不同的轉發策略，比如圖片文件結尾的走文件服務器，動態頁面走web服務器，只要你正則寫的沒問題，又有相對應的服務器解決方案，你就可以隨心所欲的玩。
並且Nginx對返回結果進行錯誤頁跳轉，異常判斷等。如果被分發的服務器存在異常，他可以將請求重新轉發給另外一台服務器，然后自動去除異常服務器。
2.使用場景
前端的vue2.0項目(vue-cli4x搭建)，打包后部署到服務器，提供獨立的服務。后端也是獨立的服務。
最終目標，外網能正常訪問該項目。
3.使用步驟
- 登錄上服務器，服務器是window系統。
- 下載nginx
- 將項目放進html文件夾里面。
- 對nginx進行配置
- conf文件夾的nginx.conf文件有nginx的默認配置
-
大體結構如下：
... #全局塊：配置影響nginx全局的指令 events { #events塊：配置影響nginx服務器或與用戶的網絡連接 ... } http #http塊：可以嵌套多個server，配置代理，緩存，日志定義等絕大多數功能和第三方模塊的配置 { ... #http全局塊 server #server塊：配置虛擬主機的相關參數，一個http中可以有多個server { ... #server全局塊 location [PATTERN] #location塊：配置請求的路由，以及各種頁面的處理情況 { ... } location [PATTERN] { ... } } server { ... } ... #http全局塊 } - 菜鳥教程上面的配置項解釋挺清晰的，https://www.runoob.com/w3cnote/nginx-setup-intro.html
- 一些重點字段：
location：配置請求的路由，以及各種頁面的處理情況。-
#location后面接正則，對該正則頁面進行處理，~ 為區分大小寫，~* 為不區分大小寫
location ~*^.+$ { root html; #根目錄，項目文件放的地方，默認從nginx.exe所在目錄開始找的，所以謝html文件夾即可 index index.html #設置默認頁，項目打包后，會有個index.html
try_files $uri $uri/ /index.html; #后端支持 hash 變為 history 的關鍵代碼，這個不是很懂，應該是支持vue項目路由的字段。 #proxy_pass http://xxxxxxxx; #請求轉向xxxxxxxx 定義的服務器列表，這個沒有用到 #deny 127.0.0.1; #拒絕的ip #allow 172.18.5.54; #允許的ip }
-
- listen：監聽的端口號
- server_name: 監聽的地址
- proxy_pass: 請求轉向該鍵值，沒有用到。
- 配置完需要重新啟動nginx,完全結束nginx服務的方法有多種，我用的是任務管理器結束掉所有nginx服務。然后點擊nginx.exe文件重啟。
- 重啟完可以看下logs文件夾下面的error.log是否有報錯，有錯改錯。
- 外網可以訪問
4.注意事項
- 需要外網能訪問的話，有些公司是由限制的，找運維開一下外網可用端口。
- 防火牆設置，端口不放開的話一般是攔截了的。
- 需要外網能訪問的話，需要用到的是域名，ip地址只能內網使用，接口也是。
- 公司內網訪問白屏問題，項目中的路由需要添加一個根路徑，即path:'/',不然刷新后會出現空白頁。
5.nginx相關地址