如何配置nginx，實如今手機上查看頁面？

這裏是修真院前端小課堂，每篇分享文從

【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴展思考】【更多討論】【參考文獻】

八個方面深度解析前端知識/技能，本篇分享的是：

【如何配置nginx，實如今手機上查看頁面？ 】

你們好，我是IT修真院北京分院第20期的學員王野，一枚正直純潔善良的程序員

今天給你們分享一下，修真院官網JS任務4，深度思考中的知識點——如何配置nginx，實如今手機上查看頁面？

1、背景介紹

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頭

穩定性高：用於反向代理，宕機機率微乎其微

2、下載安裝

官方網址

下載後直接點擊nginx.exe程序，你會發現有個黑色彈出框一閃即逝；說明成功啓動；

而後隨便打開一個瀏覽器；輸入localhost出現下圖:

3、具體測試方法

Nginx的配置文件是文件夾中的conf文件下的nginx.conf，其實配置文件默認不修改也是可有用的；若是你經過瀏覽器輸入localhost出現的頁面即爲文件夾下HTML文件中的index.html；因此你能夠將你想要檢測的產品放到HTML文件夾中，並將本來的index.html文件給刪了，這個時候打開網頁輸入localhost，使用ctrl+F5清下瀏覽器緩存即出現你產品中的index.html(產品的首頁都會命名爲index.html）頁面，而後進行一系列測試看看是否OK

4、修改配置

實際的測試過程當中，通常不大可能會將產品放入nginx文件裏的html文件夾中，這個時候就須要修改配置，使匹配的路徑改成咱們想要的文件夾

要注意的是，在本地路徑裏的文件路徑要將斜槓換成「」，「/」會將以後的地址轉義，必定要注意。

而且，每次修改nginx配置文件後要重啓nginx。

5、操做演示

見網盤視頻

6、如何在手機端訪問

首先，電腦和手機鏈接上同一個wifi而後查看電腦ip:win+R→cmd→ipconfig→回車, 找到無限局域網適配器wlan中的ip地址，例如個人是192.168.0.119而後手機瀏覽器中輸入192.168.01.119/task1.html 就能夠看到本身的代碼

7、常見問題

一、出現報錯，如何解決？

在nginx的文件目錄裏又一個logs的文件夾，這裏有nginx全部運行的記錄。

打開logs文件夾能夠看到error.log文件，這裏就是全部nginx運行的錯誤報告。

運行nginx出現問題後，能夠打開此文件，選擇對應時間的錯誤記錄，自行查找。

最長見的錯誤就是

5832#3120: unknown directive "" in E:nginxnginx-1.12.0/conf/nginx.conf:2

這是因爲配置文件的編碼格式不對，從新將配置文件改成UTF-8編碼就能夠了。

二、什麼是跨域？

跨域，指的是瀏覽器不能執行其餘網站的腳本。它是由瀏覽器的同源策略形成的，是瀏覽器對javascript施加的安全限制。

所謂同源是指，域名，協議，端口相同。瀏覽器執行javascript腳本時，會檢查這個腳本屬於那個頁面，若是不是同源頁面，就不會被執行

PPT地址

百度網盤地址：點我 提取密碼：9udv

8、參考文獻

參考一：深度開源

參考二：服務器運維架構

參考三：古塵師姐的知乎回答

參考四：百度百科

參考五：瀏覽器同源策略

9、更多討論

三、還有更多的跨域方式嗎

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 函數裏.（動態執行回調函數）

四、在配置路徑的時候爲何用E:wytask，E:task等路徑都會顯示錯誤

在本地路徑裏的文件路徑要將斜槓換成「」，「/」會將以後的地址轉義，必定要注意