前言

Nginx (engine x) 是一個高性能的HTTP和反向代理服務(wù)器，也是一個IMAP/POP3/SMTP服務(wù)器。

Nginx是由伊戈爾·賽索耶夫為 俄 羅 斯 訪問量第二的Rambler.ru 站點（俄 文：Рамблер）開發(fā)的它也是一種輕量級的Web服務(wù)器，可以作為獨立的服務(wù)器部署網(wǎng)站（類似Tomcat）。

它高性能和低消耗內(nèi)存的結(jié)構(gòu)受到很多大公司青睞，如 淘 寶 網(wǎng) 站 架設(shè)。。

安裝步驟

1、下載Nginx

下載地址：http://nginx.org/en/download.html （Nginx官網(wǎng)）

 2、下載之后，解壓到指定的目錄，就可以看到以下的目錄

 3、控制臺（CMD）切換到Nginx目錄下，輸入start nginx ，然后在瀏覽器頁面輸入localhost，出現(xiàn)如下界面則表示安裝成功。默認(rèn)監(jiān)聽80端口號。

4、nginx命令介紹

• （1）start nginx 開啟nginx服務(wù)
• （2）nginx.exe -s stop 關(guān)閉nginx服務(wù)，快速停止nginx，可能并不保存相關(guān)信息
• （3）nginx.exe -s quit 關(guān)閉nginx服務(wù)，完整有序的停止nginx，并保存相關(guān)信息
• （4）nginx.exe -s reload 重載nginx服務(wù)，當(dāng)你改變了nginx配置信息并需要重新載入這些配置時可以使用此命令重載nginx
• （5）使用 taskkill /F /IM nginx.exe > nul命令強(qiáng)關(guān)nginx服務(wù)器

訪問自己的項目

hash模式

1.打包

npm run build

2.把生成的dist目錄，放到html目錄下。

3.瀏覽器訪問：localhost/dist/index.html就可以看到頁面了。

 當(dāng)你使用 history 模式時，url就像正常的url，例如：

“http://yoursite.com/mapp/”，不過這種模式還需要后臺配置支持。因為我們的應(yīng)用是單頁面應(yīng)用，如果后臺沒有正確的配置，當(dāng)用戶在瀏覽器直接訪問 "http://yoursite.com/mapp/home"就會返回 404。

location / {
  try_files $uri $uri/ /index.html;
}

子目錄部署

若項目沒有直接部署在Nginx主目錄下,而是在其子目錄，如：

Nginx配置root路徑為:/usr/local/nginx/html，子目錄路徑為：/usr/local/nginx/html/dist,此時Nginx應(yīng)該這樣配置:

location / {
  try_files $uri $uri/ /dist/index.html;
}

Nginx轉(zhuǎn)發(fā)時Header中信息丟失

通過Nginx轉(zhuǎn)發(fā)后, Header中access_token信息丟失，經(jīng)查，發(fā)現(xiàn)Nginx在轉(zhuǎn)發(fā)時，header中帶下劃線_的屬性默認(rèn)不轉(zhuǎn)發(fā)，需要增加配置：

underscores_in_headers on;

如下所示：

location / {
root   html/dist/;
try_files $uri $uri/ /dist/index.html;  
index index.html;
        }

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論