如何使用create-react-app在本地设置HTTPS

注意:本指南适用于macOS用户,要求您已安装 brew。
本教程旨在通过本地生成一个安全证书,用于本地访问服务器时使用HTTPS。

当您需要使用同时通过HTTPS服务请求的API时,在开发中运行HTTPS会很有帮助。

在本文中,我们将使用自己的SSL证书在create-react-app的开发中设置HTTPS。

本指南适用于macOS用户,要求您已安装brew

添加HTTPS

在中package.json,将启动脚本更新为包含https:

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

yarn start在此步骤之后运行,将在浏览器中显示以下屏幕:

如何使用create-react-app在本地设置HTTPS

在此阶段,您已经准备好使用https。但是您没有有效的证书,因此假定您的连接不安全。

创建一个SSL证书

获得证书的最简单方法是通过 mkcert

# Install mkcert tool
brew install mkcert

# Install nss (only needed if you use Firefox)
brew install nss

# Setup mkcert on your machine (creates a CA)
mkcert -install

运行上述命令后,您将在计算机上创建一个证书颁发机构 ,使您可以为以后的所有项目生成证书。

现在,从create-react-app项目的根目录运行:

# Create .cert directory if it doesn't exist
mkdir -p .cert

# Generate the certificate (ran from the root of this project)
mkcert -key-file ./.cert/key.pem -cert-file ./.cert/cert.pem "localhost"

我们将把生成的证书存储在.cert目录中。这些不应提交给版本控制,因此应更新目录.gitignore以包括在内.cert

接下来,我们需要start再次更新脚本以包括我们新创建的证书:

  "scripts": {
    "start": "HTTPS=true SSL_CRT_FILE=./.cert/cert.pem SSL_KEY_FILE=./.cert/key.pem react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

yarn start再次运行时,您现在应该看到连接是安全的。

如何使用create-react-app在本地设置HTTPS

 

 

本文来自投稿,不代表微擎百科立场,如若转载,请注明出处:https://www.w7.wiki/server/4132.html

发表评论

登录后才能评论