如何让HTTPS在本地主机localhost上工作? - Konstantin

这是有关如何使HTTPS在本地主机或任何本地域上运行的完整教程。
本教程是关于以下内容的：

如何设置本地域
如何创建自签名SSL证书（或更准确地说是TLS证书）
如何配置Nginx以使用SSL证书
如何使用docker-compose在Docker容器中配置HTTPS的情况下运行Nginx
无需手动创建证书的解决方案

我正在使用Linux，所以本教程适用于Linux OS。如果使用Windows，则可以使用Git Bash仿真器或WSL（Linux的Windows子系统）运行相同的命令。尽管我没有尝试过，但某些命令可能无法正常工作。无论如何，设置路径是相同的。只有命令可能有所不同。
最后，我们将Docker与docker-compose和Nginx结合使用，以测试HTTPS是否有效。

为什么您可能需要本地域的HTTPS
有一些原因可能需要为本地域启用HTTPS：

您可能需要用它来实现OAuth。
如果您在“主机”文件中配置了本地域，并且想要在本地测试Service Worker
检查您的网络应用重定向是否按预期工作

设置本地域
您可以使用“ localhost”作为域名，也可以创建本地自定义域以用于开发目的。如果您决定继续使用“ localhost”，则只需跳过此部分并转到下一个。
在整个教程中，我将使用“ myapp.local”域名作为示例。您可以使用任何您想要的域。
要创建本地域，您需要向“主机”文件中添加新记录。
使用“ nano”或“ vim”编辑器打开“ / etc / hosts”文件。在大多数情况下，您将需要添加“ sudo”以具有编辑和保存文件的权限。我在下面的命令中使用“ nano”编辑器。
sudo nano /etc/hosts
添加具有所需域名的新行：
127.0.0.1 myapp.local
这会将“ myapp.local”域（或您选择的任何域名）映射到IP 127.0.0.1。该IP已经被映射到同一文件中的localhost。
保存并关闭编辑器。现在，当您启动Nginx服务器时（即，如果您从本教程中使用Docker），则可以在浏览器的地址栏中使用myapp.local域。

创建根自签名SSL证书
您可以使用根证书来创建任意数量的本地证书。将根证书放置在项目文件夹或任何全局文件夹中，以将其重新用于任何本地项目。
我在用户的主目录中创建了一个新文件夹“ local-root-ca”。

mkdir ~/local-root-ca
cd ~/local-root-ca

在该文件夹中运行“ genrsa”命令以创建私钥RSA密钥。

openssl genrsa -des3 -out rootCA.key 2048

然后使用以下命令创建自签名根CA（证书颁发机构）证书。

openssl req -x509 -new -nodes -key rootCA.key -sha256 -days 1024 -out rootCA.pem

“ req”命令创建一个自签名证书，用作根CA。
系统将提示您输入一些证书信息。我使用了所有默认设置，因此只需在每个提示下按Enter。
下一步是将自签名的根CA证书添加到浏览器中的受信任证书。您将在下面找到有关Chrome和Firefox浏览器的教程。

将自签名SSL证书添加到Chrome浏览器中的受信任证书
转到Chrome浏览器设置（单击右上角的三个点）。

然后点击左侧的“隐私和安全”菜单；
选择“安全性”菜单项；
然后滚动到底部，然后在“高级”部分中选择“管理证书”部分。
选择“权限”标签，然后单击“导入”按钮。
然后选择您先前创建的“ rootCA.pem”文件。至少检查“信任此证书以标识网站”，然后单击“确定”。

就是这样。现在，Chrome浏览器信任我们最近将创建的证书。

创建域SSL证书通用配置
准备用于创建域SSL证书的配置文件。这是一项一次性的任务。您最近可以将其用于多个本地域。
使用以下内容创建一个名为“ server.csr.cnf”的证书配置文件。

[req]
default_bits = 2048
prompt = no
default_md = sha256
distinguished_name = dn

[dn]
C=US
ST=RandomState
L=RandomCity
O=RandomOrganization
OU=RandomOrganizationUnit
emailAddress=example@example.com

CN = ${ENV::SSL_DOMAIN_TEMP}

使用以下内容创建一个名为“ v3.ext”的扩展文件：

authorityKeyIdentifier=keyid,issuer
basicConstraints=CA:FALSE
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
subjectAltName = @alt_names

[alt_names]
DNS.1 = ${ENV::SSL_DOMAIN_TEMP}

我们将在此处使用环境变量“ SSL_DOMAIN_TEMP”。在不同的域中重用此配置将更加容易。

创建域SSL证书
将我们要创建SSL证书的域名设置为环境变量“ SSL_DOMAIN_TEMP”。
export SSL_DOMAIN_TEMP=myapp.local

然后创建“ crt”和“ key”文件。两者都是SSL证书的一部分。“ crt”文件是签名的SSL证书，“ key”文件是该文件的私钥。
创建一个“密钥”文件命令：

openssl req -new -sha256 -nodes -out server.csr -newkey rsa:2048 -keyout server.key -config <( cat server.csr.cnf )

创建一个“ crt”文件命令。

openssl x509 -req -in server.csr -CA rootCA.pem -CAkey rootCA.key -CAcreateserial -out server.crt -days 500 -sha256 -extfile v3.ext

创建新的文件夹“ certificates”。如果要使用Docker Compose，它可能在项目文件夹中。或在任何文件夹中，如果您在不使用Docker的情况下使用Nginx。
然后将域SSL证书文件（“ server.crt”和“ server.key”）复制到新文件夹。可以删除文件“ server.csr”。

Nginx HTTPS配置示例
如果您使用本教程中的Docker，则需要创建一个Nginx配置文件。在项目文件夹中创建一个新文件“ default.conf”。
这是启用HTTPS的localhost的基本Nginx配置。

server {
    server_name _;
    
    listen 80 default_server;
    listen 443 ssl;

    ssl_certificate      /var/server.crt;
    ssl_certificate_key  /var/server.key;

    location / {
        root   /usr/share/nginx/html/;
        index  index.html index.htm;
    }
}

如果您不使用Docker，则将此配置用作本地Nginx配置的基础。

使用Docker Compose运行Nginx
如果您不使用Docker，则可以跳过这一部分。
在项目目录中创建“ docker-compose.yml”文件。我们这里已经有文件夹“ certificates”。
使用以下内容填充docker-compose.yml。

version: '3'

services:
    nginx:
        image: nginx:alpine
        ports:
            - 80:80
            - 443:443
        volumes:
            - ./default.conf:/etc/nginx/conf.d/default.conf
            - ./certificates/server.crt:/var/server.crt
            - ./certificates/server.key:/var/server.key

我们做了：

从轻量级Alpine镜像创建一个简单的Nginx容器
从容器镜像 80（HTTP）和443（HTTPS）端口
在Docker容器中挂载Nginx配置和SSL证书

如果您正在运行其他Web服务器，则Docker无法映射端口80和443。因此，要么停止Web服务器，要么更改映射的端口，例如“ -81：80”。在这种情况下，您将使用带有端口的URL（即http：// localhost：81）测试网站。

无需手动创建证书的解决方案
这里是一些简单的解决方案。选择任何一个。

使用mkcert实用程序自动执行上述整个过程
将Caddy Web服务器与自动HTTPS一起使用
使用ngrok通过HTTPS将本地服务器公开到公共URL