如何使用 MAMP 和 Apache 在 localhost 上创建虚拟主机（也使用 SSL）？

Question

假设您在 /Users/yourname/Sites/example 有一个本地项目，并且希望能够使用 http://example.local 和 https://example.local 在您的 Mac 上使用 MAMP 访问它（我使用的是 MAMP 6.6 版）。

阅读答案以了解要采取的步骤。

Answer 1

1) 将您的自定义域添加到 hosts 文件中

打开 Finder 并从 Go 菜单中选择 Go to folder 命令。输入/private/etc/hosts作为路径；这将打开一个 Finder 窗口，您可以在其中找到 hosts 文件。

打开 hosts 文件并将您的自定义域映射到 127.0.0.1 (localhost)：

127.0.0.1 localhost
127.0.0.1 example.local

现在，当您访问 http://example.local 时，浏览器会将您重定向到 localhost 并显示您的本地站点列表（这还不是我们想要的，但是嘿，这只是第一步）。

2) 配置 MAMP 以使用 Apache 和 MySql 的默认端口

打开 MAMP，单击 Preferences，然后转到 Ports 选项卡。默认情况下，MAMP 为 Apache 使用端口 8888，为 MySQL 使用 8889，但它为您提供了使用 Apache 的默认端口 (80) 以及 MySQL 的默认端口 (3306) 的选项：单击80 & 3306 按钮以使用这些端口而不是8888 和 8889。

3) 在 Apache 中启用虚拟主机

转到并打开/Applications/MAMP/conf/apache/httpd.conf 文件。寻找这一行：

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

通过删除开头的星号取消注释该行：取消注释该行启用虚拟主机。 （如果该行已取消注释，则可以执行此步骤）。

4) 配置 Apache 监听 80 端口

虽然您打开了/Applications/MAMP/conf/apache/httpd.conf，但也要查找此行：

Listen 8888

并将其更改为

Listen 80
Listen 443

在上一步中，您告诉 MAMP 为 Apache 使用端口 80，因此第一行告诉 Apache 监听端口 80 而不是端口 8888；第二行告诉 Apache 还要监听从端口 443 传入的请求：这是 SSL 连接通常使用的端口，因此除了 http:// 之外，能够通过 https:// 访问您的本地站点是必不可少的步骤。

5) 为您的本地站点创建 SSL 证书

您还需要 SSL 证书才能通过 https://example.local 访问您的网站。这可以使用 mkcert 工具轻松完成。你可以阅读 Github 上的说明，但基本上是关于安装工具，然后运行：

$ mkcert example.local

这会生成两个文件：一个证书 (example.local.pem) 和一个证书密钥 (example.local-key.pem)。

将这两个文件移动到项目中的某个位置。例如，您可以在项目的根目录下创建一个名为 .crt 的隐藏文件夹并将它们放入其中。

6) 为您的本地站点创建一个虚拟主机

最后，是时候为您的本地站点实际创建一个虚拟主机了。转到并打开 /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf 文件并包含以下内容：

// These first two lines tell Apache to check for virtual hosts 
// whenever a request comes in on port 80 (http://) or 443 (https://)

NameVirtualHost *:80
NameVirtualHost *:443

// This first directive tells Apache to serve the files at "/Users/yourname/Sites/example"
// whenever "http://example.local" is visited 

<VirtualHost *:80>
    ServerName example.local
    DocumentRoot "/Users/yourname/Sites/example"
</VirtualHost>

// This second directive tells Apache to serve the files at "/Users/yourname/Sites/example"
// whenever "https://example.local" is visited, and provides paths to the certificates
// we previously created 

<VirtualHost *:443>
    ServerName example.local
    DocumentRoot "/Users/yourname/Sites/example"
    SSLEngine On
    SSLCertificateFile "/Users/yourname/Sites/example/.crt/example.local.pem"
    SSLCertificateKeyFile "/Users/yourname/Sites/example/.crt/example.local-key.pem"
</VirtualHost>

就是这样！现在您可以通过http://example.local 和https://example.local 查看您的网站

（请记住将路径调整到您的项目和证书所在的位置）。

7) 需要多个本地站点的虚拟主机？

想要为您拥有的更多本地站点添加虚拟主机，例如。对于您想通过http://test.local访问的网站？

转到/private/etc/hosts 并添加127.0.0.1 test.local

127.0.0.1 localhost
127.0.0.1 example.local
127.0.0.1 test.local

使用mkcert test.local 生成 SSL 证书（就像我们之前在第 4 步中所做的那样）。

最后，更新虚拟主机文件如下：

NameVirtualHost *:80
NameVirtualHost *:443

<VirtualHost *:80>
    ServerName example.local
    DocumentRoot "/Users/yourname/Sites/example"
</VirtualHost>

<VirtualHost *:443>
    ServerName example.local
    DocumentRoot "/Users/yourname/Sites/example"
    SSLEngine On
    SSLCertificateFile "/Users/yourname/Sites/example/.crt/example.local.pem"
    SSLCertificateKeyFile "/Users/yourname/Sites/example/.crt/example.local-key.pem"
</VirtualHost>

// Basically, copy and paste the virtual hosts for the example project 
// and update the domain and paths accordingly

<VirtualHost *:80>
    ServerName test.local
    DocumentRoot "/Users/yourname/Sites/test"
</VirtualHost>

<VirtualHost *:443>
    ServerName test.local
    DocumentRoot "/Users/yourname/Sites/test"
    SSLEngine On
    SSLCertificateFile "/Users/yourname/Sites/test/.crt/test.local.pem"
    SSLCertificateKeyFile "/Users/yourname/Sites/test/.crt/test.local-key.pem"
</VirtualHost>

8) 奖励：为您的虚拟主机添加额外配置

VirtualHost 指令可以接受一些额外的指令，告诉 Apache 在收到特定请求时要做什么。

例如，假设我们的示例项目是一个可以通过http://localhost:3000 访问的Node 应用程序，但我们想使用http://example.local 来访问它。我们必须告诉 Apache 将向http://example.local 发出的任何请求转发给http://localhost:3000。

NameVirtualHost *:80
NameVirtualHost *:443

// This line loads a module that enables proxying (it's turned off by default)

LoadModule proxy_http_module modules/mod_proxy_http.so 

// The ProxyPass and ProxyPassReverse lines tell Apache 
// to forward the request to http:// and https://localhost:3000

<VirtualHost *:80>
    ServerName example.local
    DocumentRoot "/Users/yourname/Sites/example"
    ProxyPass / http://localhost:3000/ 
    ProxyPassReverse / http://localhost:3000/
</VirtualHost>

<VirtualHost *:443>
    ServerName example.local
    DocumentRoot "/Users/yourname/Sites/example"
    SSLEngine On
    SSLCertificateFile "/Users/yourname/Sites/example/.crt/example.local.pem"
    SSLCertificateKeyFile "/Users/yourname/Sites/example/.crt/example.local-key.pem"
    ProxyPass / http://localhost:3000/ 
    ProxyPassReverse / http://localhost:3000/
</VirtualHost>