尽管自签名证书不适合在开放网络上使用，但它们完全可以接受用于在本地网络中进行测试。你测试的浏览器可能会强烈抗议，并尽力吓唬你不要使用自签名证书。如果这些措施不起作用，它们可能会让你感觉不好。但不要担心，也不要感到沮丧：在本章末尾，我们会化解这些不必要的恐吓和羞耻战术。

生成自签名证书

你需要使用 openssl 在操作系统上生成自己的证书和密钥文件。MacOS 和几乎所有类 Unix 操作系统和 Linux 发行版都自带了 openssl。如果你是 Windows 用户，可能需要自己安装 openssl。OpenSSL 的 Wiki 维护了一个可下载的二进制文件列表。如果你在 Windows 上运行 Git Bash，它已经包含了 openssl.exe，你也可以使用它。

在生成证书文件之前，你需要为它们创建一个容易记住的存放位置。我建议在你的主目录中创建一个 Certs 目录：

$ mkdir ~/Certs

你下载的本书配套代码中包括了一个脚本，你可以运行它来生成你的证书文件。为此，你需要切换到存储本书代码的目录。基本命令是 npm run ssl-keys，它需要两个参数：你创建的目录的路径（keydir）和自签名证书过期前的天数（numdays）。

例如，要在 ~/Certs 目录中创建约五年（1825 天）后过期的自签名证书文件，你可以在本书代码目录中运行以下命令：

$ npm run ssl-keys --keydir="$HOME/Certs" --numdays=1825

无论你选择什么值，请使用 $HOME 变量而不是波浪号 ~，并确保在等号周围没有空格。

如果你是一个谨慎的人，可以在运行脚本之前查看 package.json 文件中的 ssl-keys 脚本。它基于 Let’s Encrypt 推荐的一个命令，Let’s Encrypt 通常提供可以在面向全球的网站上使用的免费证书。如果你愿意，可以前往 Let’s Encrypt 的原始文章，将命令复制到你的命令行中，而不是使用 npm 脚本。在运行 Let’s Encrypt 命令以生成证书和密钥文件之前，你需要切换到你的证书目录。默认情况下，openssl 会生成一年后过期的证书。如果你想生成有效期更长的证书，可以在 Let’s Encrypt 脚本中添加 -days 选项，后跟一些天数，例如 -days 1825 来创建五年期的证书。

无论你选择何种方式生成密钥，一旦按下回车键，只需片刻就可以在你选择的目录（如 ~/Certs）中生成密钥和证书文件。创建这些文件是提供 HTTPS 服务的第一步。但你还需要确保你运行的任何脚本和服务器都能够轻松找到你的证书文件。接下来我们来设置这些内容。

将证书文件的位置存储在环境变量中

你需要从命令行的启动脚本中导出两个环境变量。这些变量将指向你自签名证书文件的位置。你的启动脚本位于主目录中的一个文件中，文件名为 .bashrc 或 .bash_profile（如果你使用的是 bash），或者是 .zshrc（如果你使用的是 zsh），或者甚至可能是 .profile 文件。

无论你的命令行使用哪个启动文件，用你喜欢的文本编辑器打开它，并添加以下行：

# SSL Keys
export LOCALHOST_SSL_CERT="$HOME/Certs/localhost.crt"
export LOCALHOST_SSL_KEY="$HOME/Certs/localhost.key"

确保在等号 = 周围没有空格。如果你将密钥保存在 ~/Certs 之外的其他位置或将它们命名为不同的名称，也不要忘记调整路径。保存启动文件后，使用 source 命令在终端中重新加载它。你需要参考命令行使用的文件名称。在这个例子中，文件名为 .zshrc：

$ source ~/.zshrc

作为快速检查，你可以使用 echo 命令输出这些变量的值，确认命令行已经识别了这些变量。为此，在变量名称前加上美元符号 $：

$ echo $LOCALHOST_SSL_CERT

如果一切按计划进行，你将看到命令行 shell 输出的证书位置。以 MacOS 为例，它可能类似于 /Users/username/Certs/localhost.crt。如果需要，你也可以用相同的方法检查 LOCALHOST_SSL_KEY 的值。

选择开发浏览器

使用最新版本的 Chrome 或 Firefox 将为你提供最佳的开发体验。我个人更喜欢 Firefox 开发者版本，但选择权在你手中。

Safari 怎么样？

Safari 在 WebRTC 实现方面一直落后，但自 2022 年 4 月发布的 Safari 15.4 以来，它也达到了应有的标准。如果你选择 Safari 作为开发浏览器，或者你想在 iPhone 或 iPad 上测试你的工作，请确保运行的是至少 Safari 15.4 版本。

旧版 Safari 和其他浏览器（如版本 80 之前的 Firefox 和版本 75 之前的 Chrome）中不完整的 WebRTC 实现可能会让你头疼不已。请查阅附录 1，了解在旧版浏览器中进行连接协商时可能需要添加的后备代码，只要这些旧版浏览器仍在使用（如果历史可以作为参考，那将是相当长的一段时间）。

无论你选择哪种浏览器，你都需要打开其开发者控制台并禁用缓存，这样在工作时你总是加载最新版本的 CSS 和 JavaScript。Firefox 和 Chrome 都在开发者面板的网络选项卡下提供了“禁用缓存”选项。如果你和我一样，你可能会选择将开发者控制台弹出到一个单独的窗口中，以最大化可用屏幕空间。你将构建响应式界面，充分利用整个视口。你知道界面就像个大明星：如果你在任何方面抢了它们的风头，它们就会让你的生活变得痛苦，并向它们的朋友散布关于你的恶意谣言。

启动和停止服务器

我尽量让你在 localhost 上同时提供自己的工作文件和完成的演示文件变得尽可能轻松。要在你处理自己的文件时提供它们的服务，在命令行中运行 npm run start 或简单地运行 npm start。你的文件更重要，因此它们获得了更方便的命令。

记得安装依赖项

如果你还没有运行过 npm install，请务必在启动服务器之前执行此操作，或者在遇到有关缺少模块的错误时执行。

要提供本书中的完整示例，你需要运行稍微复杂一点的命令 npm run start:demos。请注意，冒号两侧没有空格。

每次启动服务器时，你会在终端窗口中看到类似以下的输出：

signaling-server:   ** Serving from the www/ directory. **
signaling-server:
signaling-server:   App available in your browser at:
signaling-server:
signaling-server:     -> https://127.0.0.1:3000/
signaling-server:     -> https://192.168.1.6:3000/
signaling-server:
signaling-server:   Hold CTRL + C to stop the server.
signaling-server:
signaling-server:   +0ms

每次启动服务器时，它都会告诉你当前正在提供服务的目录（再次提醒：对于你的工作是 www/ 目录，完成的示例是 demos/ 目录）以及至少两个可以从你选择的开发浏览器访问服务器的地址。每当你需要停止服务器时，按住 CTRL + C 即可。

第一次启动服务器时，操作系统可能会通知你某种防火墙限制。由于你最终会从连接到本地网络的其他设备访问此服务器，因此请指示操作系统允许传入连接。

服务器仍在运行时，你可以在浏览器中打开 :3000/。当然，localhost 是 127.0.0.1 的快捷方式，如果你喜欢输入数字和点，也可以使用 :3000/。目前不用担心看到的第二个 IP 地址。它几乎肯定与 192.168.1.6 不同，但最终你将能够使用该第二个地址通过连接到本地网络的其他设备测试你的应用程序。

有一个大问题：你绝对必须输入完整的 协议部分。如果省略了协议，你的浏览器将尝试通过 建立连接。服务器实际上没有监听 HTTP，而是在监听 HTTPS。不过，浏览器不知道这一点，因此它会轻蔑地告诉你它无法连接。而你将花费大量时间寻找那个丢失的 s，尤其是在那些隐藏 协议字符串的浏览器中，这会更加难以发现。