如果是bug调试什么的使用vscode的调试功能就好,但是有一些第三方服务有安全限制非要在https的正式域名下面才能触发,这样想调试第三方服务的代码就会很烦,因为本地没有办法知道上线效果。
因此考虑在本地使用caddy搭建简易服务器做反向代理到正式环境的域名。这样访问正式环境时候实际上访问到我们的本地。
本教程适用Mac。
生成Https证书
可以使用 mkcert 进行本地证书配置。因为要映射到正式域名,所以先生成证书,后面的服务器配置会用到。
现在就先假设我要映射的域名是:yuming.com,测试环境域名:xxx-test.yuming.com
1. 安装mkcert
javascript
brew install mkcert
2. 初始化
javascript
mkcert -install
3. 生成对应域名证书
可以直接生成顶级域名证书
现在就先假设我要映射的域名是:yuming.com,测试环境域名:xxx-test.yuming.com
javascript
mkcert "*.yuming.com"
mkcert "*.yuming.cn"
生成完的证书就放在./certs/xxx.pem
酱紫就行了。就是根目录下面新建一个certs
目录。怎么知道是不是根目录呢,就打开终端,打开终端的时候终端在的那个目录就是根目录,一般就是以你用户名开头的那个文件夹啦。就像下面这样。Mac就是访达里标着🏠的那个文件夹。
安装caddy
javascript
brew install caddy
caddy安装后的目录在homebrew下面,路径为:
- /opt/homebrew/opt (M1 Mac)
- /usr/local/etc/Caddyfile(Intel Mac)
配置caddyFile
官方文档有写一点配置:https://caddyserver.com/docs/caddyfile
可以去找一下,找到之后需要配置Caddyfile,也就是caddy的配置文件。我自己是新建了一个caddyFile放在了/opt/homebrew/etc/Caddyfile
这里下面。(因为找到的各种破教程太多根本分不清楚,干脆直接自己新建了一个)。
就是酱紫。
通过Caddyfile文件来配置相关服务器行为,这里需要将 之前生成的https证书 放到相对应的目录,然后在配置文件配置tls路径;记得比对域名证书名称路径是否一致。
然后上面我们的certs证书目录就是在根目录下嘛,所以下面就直接./certs
就可以找到对应的证书文件路径了。
*.yuming.com {
# 针对*.yuming.com的域名配置证书
tls ./certs/yuming.com.pem ./certs/yuming.com-key.pem
# yuming test域名
@yuming_test {
host xxx-test.yuming.com
}
# yuming prod域名
@yuming_prod {
host xxx.yuming.com
}
# 反向代理
reverse_proxy @yuming_test localhost:3000
reverse_proxy @yuming_prod localhost:3000
}
# 静态资源托管
*.yuming.cn {
tls ./certs/yuming.cn.pem ./certs/yuming.cn-key.pem
try_files {path} /index.html
root * ./dist
file_server browse
}
启动Caddy
指令文档:https://caddyserver.com/docs/command-line
使用指定config运行(跑这个命令就可以启动了)
javascript
// 启动
caddy run --config /opt/homebrew/etc/Caddyfile
// 重启
caddy reload --config /opt/homebrew/etc/Caddyfile
下面酱紫:
如有其他问题可查找/var/log/caddy日志目录。
还有可以在Caddyfile同级目录下运行,caddy run
也可以启动服务器。
配置本地host映射
经过上面两步已经可以搭建一个映射服务器了,但是如果我们访问yuming.com,还是不能直接访问到本地,还需要再配置本地的host映射。
通常是因为DNS解析的问题
在未配置host映射前,域名还没有正确地解析到Caddy服务器的IP地址。因此,需要在本地的
hosts
文件中手动配置,指向我们服务器的IP地址。这是在DNS记录还未生效或者在内网测试时常用的手段。
安装switchhosts
推荐下载一个可视化的配置工具switchhosts
配置域名解析到本机即可。之后打开关闭啥的就好了
javascript
# 测试环境
127.0.0.1 xxx-test.yuming.com
# 正式环境
127.0.0.1 xxx.yuming.com
经过如上三步就可以映射生产域名到本地了。