create-react-app：如何使用 https 而不是 http？

Question

我想知道是否有人知道如何在 'create-react-app' 环境中使用 https on dev。我在自述文件或快速谷歌搜索中看不到任何相关信息。我只想要 https://localhost:3000 to work, or else https://localhost:3001.

Answer 1

在运行启动命令之前设置 HTTPS=true。

Documentation

实现使用 HTTPS Environment Variable to determine which protocol 在启动服务器时使用。

Answer 2

您可以编辑 package.json 脚本部分以阅读：

"scripts": { "start": "set HTTPS=true&&react-scripts start", ... }

或运行 set HTTPS=true&&npm start

只是旁注，对我来说，由于某种原因进行此更改会中断热重载....

-- 注意：OS === Windows 10 64 位

Answer 3

可能需要在服务器和浏览器上安装自签名 CA 链。 Difference between self-signed CA and self-signed certificate

Answer 4

在MAC/UNIX的情况下做

export HTTPS=true
npm start

或者简单的一根线

export HTTPS=true&&npm start

或将 package.json 中的启动脚本更新为

"start": "export HTTPS=true&&PORT=3000 react-scripts start",

你应该可以访问 https。

Answer 5

HTTPS=true npm start

在终端中为我工作的 Create-React-App

Answer 6

我无法让它工作（设置 HTTPS=true），相反，我使用了

react-https-redirect

App 组件的简单包装器。

Answer 7

请在命令提示符中使用它

 set HTTPS=true&&npm start

Answer 8

你也可以在项目的根目录下创建一个名为.env的文件，然后写入

HTTPS=true

之后，只需运行 "npm start" 即可启动您的应用程序。

文档：https://facebook.github.io/create-react-app/docs/advanced-configuration

在 Linux 和 Windows 上 都有效，与此处发布的其他一些答案不同。

Answer 9

set HTTPS=true&&react-scripts start in scripts > start: of package.json 如下所示。

"scripts" 在 package.json:

"scripts": {
    "start": "set HTTPS=true&&react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

请不要在命令之间留下任何 space，即 HTTPS=true && npm start 将不起作用。

参考官方文档。 Using HTTPS in Development

(Note: the lack of whitespace is intentional.)

Answer 10

我认为值得一提的是设置PORT=443，默认HTTPS标准端口。每次浏览时可以避免在地址末尾附加:PORT

su
export HTTPS=true 
export PORT=443
export SSL_CRT_FILE=/PATH/TO/cert.pem     # recommended
export SSL_KEY_FILE=/PATH/TO/privkey.pem  # recommended
npm start

或

你可以将它们全部放入 package.json:

  "scripts": {
    "start": "HTTPS=true PORT=443 react-scripts start",

然后，没有 exporting:

su
npm start

Answer 11

如果由于 "your connection is not private" 问题（在 chrome 中）它仍然无法正常工作，这对我来说很好：

https://github.com/facebook/create-react-app/issues/3441

简而言之：

首先我从 chrome 导出了证书（查看这个）。
将证书导入 Windows（使用 certmgr.msc）。
允许 chrome://flags/#allow-insecure-localhost 标志。

Answer 12

在 Windows 环境中将以下行添加到 package.json:

  "scripts": {
    "start-dev": "set HTTPS=true&&set PORT=443&&react-scripts start"
  },

它将使用 https 和端口 443 启动开发服务器。目前，NodeJs 已经知道运行这个正确的错误，但它适用于 nodeJs v8.11.3 - https://nodejs.org/dist/v8.11.3/node-v8.11.3-x64.msi 对我来说。

Answer 13

您可以创建一个 proxy.HTTPS->HTTP

创建密钥和证书。

openssl req -nodes -new -x509 -keyout server.key -out server.cert

创建一个名为 proxyServer.js

的文件

var httpProxy = require('http-proxy');
let fs = require('fs');

httpProxy.createServer({
    target: {
      host: 'localhost',
      port: 3000
    },
    ssl: {
      key: fs.readFileSync('server.key', 'utf8'),
      cert: fs.readFileSync('server.cert', 'utf8')
    }
  }).listen(3000);

从终端运行

node proxyServer.js

Answer 14

我正在使用 Windows 10 我遇到了同样的问题。我意识到你需要：

运行 命令提示符 具有 管理员权限
运行在终端 bash 这个命令：set HTTPS=true&&npm start
您也可以将此代码放入 package.json 文件的 scripts 部分，如下所示:

"scripts": { "start": "set HTTPS=true&&react-scripts start", (...) }
奖励：如果您想更改 PORT，请使用此命令安装：

set HTTPS=true&&set PORT=443&&react-scripts start

Obs.: 注意一些字符之间没有留下的空格。

您可以浏览此link了解更多详情。

Answer 15

到目前为止，我正在使用 Windows 10 最新版本 Windows Insider Program。

使用Windows 10时好像出现了三种情况：

Windows 10 使用 NPM 的 CMD 命令行

set HTTPS=true&&npm start

Windows 10 使用适用于 NPM 的 PowerShell 命令行

set HTTPS=true&&npm start

Windows 10 使用 Linux Bash NPM 命令行（我的案例是这样的）

HTTPS=true npm start

文档：Create react app dev

Answer 16

编辑您的 package.json 文件并更改用于启动 保护域 的启动脚本。例如 https

 {
  "name": "social-login",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-facebook-login": "^4.0.1",
    "react-google-login": "^3.2.1",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    // update this line "start": "HTTPS=true react-scripts start",
    "start": "set HTTPS=true&&react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

谢谢

Answer 17

为避免 Chrome 和 Safari 中出现不受信任的证书错误，您应该手动指定一个自签名密钥对。加拿大税务局 allows you to specify them.

此外，使用 .env 文件来存储这些变量。

在 macOS 上，只需将您的证书添加到钥匙串访问，然后在其详细信息中设置 Trust Always。

Answer 18

"scripts": {
"start": "set HTTPS=true&&set PORT=443&&react-scripts start",
........
}

如果您需要更改端口并将其设置为 https。

Answer 19

Windows (cmd.exe)

set HTTPS=true&&npm start

（注意：缺少空格是故意的。）

Windows（Powershell）

($env:HTTPS = "true") -and (npm start)

Linux、macOS (Bash)

HTTPS=true npm start

注意服务器将使用自签名证书，因此您的网络浏览器几乎肯定会在访问该页面时显示警告。

自定义 SSL 证书

HTTPS=true SSL_CRT_FILE=<SSLCert.crt> SSL_KEY_FILE=<SSLCert.key> npm start

Linux、macOS (Bash)

HTTPS=true SSL_CRT_FILE=<SSLCert.crt> SSL_KEY_FILE=<SSLCert.key> npm start

为了避免每次都这样做： 您可以像这样在 npm 启动脚本中包含：

{
  "start": "HTTPS=true react-scripts start"
}

或者您可以使用 HTTPS=true

创建一个 .env 文件

Answer 20

Windows，试试这个

($env:HTTPS = "true") -and (npm start)

我正在使用 VS 代码终端 (powershell)。

Answer 21

关于此问题的要点：如果您希望在 LAN（而不是本地主机）上使用 https，那么 SSL 认证是一个问题，因为 IP 不是静态的！

这是一本关于这个主题的好书，他们在其中探索了无论如何都要这样做的选择：SSL For Devices in Local Networks

Answer 22

添加到文件 .env（或 .env.local）行： HTTPS=真

create-react-app：如何使用 https 而不是 http？

create-react-app: how to use https instead of http?

reactjs

create-react-app

或

Windows (cmd.exe)

Windows（Powershell）

Linux、macOS (Bash)

自定义 SSL 证书

Linux、macOS (Bash)