用了这么多年的Webpack和Vite,你真的了解服务器的host配置吗?

前言

最近接手了很多项目,devServer的host配置非常凌乱,有配置'localhost',也有配置ip地址的,还有配置0.0.0.0的,虽然自己也工作了这么多年,但是配置他们的区别,我还真的没有仔细思考过,今天我就通过概念和实战效果两个方面让大家了解下

概念

私有IP(局域网)

私有IP地址 通常称内网(即局域网)中的IP地址为私有地址。私有地址是非注册地址,用于组织机构内部使用。私有地址的范围以下:

A类IP地址中:10.0.0.0–10.255.255.255 B类IP地址中:172.16.0.0–172.31.255.255 C类IP地址中:192.168.0.0–192.168.255.255 私有地址与公有地址不一样,并非由Internet分配的,是不容许出如今Internet中的,咱们在公网中是看不到私有IP地址的,而且公有地址也不会使用上述的三类地址。因此,私有地址是不能直接与Internet链接的。
在同一个局域网内,IP地址是惟一的;可是在不一样的局域网内,IP地址是能够重复出现的

公有IP

公有IP地址 通常称公网中的IP地址为公有地址。公有地址由Inter NIC(因特网信息中心)负责,这些IP地址分配给注册并向Inter NIC提出申请的组织机构。
公有地址是全球惟一的,公网中不可能存在两个相同的IP地址。
范围:除了私有地址之外的地址,都属于公有地址
IPV4
根据TCP/IP协议规定,我们现在所用的IPv4地址是由32位二进制数组成,为了方便记忆,人们将组成IP地址的32位二进制分成四段,每段8位2进制数,中间用小数点隔开,然后将每八位二进制转换成十进制数(2^4=256 最大255),这样就有了我们常见的IP地址,如:215.35.130.23。
IPv6
IPv6是英文“Internet Protocol Version 6”(互联网协议第6版)的缩写,是互联网工程任务组(IETF)设计的用于替代IPv4的下一代IP协议
IPv6的128位地址通常写成8组,每组为四个十六进制数的形式(十六进制是4个2进制,四个16进制就是16个2进制 也就是说每段有16个2进制 16*8=128位)。
比如:AD80:0000:0000:0000:ABAA:0000:00C2:0002 是一个合法的IPv6地址
localhost、127.0.0.1和0.0.0.0和本机IP的区别
localhost
localhost实际上是域名,通常windows系统默认将localhost指向127.0.0.1,可是localhost并不等于127.0.0.1,localhost指向的IP地址是能够配置的
修改localhost对应的IP地址
以windows电脑为例 localhost的配置文件地址在下面路径
C:\Windows\System32\drivers\etc\hosts
打开hosts文件我们发现

# localhost name resolution is handled within DNS itself.
# 127.0.0.1 localhost
# ::1 localhost

127.0.0.1
首先咱们要先知道一个概念,凡是以127开头的IP地址,都是回环地址(Loop back address),其所在的回环接口通常被理解为虚拟网卡,并非真正的路由器接口。

所谓的回环地址,通俗的讲,就是咱们在主机上发送给127开头的IP地址的数据包会被发送的主机本身接收,根本传不出去,外部设备也没法经过回环地址访问到本机。

正常的数据包会从IP层进入链路层,而后发送到网络上;而给回环地址发送数据包,数据包会直接被发送主机的IP层获取,不会进入链路层。

而127.0.0.1做为127开头IP地址,也是个回环地址。只不过127.0.0.1常常被默认配置为localhost的IP地址。 通常会经过ping 127.0.0.1来测试某台机器上的网络设备是否工做正常。

0.0.0.0
首先,0.0.0.0是不能被ping通的。在服务器中,0.0.0.0并非一个真实的的IP地址,它表示本机中全部的IPV4地址。监听0.0.0.0的端口,就是监听本机中全部IP的端口。

本机IP
本机IP一般仅指在同一个局域网内,能同时被外部设备访问和本机访问的那些IP地址(可能不止一个)。像127.0.0.1这种通常是不被看成本机IP的。本机IP是与具体的网络接口绑定的,好比以太网卡、无线网卡或者PPP/PPPoE拨号网络的虚拟网卡,想要正常工做都要绑定一个地址,不然其余设备就不知道如何访问它。

实践

概念我们也了解了,接下来,我们以vite项目进行配置实践
Vite.config.ts中的host配置
我们先来看下官网说明
server.host
类型: string | boolean
默认: 'localhost'
指定服务器应该监听哪个 IP 地址。 如果将此设置为 0.0.0.0 或者 true 将监听所有地址,包括局域网和公网地址。
也可以通过 CLI 使用 --host 0.0.0.0 或 --host 来设置。

我的本机局域网ip是10.15.0.50
vite.config.ts server的配置默认的host是localhost,端口号3000
如果host的配置是localhost或者不配置host

export default defineConfig({
 plugins: [vue()],
 server:{
 host:'localhost',
 port:3000,
 },
})

localhost:3000 可访问项目
127.0.0.1:3000 可访问项目
10.15.0.50:3000 不可访问项目
127.0.0.2:3000 不可访问项目
如果host的配置是127.0.0.1

export default defineConfig({
 plugins: [vue()],
 server:{
 host:'127.0.0.1',
 port:3000,
 },
})

localhost:3000 可访问项目
127.0.0.1:3000 可访问项目
10.15.0.50:3000 不可访问项目
127.0.0.2:3000 不可访问项目
效果和配置localhost一样
如果host的配置是10.15.0.50

export default defineConfig({
 plugins: [vue()],
 server:{
 host:'10.15.0.50',
 port:3000,
 },
})

localhost:3000 不可访问项目
127.0.0.1:3000 不可访问项目
10.15.0.50:3000 可访问项目
127.0.0.2:3000 不可访问项目
如果host的配置是0.0.0.0

export default defineConfig({
 plugins: [vue()],
 server:{
 host:'0.0.0.0',
 port:3000,
 },
})

localhost:3000 可访问项目
127.0.0.1:3000 可访问项目
10.15.0.50:3000 可访问项目
127.0.0.2:3000 可访问项目
10.15.0.51:3000 不可访问项目
如果host的配置是true

export default defineConfig({
 plugins: [vue()],
 server:{
 host:true,
 port:3000,
 },
})

结果和host配置0.0.0.0效果一致
补充
上面的几种配置,只要在本机上通过IP地址10.15.0.50:3000访问项目的,局域网内的其他电脑也能通过10.15.0.50:3000访问自己的项目。但是如果只能通过localhost:3000或者127.0.0.1:3000访问不能通过10.15.0.50:3000访问的,那么局域网内其他电脑是不能访问本机电脑项目的

作者:大山原文地址:https://segmentfault.com/a/1190000043824323

%s 个评论

要回复文章请先登录注册