logo标签列表

create-react-app: 如何使用https而非http？

reactjscreate-react-app
127

我想知道有没有人知道如何在“create-react-app”环境中使用https。我在README或快速谷歌搜索中找不到任何相关信息。我只想让https://localhost:3000正常工作，否则就是https://localhost:3001。

25个回答
131

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

文档

实现使用HTTPS环境变量来确定在启动服务器时使用哪种协议。

3
我尝试了这个方法。我使用 Windows 10 系统，执行了以下命令：HTTPS=true&&npm start但似乎并没有生效。和平常一样，控制台会显示以下信息：Compiled successfully!你现在可以在浏览器中查看 x-app。 本地地址: http://localhost:3000/ 局域网地址: http://192.168.2.4:3000/ - Ringo
11
你刚才运行了 HTTPS=true&&npm start，在Windows上你需要运行 set HTTPS=true&&npm start。 - Steve Buzonas
2
在像 Mac 这样的 Unix 系统上，您可以在配置文件中导出它。在 Windows 上有一种类似的全局设置环境变量的方式，但我不熟悉。但是，在项目级别上，应该在启动之前初始化 dotenv，因此您可以尝试将 HTTPS=true 添加到您的 .env.development 文件中。 - Steve Buzonas
2
@Ringo 有点晚了，但是这里展示了如何设置Java的PATH。对于任何环境变量，例如Windows上的HTTPS或NODE_ENV等，都是相同的过程。您还可以打开Windows资源管理器，右键单击此电脑，选择属性，然后选择高级系统设置，然后单击环境变量按钮... & 获利。 - ruffin
1
请确保HTTPS=true中的大写字母，小写的https=true将无法工作。 - Snackoverflow
显示剩余8条评论
52
您可以编辑您的 package.json 文件中的 scripts 部分，修改如下：
``` "scripts": { "start": "set HTTPS=true&&react-scripts start", ... } ```
或者直接运行命令 `set HTTPS=true&&npm start`。
请注意，在我的电脑上做了这个修改后，热重载会出现问题。
-- 注意：操作系统为 Windows 10 64 位。
11
为了避免每次都手动输入命令，我将其添加到了我的 package.json 文件中。但在我的 iMac 上，为了让它能够工作，我不得不省略 set 和 &&，所以我只使用了 HTTPS=true react-scripts start。 - Tope
46
您还可以在项目根目录中创建一个名为.env的文件，然后编写以下内容。
HTTPS=true

完成后，只需像往常一样运行"npm start"来启动您的应用程序。

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

与此处发布的某些其他答案不同，在Linux和Windows上都可以正常工作。

23

Windows（cmd.exe）

set HTTPS=true&&npm start

（注：故意忽略空格。）

Windows（PowerShell）

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

Linux，macOS（Bash）

HTTPS=true npm start

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

自定义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脚本中添加如下内容：

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

或者您可以创建一个包含HTTPS = true的.env文件

1
在Windows中使用自定义SSL证书：set HTTPS=true&&set SSL_CRT_FILE=<SSLCert.crt>&&set SSL_KEY_FILE=<SSLCert.key>&&npm start - Dulanka
20

如果是MAC/UNIX系统，执行以下操作：

export HTTPS=true
npm start

或者简单的一行描述

export HTTPS=true&&npm start

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

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

这样你应该就能够使用 https 访问了。

15
在package.json中的scripts > start中添加set HTTPS=true&&react-scripts start，如下所示：

"scripts" in package.json:

"scripts": {
    "start": "set HTTPS=true&&react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  • 请不要在命令之间留下任何空格，例如HTTPS=true && npm start将无法工作。

请参阅官方文档： 在开发中使用 HTTPS

（注意：故意省略了空格。）

1
这很有帮助。脚本稍作修改，现在应该是："start": "set HTTPS=true&&node scripts/start.js"。 - user1189352
7

我认为值得一提的是设置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",

然后，不需要导出（export）：
su
npm start
7
"scripts": {
"start": "set HTTPS=true&&set PORT=443&&react-scripts start",
........
}

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

如果一个人使用 Windows，另一个人使用 Mac，如何进行设置？ - HackerMF
6

将以下内容添加到 .env (或 .env.local) 文件中：

HTTPS=true

5
请在命令提示符中使用此命令。
 set HTTPS=true&&npm start
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接