如何在本地localhost上安装SSL证书HTTPS

最近正在做一个项目,要求使用HTTPS,因需要与 Amazon S3(云存储)通信。我研究了如何在本地localhost 主机上安装SSL,以下是我整理的解决方案。

目前我使用 WampServer,原理上也适用于Xampp、MAMP和AppServ…。如果你嫌安装SSL麻烦,不用再往下看了,更换环境软件 Laragon 自带SSL能本地开启,哦耶(本地证书都需要在浏览器内添加白名单)

安装OpenSSL

接下来,安装OpenSSL。在你的电脑上下载并安装OpenSSL。我使用Win64,所以我下载了Win64 OpenSSL full version。我的OpenSSL安装在 E:\OpenSSL-Win64 中。你可以在你的电脑上的任何地方安装。

创建你的密钥和证书

在本地localhost上安装SSL证书HTTPS,我们将创建我们的自签名SSL证书。要做到这一点,以管理员身份打开你的命令(CMD)。需要以管理员的身份打开。

在命令提示符下,将当前目录改为你安装OpenSSL的目录。在我的例子中,我把OpenSSL安装在 E:\OpenSSL-Win64。自己按照下面的代码改变目录。

cd E:\OpenSSL-Win64\bin

通过命令行创建我们的私钥。这一步将要求你提供一个口令。你可以编写任何你想要的口令。依次运行下面的命令行来生成你的私钥。

openssl genrsa -aes256 -out private.key 2048
openssl rsa -in private.key -out private.key

创建我们的证书。这一步会问你一些问题。你可以保留默认答案(只按回车键而不输入任何东西),除了公共名称问题。命令名称问题的答案必须是 localhost。所以你必须为命令名称问题输入 localhost。运行下面的命令行。

openssl req -new -x509 -nodes -sha1 -key private.key -out certificate.crt -days 36500

运行这个命令行后,你已经生成了certificate.crt 和 private.key 文件。这些文件存储在你安装OpenSSL的文件夹中。在我的例子中 E:/OpenSSL-Win64

安装私钥和证书文件

把刚刚创建的私钥和证书文件移到Apache文件夹中。在你的 Apache 文件夹(E:\wamp64\bin\apache\apache2.4.46\conf)下创建一个名为 key 的新文件夹。

在 E:\OpenSSL-Win64\bin 中,你会发现你创建的 private.key 和 certificate.crt。把这两个文件移到 key 文件夹中(E:\wamp64\bin\apache\apache2.4.46\conf\key)。

编辑httpd.conf

在你的 httpd.conf(E:\wamp64\bin\apache\apache2.4.46\conf)中,找到并取消对下面几行的注释。取消注释就是删除该行前面的 #。

LoadModule ssl_module modules/mod_ssl.so
Include conf/extra/httpd-ssl.conf
LoadModule socache_shmcb_module modules/mod_socache_shmcb.so

这样做是为了告诉 Apache 加载SSL模块,并加载 httpd-ssl.conf,然后再看下面的编辑。

编辑httpd-ssl.conf

这一步将编辑 httpd-ssl.conf(E:\wamp64\bin\apache\apache2.4.46\conf\extra),以便你的本地主机可以使用我们生成的自签名SSL证书。DocumentRoot 是你的 WampServer 的根文件目录。

DocumentRoot "e:/wamp64/www"
ServerName localhost:443
ServerAdmin admin@example.com
ErrorLog "${SRVROOT}/logs/error.log"
TransferLog "${SRVROOT}/logs/access.log"
SSLSessionCache "shmcb:${SRVROOT}/logs/ssl_scache(512000)"
SSLCertificateFile "${SRVROOT}/conf/key/certificate.crt"
SSLCertificateKeyFile "${SRVROOT}/conf/key/private.key"
CustomLog "${SRVROOT}/logs/ssl_request.log" \
          "%t %h %{SSL_PROTOCOL}x %{SSL_CIPHER}x \"%r\" %b"

重新启动WampServer

必须重新启动 WampServer 修改的内容才能生效。

重新启动后,WampServer的图标应该是绿色的。如果不是,你可以右击WampServer图标,然后选择工具,并选择 检查 httpd.conf 的语法。以便纠正语法。在解决了这个问题之后,再次重启WampServer。
现在你的本地主机 https://localhost 应该能够使用HTTPS了。

额外问题

如何创建一个有SSL设置的新项目

在实施自签名证书之前,环境内已经建立了多项目。他们仍然可以正常使用 http://,但他们还不能使用 https://。为了让他们使用 https://,需要在 httpd-ssl.conf 中为他们添加虚拟主机。

这里举个栗子。假设我想在WampServer上添加一个新项目。下面是步骤。

为新项目添加新的虚拟主机。新项目是 yellowdev.local。(如果你使用Windows,确保你在通过WampServer添加新的虚拟主机之前禁用360类安全软件,因会保护Windows文件不被更改)

现在你应该能正常访问 http://yellowdev.local。接下来打开 httpd-ssl.conf(E:\wamp64\bin\apache\apache2.4.46\conf\extra)。并添加下面的代码,放到文件的最后。

<VirtualHost *:443>
	ServerName yellowdev.local
	ServerAlias www.yellowdev.local
	DocumentRoot "e:/wamp64/www/yellowdev/web"
	SSLEngine on
	SSLCertificateFile "${SRVROOT}/conf/key/certificate.crt"
	SSLCertificateKeyFile "${SRVROOT}/conf/key/private.key"
	<Directory  "e:/wamp64/www/yellowdev/web/">
		SSLOptions +StdEnvVars
		Options +Indexes +Includes +FollowSymLinks +MultiViews
		Require all granted
		AllowOverride All
	</Directory>
	BrowserMatch "MSIE [2-5]" \
        	 nokeepalive ssl-unclean-shutdown \
	         downgrade-1.0 force-response-1.0
	CustomLog "${SRVROOT}/logs/ssl_request.log" \
        	  "%t %h %{SSL_PROTOCOL}x %{SSL_CIPHER}x \"%r\" %b"
</VirtualHost>   

然后重新启动WampServer后才能生效。现在你应该访问 https://yellowdev.local。

如果你不能与外部API通信,参考以下步骤。

在我的项目使用了CraftCMS,图像存储在AWS S3。遇到的问题是在前端没有显示图像。从浏览器控制台看到的错误是:”Image transform cannot be created with HTTP 500 – Internal Server Error”。大概提示该项目无法与外部资源链接,而我适用的外部资源,实际是 AWS S3。

然后我在后台检查图像,查看图像显示地址,URL来自 CloudFront CDN。然后我下载图片,我得到的错误是 “cURL error 60: SSL certificate problem: unable to get local issuer certificate”。提示自签名的证书是不完整的。(我当然知道)

要修复不完整的SSL证书,请遵循以下步骤。

从这个链接下载 cacert.pem,这是一个压缩包。解压该文件包,里面有一个 cacert.pem。

转到你的 WampServer 文件夹(Xampp 或 MAMP)并进入你的 php/extras 文件夹。然后创建一个新的 ssl 文件夹。像这样 E:\wamp64\bin\php\php7.4.24\extras\ssl。
把你刚下载的 cacert.pem 移到 ssl 文件夹中。

接下来,打开你的 php.ini,搜索 curl.cainfo。注意,你将需要从两个地方更新php.ini。一个是在Wampserver > PHP {version you currently activates} > php.ini。当你在浏览器上查看框架(例如:CraftCMS)时,这个 php.ini 将移除 cURL error 60 。

另一个地方是 E:\wamp64\bin\php\php{版本}php.ini。当你通过终端更新框架(例如:CraftCMS)时,这个php.ini将移除 cURL error 60 。

你会看到 curl.cainfo。要取消它的注释并添加 cacert.pem 的绝对路径。下面是我在php.ini中的例子。

curl.cainfo = "E:\wamp64\bin\php\php7.4.24\extras\ssl\cacert.pem"

最后,重新启动 WampServer,本地主机才能生效。

如果你的环境中有多个 PHP 版本,你应该检查当前要求使用 AWS S3 的项目的正确 PHP 版本。有可能你为其他项目改变了 PHP 版本,而忘记换回要求,使用 AWS S3 的项目的正确 PHP 版本。我就遇到了这种情况,MMP。

你可能也喜欢