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;
        }
    }
}
  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

赵忠洋

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值