nginx反向代理(前端 開發環境、測試環境、生產環境 解決方案)

什麼是Nginx

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

前端使用Nginx的業務場景

• 單頁面應用的開發與部署
• 傳統頁面的本地開發
• 前端直接調用三方接口

運行原理

graph LR
訪問-->nginx服務
nginx服務-->前端服務
nginx服務-->接口服務
nginx服務-->第三方服務

配置文件詳解

http{
    server {
	    # 端口號
        listen 80;
        
        # 監聽443
        listen 443;
        
        # https 開啓
        ssl on;
        
        # https 證書
        ssl_certificate /root/ssl/SSL.crt;
        ssl_certificate_key /root/ssl/private.key;
        
        # 服務地址ip或者域名
        server_name www.ahh5.com;
        
        # 默認請求文件(可忽略)
        index index.html index.php
        
        # 本地文件存放目錄（例如html,css,js,img）
        root /www/wwwroot/測試;
        
        # http強制轉換https
        if ($server_port !~ 443){
            rewrite ^(/.*)$ https://$host$1 permanent;
        }
        
        # 日誌路勁設置
        access_log /var/log/nginx/nginx.vhost.access.log;
        error_log /var/log/nginx/nginx.vhost.error.log;
        
        #錯誤頁配置
        error_page 404 /404.html;
        error_page 502 /502.html;
        
        # = 開頭表示精確匹配
        location = / {  
             
        }
        
        # ^~ 開頭表示uri以某個常規字符串開頭，理解爲匹配 url路徑即可。nginx不對url做編碼，
        location ^~ /static/ {  
          
        }  
        
        # ~ 開頭表示區分大小寫的正則匹配
        location ~ \.(gif|jpg|png|js|css)$ {  
           
        }  
        
        # ~*開頭表示不區分大小寫的正則匹配
        location ~* \.png$ {  
           
        }  
        
        # !~ 區分大小寫不匹配
        location !~ \.xhtml$ {  
           
        }
        
        # !~* 不區分大小寫不匹配
        location !~* \.xhtml$ {  
           
        }  
        
        # / 通用匹配，任何請求都會匹配到。
        location / {  
           
        } 
        
        # location 詳解
        location /home{
            
            # 設置默認文件
            index  index.html;
            
            # 設置靜態目錄
            root /webroot/static/;  
            
            # 端口轉發
            proxy_pass http://www.ahh5.com:8080/index
            
            # header 設置host 
            proxy_set_header Host $host;
            
            # header 設置 ip 1
            proxy_set_header X-Real-IP $remote_addr;
            
            # header 發出請求的客戶機的完整的域名
            proxy_set_header REMOTE-HOST $remote_addr;
            
            # X-Forwarded-For 代理信息內容
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
    }
}

匹配順序

首先匹配 =，其次匹配^~, 其次是按文件中順序的正則匹配，最後是交給 / 通用匹配。當有匹配成功時候，停止匹配，按當前匹配規則處理請求。

匹配及轉發規則

Location block 的基本語法形式是：

    location [=|~|~*|^~] pattern { ... }

[=|~|~*|^~] 被稱作 location modifier ，這會定義 Nginx 如何去匹配其後的 pattern ，以及該 pattern 的最基本的屬性（簡單字符串或正則表達式）

實際應用

開發環境(spa)

http{
    server {
	    #配置端口號
        listen 9999;
        #配置server_name
        server_name 127.0.0.1;
        #設置默認頁面 地址爲webpack-devserver地址
        location = / {
            proxy_pass http://127.0.0.1:8888/#/home;
        }
        #這裏因爲我的的vue-router 所以將帶#號的請求轉發到本地服務器
        location ~ .*#.*$ {
            proxy_pass http://127.0.0.1:8888;
        }
        #請求網頁 圖片 icon 等都會轉發到本地服務器上
        location ~ .*\.(js|css|htm|html|gif|jpg|jpeg|png|bmp|swf|ico|rar|zip|txt|flv|mid|doc|ppt|pdf|xls|mp3|wma|eot|woff|ttf|svg)$ {
            proxy_pass http://127.0.0.1:8888;
        }
        #請求後端接口的服務器地址
        location ~ .*$ {
            proxy_pass http://10.10.1.135:8080;
        }
    }
}

測試環境(spa)

http{
    server {
	    #配置端口號
        listen 9999;
        #配置server_name
        server_name 127.0.0.1;
        #設置默認頁面 root 爲靜態文件目錄
        location = / {
            index  index.html;
            root /html;
        }
         #這裏因爲我的的vue-router 所以將帶#號的請求轉發到靜態目錄
        location ~ .*#.*$ {
             root /html;
        }
        #請求網頁 圖片 icon 等都會轉發到nginx靜態目錄下
        location ~ .*\.(js|css|htm|html|gif|jpg|jpeg|png|bmp|swf|ico|rar|zip|txt|flv|mid|doc|ppt|pdf|xls|mp3|wma|eot|woff|ttf|svg)$ {
            root /html;
        }
        #請求後端接口的服務器地址
        location ~ .*$ {
            proxy_pass http://10.10.1.135:8080;
        }
    }
}

生產環境搭建(spa)

http{
    server {
	    #配置端口號
        listen 80;
        #配置server_name
        server_name www.xxx.com;
        #設置默認頁面 root 爲靜態文件目錄
        location = / {
            index  index.html;
            root /html;
        }
         #這裏因爲我的的vue-router 所以將帶#號的請求轉發到靜態目錄
        location ~ .*#.*$ {
             root /html;
        }
        #請求網頁 圖片 icon 等都會轉發到nginx靜態目錄下
        location ~ .*\.(js|css|htm|html|gif|jpg|jpeg|png|bmp|swf|ico|rar|zip|txt|flv|mid|doc|ppt|pdf|xls|mp3|wma|eot|woff|ttf|svg)$ {
            root /html;
        }
        #請求後端接口的服務器地址
        location ~ .*$ {
            proxy_pass http://api.xxx.com;
        }
    }
}

開發環境搭建(傳統頁面)

http{
    server {
	    #配置端口號
        listen 80;
        #配置server_name
        server_name www.xxx.com;
        #設置默認頁面 root 爲靜態文件目錄
        location = / {
            index  index.html;
            root /html;
        }
        #請求網頁 圖片 icon 等都會轉發到nginx靜態目錄下
        location ~ .*\.(js|css|htm|html|gif|jpg|jpeg|png|bmp|swf|ico|rar|zip|txt|flv|mid|doc|ppt|pdf|xls|mp3|wma|eot|woff|ttf|svg)$ {
            root /html;
        }
        #請求後端接口的服務器地址
        location ~ .*$ {
            proxy_pass http://api.xxx.com;
        }
    }
}