如何配置Preact开发服务器以使用自定义地址？

针对你遇到的问题（macOS下0.0.0.0无法访问、IP地址动态、需要HTTPS），可以通过修改Preact项目的开发服务器配置解决，具体步骤如下：

1. 自定义开发服务器配置 #

Preact CLI支持通过项目根目录的preact.config.js文件自定义开发服务器设置，如果该文件不存在，直接新建即可。

添加以下配置代码：

export default function(config, env, helpers) {
  const devServer = config.devServer;
  
  // 将主机改为localhost，替代默认的0.0.0.0，解决macOS访问问题
  devServer.host = 'localhost';
  
  // 启用HTTPS协议
  devServer.https = true;
  
  // 可选：指定固定端口（默认8080，可根据需求修改）
  // devServer.port = 3000;
}

配置说明 #

• host: 'localhost'：本地访问时使用https://localhost:8080，macOS浏览器可正常加载，无需依赖动态IP。
• https: true：自动生成自签名SSL证书，启用HTTPS。首次访问浏览器会提示"不安全"，只需在浏览器中添加证书信任即可正常访问。
• 端口配置：如果需要更换默认的8080端口，取消注释port行并设置目标端口。

2. 局域网访问（可选） #

如果需要同一局域网内的其他设备访问你的开发服务，可通过本地hosts文件配置自定义域名：

1. 打开macOS的/etc/hosts文件（需要管理员权限）。
2. 添加一行映射：

   127.0.0.1 mypreact.dev
   

3. 将preact.config.js中的host改为mypreact.dev：

   devServer.host = 'mypreact.dev';
   

4. 局域网内设备访问https://mypreact.dev:8080即可（需确保设备与你的电脑在同一网络，若设备无法解析该域名，需在对应设备的hosts文件中添加同样的映射）。

3. 使用自定义SSL证书（可选） #

如果不想用自动生成的自签名证书，可指定自己的SSL证书文件：

import fs from 'fs';

export default function(config, env, helpers) {
  const devServer = config.devServer;
  
  devServer.host = 'localhost';
  devServer.https = {
    key: fs.readFileSync('/path/to/your/private-key.pem'),
    cert: fs.readFileSync('/path/to/your/certificate.pem')
  };
}

修改配置后，重启开发服务器，终端会显示新的访问地址：

You can view the application in browser.

Local:            https://localhost:8080

内容的提问来源于stack exchange，提问作者Mike Lischke