Duke Yin

2026年6月8日

2621字
7分钟

目前我开发Web项目都是在本地搭建环境，直接通过IP访问，为了在不同的地方开发，把开发机都设置成相同的IP地址方便访问。例如在家里和公司都把开发机的IP设置成 192.168.2.209 ，这样在浏览器放个收藏并且同步，不论人在哪个机器，只要点收藏夹就能访问、测试。

但是通过IP地址访问还是有点不优雅，而且如果遇到需要测试https环境下的问题，纯IP访问就不行了，我在想既然我都固定了IP，何不在DNS里把一个域名解析到这个IP，虽然指向的是内网，但更优雅，SSL证书也应该不难解决了。

所以研究出了解决的方法。亲测可用。

解析域名到本地IP

首先，如果你在不同的地方有不同的开发服务器，并且希望每次都通过同一个域名访问，需要在各个地方把开发服务器固定到同一个IP，方法是进入局域网路由器管理，找到MAC绑定，把你期望的、没有其他设备占用的IP跟开发机的MAC地址进行绑定，这样局域网分配地址的时候，开发机的IP就不会瞎跑，我这里绑定了 192.168.2.209

广域网解析需要你手里至少有个域名（子域名就行），如果你没有任何可用域名的话做局域网解析也可以。为了方便叙述，我以子域名 t.yins.top 举例。

广域网解析

打开你的域名DNS管理处，例如常见的 腾讯云、DNSPOD、CloudFlare、阿里云等域名DNS记录管理界面，在yins.top创建一个解析记录，名称填 t ，内容写开发机的本地IP 192.168.2.209 ，创建后等待几分钟。

这样解析后不论你在哪里，只要访问这个域名，就相当于访问到局域网IP地址了，等解析生效后在浏览器输入域名 t.yins.top，如果正常打开局域网的web环境，证明成功。

局域网解析

如果你嫌麻烦，或者手上也没有多余可用的域名，使用hosts解析也可以。

Windows（以管理员身份编辑）

C:\Windows\System32\drivers\etc\hosts

Mac/Linux：

/etc/hosts

在需要访问开发机的终端上修改系统hosts文件，添加一行 “IP 域名” 保存，例如：

192.168.2.209 t.yins.top

成功保存hosts文件之后，在局域网访问 t.yins.top 就会指向 192.168.2.209

但这样的缺点是，每个需要访问的终端都需要修改hosts文件，对于iOS设备的话有点麻烦。

但是如果你的局域网路由器支持修改全局hosts，可以在路由器上添加hosts记录，这样整个局域网的设备都可以使用域名访问开发机。

我个人更推荐使用DNS服务商来进行广域网解析，首先子域名数量几乎是无限的，其次一劳永逸，解析成功后在任何地方都直接可用。

配置SSL证书

对于局域网本地配置SSL证书，最好的方案是用 mkcert 生成本地受信任的SSL证书，配合上一步完成的DNS解析或是hosts文件做域名解析。

1 安装mkcert并生成证书

在开发机上操作：

Windows安装mkcert

# powershell
# 用 Chocolatey 安装
choco install mkcert

# 或者直接从 GitHub 下载 exe, x86机器选 amd64版本，arm机选arm64
# https://github.com/FiloSottile/mkcert/releases

Mac 安装

brew install mkcert
brew install nss  # Firefox 需要

安装本地CA并生成证书

# 1. 安装本地根证书（只需执行一次）
mkcert -install

# 2. 生成证书（把域名和IP改为你自己的）
mkcert t.yins.top 192.168.2.209

执行后会生成两个文件：

t.yins.top+1.pem        ← 证书文件
t.yins.top+1-key.pem    ← 私钥文件

2 配置 Apache 使用证书 以XAMPP为例

把证书文件复制到 XAMPP 目录：

C:\xampp\apache\conf\ssl\t.yins.top+1.pem
C:\xampp\apache\conf\ssl\t.yins.top+1-key.pem

编辑 C:\xampp\apache\conf\extra\httpd-ssl.conf，找到或添加虚拟主机配置：

<VirtualHost *:443>
    ServerName dev.local
    DocumentRoot "C:/xampp/htdocs"
    
    SSLEngine on
    SSLCertificateFile "C:/xampp/apache/conf/ssl/t.yins.top+1.pem"
    SSLCertificateKeyFile "C:/xampp/apache/conf/ssl/t.yins.top+1-key.pem"
    
    <Directory "C:/xampp/htdocs">
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

重启 XAMPP 的 Apache，访问 https://t.yins.top 即可！

3 在需要访问的设备上信任证书（重要）

mkcert 生成的证书只在安装了根CA的设备上受信任。如果你需要在手机或其他电脑上访问：

1. 找到根CA文件：

mkcert -CAROOT  # 显示CA文件位置

2. 把 rootCA.pem 文件传到其他设备，手动安装信任

Windows

方法一：双击安装（最简单）

  1. 通过网络共享路径找到 rootCA.pem，双击打开
  2. 弹出对话框点击 「安装证书」
  3. 选择 「本地计算机」 → 下一步（需要管理员权限）
  4. 选择 「将所有的证书都放入下列存储」 → 点击浏览
  5. 选择 「受信任的根证书颁发机构」 → 确定 → 下一步 → 完成
  6. 弹出安全警告点 「是」

重启浏览器后生效。

方法二：命令行安装（一条命令）

以管理员身份运行 PowerShell：

# 将共享路径换成你自己的
Import-Certificate -FilePath "\\192.168.2.209\share\rootCA.pem" -CertStoreLocation Cert:\LocalMachine\Root

MAC

方法一：Finder 操作

  1. 在 Finder 中通过 「前往」→「连接服务器」（⌘K）连接到 Windows 共享
   smb://192.168.2.209
  1. 找到 rootCA.pem，双击，系统会自动打开钥匙串访问
  2. 选择添加到 「系统」 钥匙串 → 输入密码确认
  3. 在钥匙串访问中找到刚添加的 mkcert 证书
  4. 双击证书 → 展开**「信任」**栏
  5. 将 「使用此证书时」 改为 「始终信任」
  6. 关闭窗口，再次输入密码确认

方法二：终端命令（一条命令搞定）

bash

# 先挂载共享（或者直接复制文件到本地）
sudo security add-trusted-cert -d -r trustRoot \
  -k /Library/Keychains/System.keychain \
  /Volumes/share/rootCA.pem

如果共享盘路径不同，先把文件复制到本地再执行：

bash

sudo security add-trusted-cert -d -r trustRoot \
  -k /Library/Keychains/System.keychain \
  ~/Downloads/rootCA.pem

iOS

第一步：找到根证书文件

在开发机上执行：

mkcert -CAROOT

会输出类似路径：

C:\Users\你的用户名\AppData\Local\mkcert

进入该目录，找到 rootCA.pem 这个文件，这就是需要传到手机的根证书。

第二步：将证书传到 iPhone

方式 A：AirDrop（最简单） 直接把 rootCA.pem 文件用 AirDrop 发送到 iPhone，接收后会自动触发安装。

方式 B：通过局域网下载 把 rootCA.pem 放到 XAMPP 的 htdocs 目录，然后用 iPhone Safari 访问：

http://192.168.2.209/rootCA.pem

Safari 会自动识别证书文件并提示安装。

方式 C：发邮件给自己 把 rootCA.pem 作为附件发到自己邮箱，在 iPhone 上打开附件即可触发安装。

注意： 必须用 Safari 下载，其他浏览器（Chrome/Firefox）不会触发系统安装流程。

第三步：安装描述文件

点击证书文件后，iPhone 会弹出提示：

已下载描述文件
"mkcert ..." 已下载，请前往
"设置"以进行安装。

点击关闭，然后：

  • 打开 设置
  • 进入 通用
  • 找到 VPN与设备管理（或「描述文件与设备管理」）
  • 在「已下载的描述文件」下找到 mkcert 证书
  • 点击安装 → 输入密码确认 → 再次点击安装
  • 看到绿色「已验证」后点完成

第四步：开启完全信任（关键步骤！）

在 iOS 中手动安装的证书不会自动被 SSL 信任，必须手动开启。

安装完成后继续操作：

  1. 打开 设置
  2. 进入 通用 → 关于本机
  3. 滚动到底部，点击 证书信任设置
  4. 在「针对根证书启用完全信任」下，找到 mkcert 开头的证书
  5. 打开开关 → 弹出警告框点继续

第五步：配置 iPhone 的 hosts（域名解析）

如果你的解析不是广域网解析，iPhone 又没有 hosts 文件，有两种解决方案：

方案 A：用路由器 DNS（推荐） 在你的路由器后台添加自定义 DNS 解析：

t.yins.top → 192.168.2.209

局域网内所有设备自动生效。

方案 B：用🚀 / Surge 等工具 在规则里添加 DNS 映射，将 dev.local 指向 192.168.2.209。

方案 C：直接用 IP 访问（最省事） 证书生成时已经包含了 IP，所以直接访问：

https://192.168.2.209

也是绿锁，不用配置域名解析。

4 迁移证书到另一个局域网

正如我开始时候提到的，我家里和公司都是相同的配置，相同的开发机IP，是不是要两边都申请一次证书呢？iOS设备怎么办呢？

其实mkcert 的证书文件本质上就是普通文件，直接复制即可。iPhone 已经信任了那个根 CA，只要家里的服务器用同一套 CA 签发的证书，手机访问两边都是绿锁。

需要复制的文件

从公司开发机的两个位置取文件：

① 根 CA（mkcert 数据目录）

bash

mkcert -CAROOT  # 先执行这个确认路径

需要复制的文件：

rootCA.pem
rootCA-key.pem

② 域名证书（你放到 XAMPP 的那两个）

t.yins.top+1.pem
t.yins.top+1-key.pem

家里服务器的操作步骤

第一步：安装 mkcert（如果还没装）

bash

# Windows
choco install mkcert
第二步：替换根 CA 文件

先查看家里机器的 CA 目录：

bash

mkcert -CAROOT

把公司的 rootCA.pem 和 rootCA-key.pem 覆盖到这个目录。

第三步：让系统信任这个 CA

bash

mkcert -install

这一步会把根证书注册到 Windows 的证书存储里，浏览器才会信任。

第四步：复制域名证书到 XAMPP

把公司的这两个文件复制到家里 XAMPP 相同路径：

C:\xampp\apache\conf\ssl\t.yins.top+1.pem
C:\xampp\apache\conf\ssl\t.yins.top+1-key.pem

XAMPP 的 Apache 配置（httpd-ssl.conf）和 hosts 文件也要同样配置，跟公司一致即可。

第五步：重启 Apache

在 XAMPP 控制面板重启 Apache，访问 https://dev.local 验证绿锁。

iPhone 不需要任何操作

因为根 CA 是同一个，iPhone 已经信任，切换到家里网络后直接访问即可。

注意安全

rootCA-key.pem 是根证书私钥，任何人拿到它都可以签发你手机信任的任意证书。传输时建议：

  • 用 USB 拷贝，避免通过公共网络传输
  • 不要上传到云盘、邮件等不可控的地方
  • 两台机器用完即妥善保管，不要随意分享

科技

本作品采用 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)进行许可.