在本地主机上运行 SSL

在我开始介绍如何操作之前，我猜有些人可能会问：“我为什么要关心在本地主机上运行 SSL？” 嗯，有一些特定情况你可能会关心。以下仅列举几个：

1. 您正在生产环境中强制使用 SSL，并希望确保能够测试在本地工作时可能在生产环境中出现的错误。例如，与加载不安全资源相关的错误会导致安全警告，或与重定向到 SSL 时可能断开的链接相关的错误。
2. 您正在对使用 SSL 的 API 进行 Ajax 调用，由于协议不同，遇到了同源策略错误。如果您控制了端点，这个问题应该可以通过CORS解决，但您可能无法控制。
3. 您正在开发一款需要 SSL 的 PWA。虽然您应该可以忽略与 SSL 相关的警告以进行本地测试，但您可能更倾向于在本地更紧密地复制您的生产应用以进行测试。

可能还有其他问题，但这些是我自己遇到的。

现在我们已经了解了一些为什么你可能想要在本地主机上运行 SSL 的原因，让我们来看看如何操作。在这篇文章中，我将使用一个简单的 Node Web 服务器，运行 Jekyll 和 Wordpress 来演示一些示例。所有示例均在 MacOS 上运行。当然，还有很多其他的本地 Web 服务器设置，我不会一一介绍。

Node Web 服务器上使用 localhost 的 SSL

对于许多本地 Web 开发任务，我依赖于基于 Node 构建的简单 HTTP 服务器。npm 中有很多这样的服务器。事实证明，其中很多都支持 SSL。我安装的其中一个选项是local-web-server，它甚至附带一个证书，你只需一个命令行选项就可以自动通过 SSL 启动 localhost。

ws --https

问题是，默认情况下，您会收到这个可爱的错误。

当然，您可以继续访问 localhost，但在 Chrome 中看不到“安全”图标，这可能会掩盖其他安全问题（例如安全页面上的不安全资源）。如果您想要安全标记，他们提供了如何在 Mac OS 上执行此操作的详细说明。

这些说明对我运行 MacOS Sierra 的系统来说基本有效（没错，我仍然会避免使用 High Sierra，除非有人能说服我一个令人信服的理由让我换用）。需要注意的是，我无法/usr/local/lib/node_modules/local-web-server/node_modules/lws通过 Keychain Access 轻松导航到包含内置证书的安装文件夹（在我的情况下是 ）。我只能通过 Finder 找到它，然后直接将证书拖到我的“登录”钥匙串中。拖到那里后，点击它即可打开。

展开“信任”部分并将“安全套接字层 (SSL)”设置为“始终信任”。

如果您不想使用 Web 服务器附带的证书，而是想使用您自己的证书，说明中也会演示如何执行此操作，尽管对我个人而言这不是一个关键问题。

使用 Jekyll 的 localhost 进行 SSL

我使用 Jekyll 搭建过很多网站，包括我的博客，它强制使用 SSL。在本地搭建 Jekyll 时，通常会使用内置的 Web 服务器来构建页面，并允许你在浏览器中测试它们。好消息是，如果你想在本地使用 SSL 测试页面，这相当简单。

第一步是为你的本地主机生成证书。Let 's Encrypt 的这份指南提供了很好的说明，你可以直接复制/粘贴到终端中。

openssl req -x509 -out localhost.crt -keyout localhost.key \
  -newkey rsa:2048 -nodes -sha256 \
  -subj '/CN=localhost' -extensions EXT -config <( \
   printf "[dn]\nCN=localhost\n[req]\ndistinguished_name = dn\n[EXT]\nsubjectAltName=DNS:localhost\nkeyUsage=digitalSignature\nextendedKeyUsage=serverAuth")

我将生成的证书和密钥文件放入文档根目录下名为 ssl 的文件夹中。然而，正如这个问题指出的那样，Jekyll 的 SSL 支持要求证书和密钥位于站点文件中。这很合理，如果您愿意，也可以直接将它们放在那里。由于我有多个项目可能使用相同的证书，所以我没有这样做，而是在项目根目录中创建了一个指向 Documents 中 ssl 文件夹的符号链接。

ln -s /Users/brinaldi/Documents/ssl /Users/brinaldi/Documents/projects/remotesynth.github.io/ssl

附带说明一下，您需要确保不要将此符号链接签入您的项目，因此您可能需要将其添加到您的 .gitignore 中。

现在您可以使用符号链接启动指定证书和密钥位置的 Jekyll 服务器。

jekyll serve --ssl-key ssl/localhost.key --ssl-cert ssl/localhost.crt

当然，您需要执行我之前讨论过的步骤，以避免 Chrome 中的安全警告。将证书拖到 Keychain Access 中，单击它，然后将“安全套接字层 (SSL)”设置设置为“始终信任”。

现在您将获得“安全”图标。

使用 ngrok 的本地主机 SSL

我个人还遇到过许多其他可能需要在本地测试 SSL 的情况。例如，我本地构建的另一个静态站点服务器 Hugo，其内置的 Web 服务器不支持 SSL。或者，我偶尔仍在维护 Wordpress 网站，这需要遵循一长串的说明来更新 Apache 配置。

一个快速简便的解决方案是使用像ngrok这样的服务。对于基本的本地测试，免费帐户应该足够了，但如果你想寻找更多选择，它是一项付费服务​​。

当然，第一步是下载 ngrok。运行后，你需要将它连接到你的 ngrok 帐户——该工具会引导你完成整个过程。我发现将 ngrok 添加到我的 PATH 变量中也更容易，这样我就可以从任何地方通过命令行访问它。

一切设置完成后（假设它已添加到你的 PATH 中），你就可以启动 HTTP 端口转发服务了。例如，要转发我内置的 Hugo 服务器（默认使用 1313 端口），我只需使用以下命令：

ngrok http 1313

现在我可以通过提供的 URL 使用 SSL 访问本地运行的站点。

如果您正在寻找一种快速简便的方法在本地测试 SSL，并且可以注册 ngrok 帐户，那么这绝对是最简单的选择。