如何配置nginx，實現在手機上檢視頁面？
這裡是修真院前端小課堂，每篇分享文從
【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴充套件思考】【更多討論】【參考文獻】
八個方面深度解析前端知識/技能，本篇分享的是：
【如何配置nginx，實現在手機上檢視頁面？ 】
大家好，我是IT修真院北京分院第20期的學員王野，一枚正直純潔善良的程式設計師
今天給大家分享一下，修真院官網JS任務4，深度思考中的知識點——如何配置nginx，實現在手機上檢視頁面？
一、背景介紹
Nginx是一個高效能的HTTP和反向代理伺服器，在產品上線的前一刻，為了測試產品上線後的效果，安裝nginx可以用你的電腦作為模擬主機來測試產品的功能
http伺服器——反向代理伺服器
HTTP是Web協議中的重要協議，它是從客戶機/伺服器模型發展起來的。客戶機/伺服器是執行一對相互通訊的程式，客戶與伺服器連線時，首先，向伺服器提出請求，伺服器根據客戶的請求，完成處理並給出響應。
反向代理（Reverse Proxy）方式是指以代理伺服器來接受internet上的連線請求，然後將請求轉發給內部網路上的伺服器，並將從伺服器上得到的結果返回給internet上請求連線的客戶端。
那麼nginx都有哪些應用呢
在國內，已經有 淘寶、新浪部落格、新浪播客、網易新聞、六間房、56.com、Discuz!、水木社群、豆瓣、YUPOO、海內、迅雷線上 等多家網站使用 Nginx 作為Web伺服器或反向代理伺服器。
在國外，運用在俄羅斯最大的入口網站Rambler上，同時被俄羅斯超過20%的虛擬主機平臺採用作為反向代理伺服器。
Nginx的優勢
跨平臺：能在大多數Unix like os編譯執行，而且也有Windows移植版本
配置簡單：非常容易上手，配置風格跟程式開發一樣
非阻塞、高併發連線：官方測試支撐5萬，實際環境也能到2~3萬
事件驅動：採用epoll模型，支援更大的併發連線
Master/Worker程序：一個master程序，生成一個或者多個worker程序
記憶體消耗小：3萬併發，開10個Nginx程序才消耗150M記憶體
內建的健康檢查功能：Nginx代理的後端的某臺Web伺服器宕機時不影響前端訪問
節省寬頻：支援GZIP壓縮，可以新增瀏覽器本地的Header頭
穩定性高：用於反向代理，宕機概率微乎其微
二、下載安裝
下載後直接點選nginx.exe程式，你會發現有個黑色彈出框一閃即逝；說明成功啟動；
然後隨便開啟一個瀏覽器；輸入localhost出現下圖:
三、具體測試方法
Nginx的配置檔案是資料夾中的conf檔案下的nginx.conf，其實配置檔案預設不修改也是可有用的；如果你通過瀏覽器輸入localhost出現的頁面即為資料夾下HTML檔案中的index.html；所以你可以將你想要檢測的產品放到HTML資料夾中，並將原本的index.html檔案給刪了，這個時候開啟網頁輸入localhost，使用ctrl+F5清下瀏覽器快取即出現你產品中的index.html(產品的首頁都會命名為index.html）頁面，然後進行一系列測試看看是否OK
四、修改配置
實際的測試過程中，一般不大可能會將產品放入nginx檔案裡的html資料夾中，這個時候就需要修改配置，使匹配的路徑改為我們想要的資料夾
要注意的是，在本地路徑裡的檔案路徑要將斜槓換成“\”，“/”會將之後的地址轉義，一定要注意。
並且，每次修改nginx配置檔案後要重啟nginx。
五、操作演示
見網盤視訊
六、如何在手機端訪問
首先，電腦和手機連線上同一個wifi然後檢視電腦ip:win+R→cmd→ipconfig→回車, 找到無限區域網介面卡wlan中的ip地址，例如我的是192.168.0.119然後手機瀏覽器中輸入192.168.01.119/task1.html 就可以看到自己的程式碼
七、常見問題
1、出現報錯，如何解決？
在nginx的檔案目錄裡又一個logs的資料夾，這裡有nginx所有執行的記錄。
開啟logs資料夾可以看到error.log檔案，這裡就是所有nginx執行的錯誤報告。
執行nginx出現問題後，可以開啟此檔案，選擇對應時間的錯誤記錄，自行查詢。
最長見的錯誤就是
5832#3120: unknown directive "" in E:\nginx\nginx-1.12.0/conf/nginx.conf:2
這是由於配置檔案的編碼格式不對，重新將配置檔案改為UTF-8編碼就可以了。
2、什麼是跨域？
跨域，指的是瀏覽器不能執行其他網站的指令碼。它是由瀏覽器的同源策略造成的，是瀏覽器對javascript施加的安全限制。
所謂同源是指，域名，協議，埠相同。瀏覽器執行javascript指令碼時，會檢查這個指令碼屬於那個頁面，如果不是同源頁面，就不會被執行
百度網盤地址：點我 提取密碼：9udv
八、參考文獻
參考一：深度開源
參考二：伺服器運維架構
參考三：古塵師姐的知乎回答
參考四：百度百科
參考五：瀏覽器同源策略
九、更多討論
3、還有更多的跨域方式嗎
1.使用iFrame訪問另一個域。 然後再從另一個頁面讀取iFrame的內容。包含jquery在內的庫都有一些封裝。據說Firefox等可能不支援讀取另一個iFrame的內容。
2.window.name 和 postMessage
window.name 和 postMessage 主要都側重於純前端頁面之間的資料通訊，前者利用了 “ 在同一瀏覽器視窗載入的不同頁面（ 無論它們是否不同域 ），共享同一個window.name，並且都對 window.name 有讀寫的許可權 ” 的這一特性來實現頁面間的資料交換，後者則是HTML5的API，不同域下的頁面在滿足一定關係的條件下可以通過此API跨域傳送資料。
3.通過jsonp跨域
動態script標籤+回撥函式
SCRIPT標籤是不受同源策略限制的，可以直接通過動態構造SCRIPT標籤實現跨域。JSONP在此基礎上增加了回撥函式，功能更強大
首先在客戶端註冊一個CALLBACK, 然後把CALLBACK的名字傳給伺服器。此時，伺服器先生成 JSON 資料。 然後以 JAVASCRIPT 語法的方式，生成一個FUNCTION , FUNCTION 名字就是傳遞上來的引數 JSONP.最後將 JSON 資料直接以入參的方式， 放置到 FUNCTION 中，這樣就生成了一段 JS 語法的文件，返回給客戶端。客戶端瀏覽器，解析SCRIPT標籤，並執行返回的 JAVASCRIPT 文件， 此時資料作為引數，傳入到了客戶端預先定義好的 CALLBACK 函式裡.（動態執行回撥函式）
4、在配置路徑的時候為什麼用E:\wy\task，E:\task等路徑都會顯示錯誤
在本地路徑裡的檔案路徑要將斜槓換成“\”，“/”會將之後的地址轉義，一定要注意。
------------------------------------------------------------------------------------------------------------------------
技能樹.IT修真院
“我們相信人人都可以成為一個工程師，現在開始，找個師兄，帶你入門，掌控自己學習的節奏，學習的路上不再迷茫”。
這裡是技能樹.IT修真院，成千上萬的師兄在這裡找到了自己的學習路線，學習透明化，成長可見化，師兄1對1免費指導。快來與我一起學習吧 ！
作者：吥好使
連結：https://www.jianshu.com/p/6c29733c768c
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。
更多內容，可以加入IT交流群565734203與大家一起討論交流
這裡是技能樹·IT修真院：https://www.jnshu.com，初學者轉行到網際網路的聚集地