以HTTPS而非HTTP方式启动React应用程序

Question

我想知道如何在https而不是HTTP中启动使用create-react-app命令创建的React应用程序？

- Ishara Malaviarachchi

Answer 1

使用类似于根SSL证书的东西 生成密钥

openssl genrsa -des3 -out rootCA.key 2048

使用该密钥可以生成一个有效期为1,024天的证书。

最初的回答

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

在您的Mac上打开密钥串访问，并转到证书类别并导出从上一步生成的rootCA.pem。双击，在“使用此证书时”下选择“始终信任”。

创建一个OpenSSL配置文件

Translated:

 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=[e-mail]
 CN = localhost

创建一个v3.ext文件以创建X509 v3证书。

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

[alt_names]
DNS.1 = localhost

使用存储在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 )

证书签名请求是通过我们之前创建的根SSL证书发出的，用于为本地主机创建一个域名证书。输出结果是一个名为server.crt的证书文件。最初的回答。

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

现在，您可以使用HTTPS来保护本地主机。将server.key和server.crt文件移动到服务器上的可访问位置，并在启动服务器时包含它们。

在Node.js编写的Express应用程序中，以下是如何执行此操作的。请确保仅在本地环境中执行此操作。不要在生产中使用此操作。

最初的回答：

var path = require('path')
var fs = require('fs')
var express = require('express')
var https = require('https')

var certOptions = {
  key: fs.readFileSync(path.resolve('build/cert/server.key')),
  cert: fs.readFileSync(path.resolve('build/cert/server.crt'))
}

var app = express()

var server = https.createServer(certOptions, app).listen(443)

请看更加详细的使用说明，请点击https://github.com/dakshshah96/local-cert-generator/。最初的回答。

- Mark

Answer 2

在马克提供的解决方案基础上，若要导入证书，则需单击“文件”>“导入项目”。然后，在硬盘上搜索证书。完成此操作后，您可以继续执行其余步骤。

- emfastic