在HTTPS而不是HTTP中启动React应用 [英] Starting a react app in HTTPS instead of HTTP

问题描述

我想知道如何启动使用https(而非HTTP)中的create-react-app命令制作的React应用吗?

I want to know how to start a react app which was made using the create-react-app command in https instead of HTTP?

推荐答案

使用Root SSL证书之类的东西

Use something like Root SSL certificate

生成密钥

openssl genrsa -des3 -out rootCA.key 2048

使用他们的密钥，您可以生成一个可以使用1,024天的证书

With they key you can generate a certificate which is good for 1,024 days

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

在Mac上打开钥匙串访问，然后转到证书类别并导入从上一步生成的rootCA.pem.双击并在使用此证书时"下，选择始终信任"

Open keychain access on your Mac and go to the certificates category and emport that rootCA.pem generated from the last step. Double click and under "When using this certiciate" select 'Always Trust'

创建一个OpenSSL配置文件

Create an OpenSSL configuration file

 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证书.

Create a v3.ext file to create a X509 v3 certificate.

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中.

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

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

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

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.

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文件移动到服务器上的可访问位置，并在启动服务器时将它们包括在内.

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.

在用Node.js编写的Express应用中，您将按照以下方式进行操作.确保仅针对您的本地环境执行此操作.不要在生产中使用它.

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.

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/以获得更详细的说明

Check https://github.com/dakshshah96/local-cert-generator/ for more detailed instructions

这篇关于在HTTPS而不是HTTP中启动React应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！