一段萬能的nginx介面反向代理配置
阿新 • • 發佈:2018-12-13
作為前端開發,每次除錯介面,把程式碼發到測試伺服器,是很費時費事的一件事情。為了提高效率,想到了nginx反向代理來解決這一問題。
介面地址:test.com
訪問地址:localhost
最核心的問題就是,登入時,無法寫入cookie的問題,為了解決這個問題,走了不少彎路。
worker_processes 1; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; sendfile on; keepalive_timeout 10; server { listen 80; server_name localhost; location =/ { add_header X-Frame-Options SAMEORIGIN; root D:/workspace/; index index.html; } location ~* \.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|swf|woff|woff2|ttf|json|svg|cur|vue|otf|eot)$ { charset utf-8; root D:/workspace/; expires 3d; } location = /socket/v2 { proxy_pass http://test.com; proxy_redirect off; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_set_header Host test.com; proxy_set_header X-Real-IP $remote_addr; proxy_set_header REMOTE-HOST $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_connect_timeout 30; proxy_send_timeout 30; proxy_read_timeout 60; proxy_buffer_size 256k; proxy_buffers 4 256k; } location / { proxy_pass http://test.com; proxy_set_header Cookie $http_cookie; proxy_cookie_domain test.com localhost; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Host test.com; proxy_set_header X-Real-IP $remote_addr; proxy_set_header REMOTE-HOST $remote_addr; } } }
核心程式碼在三行程式碼上:proxy_set_header Cookie $http_cookie;proxy_cookie_domain test.com localhost;proxy_set_header Host test.com;
具體解釋我也是一知半解:第一個是攜帶cookie,第二個設定cookie 的 domain第三個 設定真實的host
重要提示:以上3個的順序不要顛倒,否則代理失敗,我也不知道為什麼。
如何在手機上除錯呢?
手機上不可能直接訪問localhost,可以把手機和電腦連線到同一個網段,使用電腦的ip進行訪問。但是這裡只代理了localhost,並沒有代理電腦的ip
所以,需要把是上面的server{...}拷貝一份,只需要把裡面的localhost全部改成你的電腦ip就可以了,最終程式碼:
worker_processes 1; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; sendfile on; keepalive_timeout 10; server { listen 80; server_name localhost; location =/ { add_header X-Frame-Options SAMEORIGIN; root D:/workspace/; index index.html; } location ~* \.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|swf|woff|woff2|ttf|json|svg|cur|vue|otf|eot)$ { charset utf-8; root D:/workspace/; expires 3d; } location = /socket/v2 { proxy_pass http://test.com; proxy_redirect off; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_set_header Host test.com; proxy_set_header X-Real-IP $remote_addr; proxy_set_header REMOTE-HOST $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_connect_timeout 30; proxy_send_timeout 30; proxy_read_timeout 60; proxy_buffer_size 256k; proxy_buffers 4 256k; } location / { proxy_pass http://test.com; proxy_set_header Cookie $http_cookie; proxy_cookie_domain test.com localhost; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Host test.com; proxy_set_header X-Real-IP $remote_addr; proxy_set_header REMOTE-HOST $remote_addr; } } server { listen 8080; server_name xx.xx.xx.xx; location =/ { add_header X-Frame-Options SAMEORIGIN; root D:/workspace/; index index.html; } location ~* \.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|swf|woff|woff2|ttf|json|svg|cur|vue|otf|eot)$ { charset utf-8; root D:/workspace/; expires 3d; } location = /socket/v2 { proxy_pass http://test.com; proxy_redirect off; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_set_header Host test.com; proxy_set_header X-Real-IP $remote_addr; proxy_set_header REMOTE-HOST $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_connect_timeout 30; proxy_send_timeout 30; proxy_read_timeout 60; proxy_buffer_size 256k; proxy_buffers 4 256k; } location / { proxy_pass http://test.com; proxy_set_header Cookie $http_cookie; proxy_cookie_domain test.com xx.xx.xx.xx; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Host test.com; proxy_set_header X-Real-IP $remote_addr; proxy_set_header REMOTE-HOST $remote_addr; } } }
訪問方法:
如果是打包工具生成增這個配置的話,可以用nodejs動態獲取你電腦的ip
function getIPAdress() {
var interfaces = require('os').networkInterfaces();
for (var devName in interfaces) {
var iface = interfaces[devName];
for (var i = 0; i < iface.length; i++) {
var alias = iface[i];
if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
return alias.address;
}
}
}
}
所以,這裡貼出來一個動態生成nginx.config的工具
function buildNginxConfig(config) {
function getIPAdress() {
var interfaces = require('os').networkInterfaces();
for (var devName in interfaces) {
var iface = interfaces[devName];
for (var i = 0; i < iface.length; i++) {
var alias = iface[i];
if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
return alias.address;
}
}
}
}
var cwd = process.cwd().replace(/\\/g, '/') + '/app';
var protocol = /https|443/.test(config.ip) ? 'https' : 'http';
var servers = [{
browserIp: 'localhost',
port: 80,
root: cwd,
serverIp: config.ip,
protocol: protocol,
}, {
browserIp: getIPAdress(),
port: 8080,
root: cwd,
serverIp: config.ip,
protocol: protocol,
}].map(function(item) {
return `
server {
listen ${item.port};
server_name ${item.browserIp};
location =/ {
add_header X-Frame-Options SAMEORIGIN;
root ${item.root};
index index.html;
}
location ~* \\.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|swf|woff|woff2|ttf|json|svg|cur|vue|otf|eot)$ {
charset utf-8;
root ${item.root};
expires 3d;
}
location = /socket/v2 {
proxy_pass ${item.protocol}://${item.serverIp};
proxy_redirect off;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host ${item.serverIp};
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_connect_timeout 30;
proxy_send_timeout 30;
proxy_read_timeout 60;
proxy_buffer_size 256k;
proxy_buffers 4 256k;
}
location / {
proxy_pass ${item.protocol}://${item.serverIp};
proxy_set_header Cookie $http_cookie;
proxy_cookie_domain ${item.serverIp} ${item.browserIp};
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host ${item.serverIp};
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
}
}`;
}).join('\n');
var str = `worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 10;
${servers}
}`;
return str;
}
exports = module.exports = buildNginxConfig;
有了這個萬能反向代理,可以隨心所欲的玩轉任何網站介面了