nginx代理部署Vue與React項目

nginx代理部署Vue與React項目

一,介紹與需求

 1.1,介紹

Nginx (engine x) 是一個高性能的HTTP和反向代理服務，也是一個IMAP/POP3/SMTP服務。Nginx是由伊戈爾·賽索耶夫爲俄羅斯訪問量第二的Rambler.ru站點（俄文：Рамблер）開發的，第一個公開版本0.1.0發佈於2004年10月4日。

Nginx是一款輕量級的Web 服務器/反向代理服務器及電子郵件（IMAP/POP3）代理服務器，並在一個BSD-like 協議下發行。其特色是佔有內存少，併發能力強，事實上nginx的併發能力確實在同類型的網頁服務器中表現較好，中國大陸使用nginx網站用戶有：百度、京東、新浪、網易、騰訊、淘寶等。

 1.2,需求

 打包代理部署web項目

二,安裝配置nginx

主要記錄在windows10 下安裝nginx

第一步:到nginx官網上下載相應的安裝包

第二步:下載進行解壓，將解壓後的文件放到本身心儀的目錄下，個人解壓文件放在了d盤根目錄下，以下圖所示：

第三步:進入window的cmd窗口，輸入以下圖所示的命令，進入到nginx目錄（D:\nginx-1.15.8），使用「start nginx.exe 」進行nginx的啓動，以下圖所示：

啓動成功後，在「任務管理器」中會看到「nginx.exe」進程

第四步:在瀏覽器地址欄輸入：127.0.0.1，會看nginx歡迎界面；若是發現進程中並無，那麼說明啓動失敗，你能夠到你的D:\nginx-1.15.8目錄輸入ngnix查看，

若是發現裏面寫着：

則表示80端口被佔用。

解決辦法：修改nginx配置文件nginx.conf,將默認端口80改爲其餘的

1     server {
2         listen       80;#80->8000
3         server_name  localhost;
4 
5         #charset koi8-r;

此時此刻，能夠再次執行 

 相應的命令：start nginx.exe 命令了。

nginx.exe -s stop                   //中止nginx

nginx.exe -s reload                //從新加載nginx

nginx.exe -s quit                     //退出nginx

注：以上的命令中，.exe能夠去掉

效果：

 

三,代理部署項目

1,React項目打包

2,Vue項目打包

配置ngnix的配置文件nginx.conf,而後重啓運行便可

 1     #gzip  on;
 2 
 3     server {
 4         listen       8000;
 5         server_name  localhost;
 6 
 7         #charset koi8-r;
 8 
 9         #access_log  logs/host.access.log  main;
10 
11         root F:\project\web\dist;#react/vue項目的打包後的dist 12         # index index.html index.htm;
13  
14         # location / {
15         #         try_files $uri $uri/ /index.html;
16         # }
17 
18        #代理後臺接口
19          location /api/ { 20              proxy_pass http://127.0.0.1:9080;#轉發請求的地址
21              proxy_connect_timeout 6000;#連接超時設置 22              proxy_read_timeout 6000;#訪問接口超時設置 23        }
24         #error_page  404              /404.html;
25 
26         # redirect server error pages to the static page /50x.html
27         #
28         error_page   500 502 503 504  /50x.html;
29         location = /50x.html {
30             root   html;
31         }
32     }

 參數介紹

1 proxy_pass http://127.0.0.1:9080;#轉發請求的地址;設置被代理服務器的端口或套接字，以及URL
2 proxy_connect_timeout 90;//後端服務器鏈接的超時時間_發起握手等候響應超時時間
3 proxy_read_timeout 180;//鏈接成功後_等候後端服務器響應時間_其實已經進入後端的排隊之中等候處理（也能夠說是後端服務器處理請求的時間）
4 proxy_send_timeout 180;//後端服務器數據回傳時間_就是在規定時間以內後端服務器必須傳完全部的數據
5 proxy_buffer_size 256k;//設置從被代理服務器讀取的第一部分應答的緩衝區大小，一般狀況下這部分應答中包含一個小的應答頭，默認狀況下這個值的大小爲指令proxy_buffers中指定的一個緩衝區的大小，不過能夠將其設置爲更小
6 proxy_buffers 4 256k;//設置用於讀取應答（來自被代理服務器）的緩衝區數目和大小，默認狀況也爲分頁大小，根據操做系統的不一樣多是4k或者8k

index index.html index.htm index.php; #首頁排序