前端也要懂点Nginx配置

现在前端开发用Vue框架,配置后台服务代理时,大家都知道要在vue.config.js的devServer段的proxy里配上代理转发规则,例如:

//in vue.config.js

module.exports = {
  devServer: {  
    proxy: {
      '/user': {
        target: 'http://192.0.0.1:8886/'
      },
      // more
    }
  }
}

但开发完成了,要发布到测试环境就懵了,测试环境服务器用的是Nginx,那咋配呢?

其实不难,说起来,Nginx虽是服务器上的东东,但我理解Nginx既然是前端程序的载体,也算是前端范畴吧,至少也应该大致了解一下。咱们看看怎么把上面这段代理配置改成Nginx的:

#nginx.conf文件
http {
 #别的东西,咱不关心

 server {
    #这里也有很多别的东西

    #到代理配置了:
    location /user {
      proxy_pass http://192.0.0.1:8886/;
    }

    #more
}

注意两者的区别:

1. 前者有引号,后者没有

2. 前者有冒号,后者没有

3. 后者以location 打头

4. 前者的代理"目标"用关键字target,后者“代理传递”,用proxy_pass

当然,这是最最简单的映射关系,两者都是基于正则表达确定转发规则的,Nginx配置可以非常非常复杂,而且还有负载均衡的能力,而前者仅供开发用,所以叫devServer嘛。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值