如何使用 MAMP 为本地主机和虚拟主机设置 SSL？

Question

我正在创建这个“问题”来记录我如何能够在本地设置 SSL，以防我将来需要再次这样做。以为我会在这里记录它，希望这对其他人也有帮助，因为这是一个棘手的过程。

我正在使用带有 High Sierra、MAMP v 4.2.1 和 Chrome v 71 的 Mac

好吧，我们开始吧。

Answer 1

1) 为本地主机创建 SSL 证书

为了能够对localhost 使用HTTPS，我们实际上需要两个证书：一个根证书，以及一个专门为localhost 域创建的域证书。

These nifty scripts 我发现要注意创建两者。它们非常易于使用 - 只需严格按照说明进行操作，您就可以开始使用了。文档中唯一不太清楚的是，它显示Then mark the certificate as trusted，这意味着您必须单击钥匙串访问中的证书并将Trust 选项更改为Always。

（Here你可以找到更详细的解释这些脚本的实际作用）

如果一切正常，您现在应该有两个文件 server.crt 和 server.key。我在/Applications/MAMP 中创建了一个ssl 文件夹并移动了其中的文件；但是你可以把它们放在你认为最好的地方。

现在让我们忘记这些文件，继续进行一些 Apache 配置。

2) 配置 MAMP 的 Apache 以接受 SSL

默认情况下，Apache 未配置为接受 SSL 连接，因此我们必须对其进行更改。打开/Applications/MAMP/conf/apache/httpd.conf 并确保以下行未被注释掉。如果是，请删除行首的#：

LoadModule ssl_module modules/mod_ssl.so 

Include /Applications/MAMP/conf/apache/extra/httpd-ssl.conf

另外，寻找这一行：

Servername  localhost:443

并确保端口设置为 443。443 是 HTTPS 安全连接的默认端口（常规、不安全的 HTTP 连接默认侦听端口 80）。

接下来，打开/Applications/MAMP/conf/apache/extra/httpd-ssl.conf 并确保你有这行：

Listen 443

同样，这很重要，因为我们必须在同一个端口上设置所有内容。为此，您还应该单击 MAC Dock 中的 MAMP 图标，点击Preferences，转到Ports 选项卡并选择Set Web & MySql ports to 80 & 3306。

停止并重新启动 MAMP 以应用我们目前所做的更改。

3) 为 SSL 配置默认虚拟主机

还在/Applications/MAMP/conf/apache/httpd.conf 中时，查找以下行：

<VirtualHost _default_:443>

#   General setup for the virtual host
DocumentRoot "/Applications/MAMP/Library/htdocs"
ServerName www.example.com:443

这些行为所有 HTTPS 连接设置了 Apache 的默认行为。 ServerName 只是一个虚拟名称，您应该将其替换为 localhost；您还应该确保默认的DocumentRoot 与您的项目根文件夹匹配。

所以把上面几行改成如下：

<VirtualHost _default_:443>

#   General setup for the virtual host
DocumentRoot "/path/to/your/htdocs" 
ServerName localhost

当您进一步向下滚动时，当我们仍然在默认的 VirtualHost 指令中时，您会发现这两行：

SSLCertificateFile "/Applications/MAMP/conf/apache/server.crt"

SSLCertificateKeyFile "/Applications/MAMP/conf/apache/server.key"

将这些更改为您放置我们在步骤 1 中生成的文件的任何位置。就像我之前所说的，我已将我的文件放在“/Applications/MAMP/ssl”中，因此我更改了 以上行：

SSLCertificateFile "/Applications/MAMP/ssl/server.crt"

SSLCertificateKeyFile "/Applications/MAMP/ssl/server.key"

停止并重新启动 MAMP 以应用更改。现在，如果您转到https://localhost，您应该能够在您的根文件夹中看到项目列表。 localhost就是这样！

4) 为自定义本地域创建 SSL 证书

如果您想创建一个自定义域 myproject.dev 并为此也使用 SSL，那么您可以通过 https://myproject.dev 访问它怎么办？

很像我们为localhost所做的，我们需要专门为myproject.dev域创建一个SSL证书，然后为myproject.dev配置一个虚拟主机。让我们从创建证书开始。

再次，我发现 this little tool 称为 create-ssl-certificate，它将为您生成特定本地域的 SSL 证书。这也很容易使用，唯一不太清楚的部分是它是一个 NPM 包，您可以使用npm -g install create-ssl-certificate 全局安装它。

如果 create-ssl-certificate 一切顺利，您现在应该有两个文件，就像在步骤 1 中使用 localhost 一样。默认情况下，create-ssl-certificate 调用生成的文件 ssl.crt 和 ssl.key。我已将它们重命名为 server.crt 和 server.key 以与 localhost 文件保持一致。然后我在myproject 根文件夹中创建了一个ssl 文件夹，并将文件移到那里。

让我们暂时忘掉这些文件，继续进行一些 Apache 配置。

4) 配置 MAMP 的 Apache 以接受虚拟主机

如果您之前创建过虚拟主机，您可能已经这样做了，因此您可以跳过此步骤。

要“激活”创建虚拟主机的可能性，我们唯一需要做的就是转到/Applications/MAMP/conf/apache/httpd.conf 并取消注释此行：

Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

5) 为 SSL 配置本地域的虚拟主机

现在我们可以设置一个虚拟主机，以便我们可以通过https://myproject.dev 访问myproject。首先，编辑您的hosts 文件并添加以下行：

127.0.0.1   myproject.dev

然后，转到/Applications/MAMP/conf/apache/extra/httpd-vhosts.conf 并添加以下内容：

<VirtualHost myproject.dev:443>
    ServerName myproject.dev
    DocumentRoot "/Users/myusername/Sites/myproject"
    SSLEngine on
    SSLCertificateFile "/Users/myusername/Sites/myproject/ssl/server.crt"
    SSLCertificateKeyFile "/Users/myusername/Sites/myproject/ssl/server.key"        
</VirtualHost>

使用此配置，您将能够访问 https://myproject.dev，因为指示服务器搜索我们在第 4 步中创建的 SSL 证书。