微信公众号开发本地环境开发

Almost any website you visit today is protected by HTTPS. If yours isn’t yet, it should be. Securing your server with HTTPS also means that you can’t send requests to this server from one that isn’t protected by HTTPS. This poses a problem for developers who use a local development environment because all of them run on http://localhost out-of-the-box.

您今天访问的几乎所有网站都受HTTPS保护。 如果还没有， 应该是 。 使用HTTPS保护服务器的安全还意味着您无法从不受HTTPS保护的服务器向该服务器发送请求。 这给使用本地开发环境的开发人员带来了问题，因为所有开发人员都可以直接在http://localhost上运行。

At the startup I’m a part of, we decided to secure our AWS Elastic Load Balancer endpoints with HTTPS as part of a move to enhance security. I ran into a situation where my local development environment’s requests to the server started getting rejected.

作为我的一员，我们决定使用HTTPS保护AWS Elastic Load Balancer终端节点，以作为增强安全性的举措的一部分。 我遇到了本地开发环境对服务器的请求开始被拒绝的情况。

A quick Google search later, I found several articles like this, this or this one with detailed instructions on how I could implement HTTPS on localhost. None of these instructions seemed to work even after I followed them religiously. Chrome always threw a NET::ERR_CERT_COMMON_NAME_INVALID error at me.

快速谷歌搜索后，我发现像几篇文章这个 ， 这个或这个对我怎么能实现HTTPS的详细说明localhost 。 即使我虔诚地遵循了这些指示，这些指示似乎也没有起作用。 Chrome总是向我抛出NET::ERR_CERT_COMMON_NAME_INVALID错误。

问题 (The problem)

All the detailed instructions I had found were correct for the time they were written. Not anymore.

我发现的所有详细说明在编写时都是正确的。 不再。

After a ton of Googling, I discovered that the reason for my local certificate getting rejected was that Chrome had deprecated support for commonName matching in certificates, in effect, requiring a subjectAltName since January 2017.

经过一番谷歌搜索后，我发现本地证书被拒绝的原因是Chrome自2017年1月起就弃用了证书中对commonName匹配的支持 ，实际上要求提供subjectAltName。

解决方案 (The solution)

We’ll be using OpenSSL to generate all of our certificates.

我们将使用OpenSSL生成所有证书。

步骤1：根SSL证书 (Step 1: Root SSL certificate)

The first step is to create a Root Secure Sockets Layer (SSL) certificate. This root certificate can then be used to sign any number of certificates you might generate for individual domains. If you aren’t familiar with the SSL ecosystem, this article from DNSimple does a good job of introducing Root SSL certificates.

第一步是创建根安全套接字层(SSL)证书。 然后，可以使用此根证书对可能为单个域生成的任何数量的证书进行签名。 如果您不熟悉SSL生态系统， 那么DNSimple的这篇文章可以很好地介绍根SSL证书。

Generate a RSA-2048 key and save it to a file rootCA.key. This file will be used as the key to generate the Root SSL certificate. You will be prompted for a pass phrase which you’ll need to enter each time you use this particular key to generate a certificate.

生成RSA-2048密钥并将其保存到文件rootCA.key 。 该文件将用作生成根SSL证书的密钥。 每次使用该特定密钥生成证书时，系统都会提示您输入一个密码短语。

openssl genrsa -des3 -out rootCA.key 2048

You can use the key you generated to create a new Root SSL certificate. Save it to a file namedrootCA.pem. This certificate will have a validity of 1,024 days. Feel free to change it to any number of days you want. You’ll also be prompted for other optional information.

您可以使用生成的密钥来创建新的根SSL证书。 将其保存到名为rootCA.pem的文件中。 该证书的有效期为1,024天。 随时将其更改为您想要的任何天数。 还将提示您输入其他可选信息。

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

步骤2：信任根SSL证书 (Step 2: Trust the root SSL certificate)

Before you can use the newly created Root SSL certificate to start issuing domain certificates, there’s one more step. You need to to tell your Mac to trust your root certificate so all individual certificates issued by it are also trusted.

在使用新创建的Root SSL证书开始颁发域证书之前，还有一个步骤。 您需要告诉Mac信任您的根证书，这样它颁发的所有单个证书也将受到信任。

Open Keychain Access on your Mac and go to the Certificates category in your System keychain. Once there, import the rootCA.pem using File > Import Items. Double click the imported certificate and change the “When using this certificate:” dropdown to Always Trust in the Trust section.

在Mac上打开“钥匙串访问”，然后转到“系统”钥匙串中的“证书”类别。 在那里，使用文件>导入项目导入rootCA.pem 。 双击导入的证书，然后在“信任”部分中将“使用此证书时：”下拉列表更改为“ 始终为真 ”。

Your certificate should look something like this inside Keychain Access if you’ve correctly followed the instructions till now.

如果您到目前为止正确地遵循了说明，那么证书在Keychain Access中应该看起来像这样。

步骤2：网域SSL凭证 (Step 2: Domain SSL certificate)

The root SSL certificate can now be used to issue a certificate specifically for your local development environment located at localhost.

现在可以使用根SSL证书来颁发专门针对位于localhost本地开发环境的证书。

Create a new OpenSSL configuration file server.csr.cnf so you can import these settings when creating a certificate instead of entering them on the command line.

创建一个新的OpenSSL配置文件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=hello@example.com
CN = localhost

Create a v3.ext file in order to create a X509 v3 certificate. Notice how we’re specifying subjectAltName here.

创建一个v3.ext文件以创建X509 v3证书 。 注意我们如何在此处指定subjectAltName 。

authorityKeyIdentifier=keyid,issuer
basicConstraints=CA:FALSE
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
subjectAltName = @alt_names[alt_names]
DNS.1 = localhost

Create a certificate key for localhost using the configuration settings stored in server.csr.cnf. This key is stored in server.key.

使用存储在server.csr.cnf的配置设置为localhost创建证书密钥。 该密钥存储在server.key 。

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

A certificate signing request is issued via the root SSL certificate we created earlier to create a domain certificate for localhost. The output is a certificate file called server.crt.

通过我们先前创建的根SSL证书发出证书签名请求，以为localhost创建域证书。 输出是一个名为server.crt的证书文件。

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

使用新的SSL证书 (Use your new SSL certificate)

You’re now ready to secure your localhost with HTTPS. Move the server.key and server.crt files to an accessible location on your server and include them when starting your server.

现在，您可以使用HTTPS保护localhost了。 将server.key和server.crt文件移动到服务器上的可访问位置，并在启动服务器时将它们包括在内。

In an Express app written in Node.js, here’s how you would do it. Make sure you do this only for your local environment. Do not use this in production.

在用Node.js编写的Express应用程序中，这是您的操作方法。 确保仅针对您的本地环境执行此操作。 不要在生产中使用它 。

I hope you found this tutorial useful. If you’re not comfortable with running the commands given here by yourself, I’ve created a set of handy scripts you can run quickly to generate the certificates for you. More details can be found on the GitHub repo.

希望本教程对您有所帮助。 如果您对自己给定的命令不满意，我创建了一组方便的脚本，可以快速运行这些脚本来为您生成证书。 更多细节可以在GitHub仓库中找到。

I love helping fellow web developers. Follow me on Twitter and let me know if you have any suggestions or feedback. If you’d like to show your appreciation towards any of the work I’ve done, be it a blog post, an open source project or just a funny tweet, you can buy me a cup of coffee.

我喜欢帮助其他Web开发人员。 在Twitter上关注我，如果您有任何建议或反馈，请告诉我。 如果您想对我所做的任何工作表示赞赏，无论是博客文章，开放源代码项目还是有趣的推文，您都可以给我买杯咖啡 。

翻译自: https://www.freecodecamp.org/news/how-to-get-https-working-on-your-local-development-environment-in-5-minutes-7af615770eec/

微信公众号开发本地环境开发