Obeta

使用DNSmasq搭建自己的DNS服务器

有时候我们本地开发的时候也需要跟服本地务器进行通信,但是为了测试方便和一些其他的因素,需要通过域名来访问本地的开发服务器,因此可以搭建一个自己的本地DNS服务器来解决这个问题.

这里我们使用DNSmasq来搭建 mac 平台上的 dns 服务器.

安装

使用homebrew来安装:

brew install dnsmasq

安装完成后会输出以下内容:

#...以上省略
To configure dnsmasq, take the default example configuration at
  /usr/local/etc/dnsmasq.conf and edit to taste.

To have launchd start dnsmasq now and restart at startup:
  sudo brew services start dnsmasq
== Summary
🍺  /usr/local/Cellar/dnsmasq/2.79: 8 files, 516.3KB

配置

配置之前我们需要新建一个自己的 hosts 文件保存为masq.hosts, 放到你想存储的位置,比如放到~/Document下面:

# My hosts # # localhost is used to configure the loopback interface # when the
system is booting. Do not change this entry. ## 127.0.0.1 localhost
255.255.255.255 broadcasthost ::1 localhost 127.0.0.1 obeta.me 127.0.0.1
obeta.me

然后直接打开并编辑配置dnsmasq.conf文件,改动两行

addn-hosts=~/Document/masq.hosts        //指定需要解析的hosts文件位置
listen-address=127.0.0.1,x.x.x.x        //监听需要解析域名的地址

如果你想局域网中其他人也能使用测试,请将上面的x.x.x.x更换为你自己的局域网地址,否则去掉.

最后重启dnsmasq服务器:

sudo brew services restart dnsmasq

mac 设置

mac dnsmasq network
mac dnsmasq network

打开 mac 的网络设置,设置 dns 如上,第二行的192.168.10.5是我局域网的 dns 服务器,因此你并不需要加上那个.

第一行是本地我们刚刚配置的,最后两行是 Google 的解析,如果你觉得太慢可以换成114.114.114.114,但是好像很多人说这家 dns 服务商会嵌入各种广告,请小心使用.

其它问题

当你打开obeta.me的时候发现并没有正确打开页面,这是因为 dns 只是指向了本地的 ip 地址,但是并没有说要去哪个端口通信(默认的是 80 端口),但是我们不可能只有一个程序监听这 80 端口,因此我们需要通过 nginx 代理来帮助我们完成这个工作.

http {
	upstream obeta {
		server 127.0.0.1:3000;
	}
	upstream obetaServer {
		server 127.0.0.1:5000;
	}

	server {
		listen 80;
		server_name obeta.me;
		return 301 http://www.$host$request_uri;
	}
	server {
		listen 80;
		server_name obeta.me;

		# 默认所有请求代理到obeta
		location / {
			proxy_pass http://obeta;
			proxy_set_header  Host               $host;
			proxy_set_header  X-Real-IP          $remote_addr;
		}

		# url如果是/api开头的请求直接代理到obetaServer
		location ~ ^/api {
			proxy_pass http://obetaServer;
			proxy_set_header  Host               $host;
			proxy_set_header  X-Real-IP          $remote_addr;
			proxy_set_header  X-Forwarded-For    $proxy_add_x_forwarded_for;
			proxy_set_header  X-Forwarded-Proto  $scheme;
			proxy_http_version  1.1;
			proxy_set_header Upgrade $http_upgrade;
			proxy_set_header Connection $connection_upgrade;
			proxy_set_header Front-End-Https      on;
		}

		# react-scripts 监听文件改动进行刷新页面的websocket接口
		location ~ ^/sockjs-node {
			proxy_pass http://obeta;
			proxy_set_header  Host   $host;
			proxy_http_version  1.1;
			proxy_set_header upgrade $http_upgrade;
			proxy_set_header connection $connection_upgrade;
			proxy_read_timeout 86400;
			proxy_set_header x-real-ip $remote_addr;
			proxy_set_header x-forwarded-for $proxy_add_x_forwarded_for;
			proxy_set_header x-nginx-proxy true;
		}
	}
}

上面是一个较为完整的 nginx 配置,去掉了一些其他的配置,结构都很清晰,分为两部分,一部分是 web 前端部分obeta,另一部分是服务器obetaServer,如果你的 web 前端部分是静态文件而不是通过 webpack 启动的 server,那么你可以改为以下配置:

# ....以上省略
# 默认所有请求访问文件
location / {
	index index.html;
	root ~/Documents/dist/;
	try_files $uri $uri.html $uri/ /index.html = 404;
}
# ....以下省略

个人随笔记录,内容不保证完全正确,若需要转载,请注明作者和出处.