1. 前言#

开发的时候碰到了mkcert的局限性：

当我想使用不同设备（如手机、平板）通过局域网联调页面时，还是会有证书验证问题。

虽然可以在每台设备上安装根证书，但我想没有哪个人会这么做。

于是我尝试使用 域名 + 公网证书 的方式在开发环境中进行局域网调试，于是便有了这篇博文，其实只是开发的话没有必要纠结证书的问题，这篇东西实际意义比较小。

至于如何让WSL2支持LAN IP环回地址访问以及WSL2的配置，请查看我另外一篇文章：使用本机LAN IP访问WSL2中暴露的Web服务

2. 常规操作#

我开发环境为WSL2+Windows，项目在WSL2内。

在WSL2内安装mkcert并生成cert与key：

1
# 直接从官网上面拉取，Ubuntu自己的软件源版本比较落后。
2
curl -JLO "https://dl.filippo.io/mkcert/latest?for=linux/amd64"
3
# 给予必要的权限
4
chmod +x mkcert-v*-linux-amd64
5
# 移动mkcert到/usr/local/bin/mkcert下，这样就可以直接通过mkcert命令访问
6
sudo mv mkcert-v*-linux-amd64 /usr/local/bin/mkcert
7
# 在WSL2内安装根CA
8
mkcert -install
9
# 192.168.0.115改成你的LAN IP地址，生成cert以及key.pem文件
10
mkcert -key-file key.pem -cert-file cert.pem localhost 127.0.0.1 ::1 192.168.0.115

输入命令获取mkcert来查找根CA文件所在的位置:

1
mkcert -CAROOT

取出rootCA.pem放到Windows下：

在WSL2内信任可能会有奇怪的权限问题

将文件后缀从pem改为crt，双击打开:

1. 安装证书
2. 本地计算机
3. 将所有证书都放入下列存储
4. 浏览
5. 受信任的根证书颁发机构
6. 确定
7. 下一步

然后将cert.pem与key.pem放在该放的地方即可：

• 比如说Vite项目，在vite.config.ts中示例配置如下：

  1
  server: {
  2
        port: Number(env.VITE_CLIENT_PORT) || 9090,
  3
        https: {
  4
          key: fs.readFileSync(path.resolve(__dirname, 'src/assets/ssl/key.pem')),
  5
          cert: fs.readFileSync(path.resolve(__dirname, 'src/assets/ssl/cert.pem')),
  6
        },
  7
  }
  

• 对于SpringBoot项目，在application.yaml中示例配置如下：

  1
  server:
  2
    port: ${SERVER_PORT:8090}
  3
    ssl:
  4
      certificate: ${SSL_KEY_STORE:classpath:cert.pem}
  5
      certificate-private-key: ${SSL_KEY_STORE_PWD:classpath:key.pem}
  

如果坚持使用 mkcert 方案在其他设备上调试：

生成的 rootCA.pem 发送到手机上，在手机的设置 -> 安全 -> 加密与凭据 -> 安装证书 中进行信任（iOS 和 Android 步骤略有不同，自行查阅资料。）

3. 域名 + DNS 解析到内网 IP + Let’s Encrypt#

这是更好的方式，直接解决你CA的问题，如果说mkcert本身仅仅是自建了一个CA自称合法机构，那么Let's Encrypt本身就是一个合法机构，但前提是你要有域名。

如何购买域名可以参考我其它文章：购买并配置 Linux VPS 以搭建个人网络服务#域名购买，这里就不多说明。

1
# acme的前置依赖
2
sudo apt install -y socat
3
# acme脚本
4
curl https://get.acme.sh | sh -s email=your@email.com
5
# 先声明两个需要的参数
6
export CF_Token="从Cloudflare得到的API Token"
7
export CF_Account_ID="你从Cloudflare那边复制的AccountID"
8
# yourdomain是你的域名，比如说test.abcde.net
9
acme.sh --issue --dns dns_cf -d yourdomain
10
# 等待执行，返回Cert success即为成功
11

12
# 设置你所需要的目录，以一个SpringBoot项目为例
13
export PROJECT_PATH="/xxx"
14

15
acme.sh --install-cert -d yourdomain \
16
--key-file       $PROJECT_PATH/src/main/resources/key.pem  \
17
--fullchain-file $PROJECT_PATH/src/main/resources/cert.pem

4. 能Ping通却无法访问？#

分三种情况讨论。

• 代理问题
• 路由器问题
• 防火墙问题

1
rules:
2
  - DOMAIN-SUFFIX,test.abcde.cfd,DIRECT #填写你实际使用的域名
3
  - IP-CIDR,192.168.0.0/16,DIRECT,no-resolve #走本地地址时默认直连
4
  - GEOSITE,CN,DIRECT
5
  - GEOIP,CN,DIRECT
6
  - MATCH,节点选择

1
New-NetFirewallRule -DisplayName "Allow VITE 8080" -Direction Inbound -LocalPort 8080 -Protocol TCP -Action Allow

1
Set-NetFirewallRule -DisplayName "Allow VITE 8080" -Profile Private

5. Vite服务器不支持HMR问题#

在配置了 HTTPS 和自定义域名后，控制台报错 WebSocket 连接失败。

这是因为 Vite 默认尝试连接 localhost，而浏览器当前访问的是自定义域名，导致连接被阻断。

大致报错信息如下：

1
client:755 WebSocket connection to 'wss://localhost:9098/?token=FRvFIXNPCDsb' failed:
2
createConnection @ client:755
3
connect @ client:412
4
connect @ client:759
5
client:765 [vite] failed to connect to websocket.
6
your current setup:
7
(browser) test.abcde.cfd:9098/ <--[HTTP]--> localhost:9098/ (server)
8
(browser) test.abcde.cfd:9098/ <--[WebSocket (failing)]--> localhost:9098/ (server)
9
Check out your Vite / network configuration and https://vite.dev/config/server-options.html#server-hmr .

其实点进去你看文档说的内容就知道是怎么一回事了：

…This can be helpful when using self-signed certificates or when you want to expose Vite over a network on a single port.

在使用自签名证书或通过公网/局域网访问时，必须显式定义hmr的配置，否则 WebSocket 握手会因域名或证书不匹配而失败。

文档下面特意提到当用自签名证书或者将Vite的端口暴露在网络中访问时会对我们有所用处。

在vite.config.ts中配置如下：

1
server: {
2
  port: Number(env.VITE_CLIENT_PORT) || 9098,
3
  https: {
4
    key: fs.readFileSync(path.resolve(__dirname, 'src/assets/ssl/key.pem')),
5
    cert: fs.readFileSync(path.resolve(__dirname, 'src/assets/ssl/cert.pem')),
6
  },
7
  hmr: {
8
    host: env.VITE_DOMAIN_URL,
9
    port: Number(env.VITE_CLIENT_PORT) || 9098,
10
  },
11
},