React changes the project to https startup mode

Follow the procedure below

install mkcert

Introduction to mkcert

mkcert is a small program written in go language to generate a local self-signed certificate. It has a series of convenient features such as cross-platform, easy to use, support for multiple domain names, and automatic trust in CA, which can be used to quickly create an https environment during local development.

The installation method is also very simple. Due to the static compilation and cross-platform characteristics of the go language, the official provides pre-compiled versions for each platform, download them directly to the local, and give executable permissions (needed by Linux/Unix). Download address: https://github.com/FiloSottile/mkcert/releases/latest

In addition, mkcert has been pushed to Homebrew, MacPorts, Linuxbrew, Chocolatey, Scoop and other package management platforms, and can also be installed directly with the corresponding package management platform. Such as:

brew install mkcert  # Homebrew/Linuxbrew
choco install mkcert  # Chocolatey

After a successful installation, you should be able to use the mkcert command:

PS C:\Users\abcfy\projects> mkcert
Using the local CA at "C:\Users\abcfy\AppData\Local\mkcert" ✨
Usage of mkcert:

        $ mkcert -install
        Install the local CA in the system trust store.

        $ mkcert example.org
        Generate "example.org.pem" and "example.org-key.pem".

        $ mkcert example.com myapp.dev localhost 127.0.0.1 ::1
        Generate "example.com+4.pem" and "example.com+4-key.pem".

        $ mkcert "*.example.it"
        Generate "_wildcard.example.it.pem" and "_wildcard.example.it-key.pem".

        $ mkcert -uninstall
        Uninstall the local CA (but do not delete it).

For more options, run "mkcert -help".

Basic use of mkcert

From the help output above, mkcert has given a basic workflow, avoiding complicated openssl commands, and a few simple parameters can generate a local trusted https certificate. For more detailed usage, just look at the official documentation.

generate certificate

open command line

Drag the downloaded certificate file to the command line followed by the -install command

 E:\2019_online\plus> E:\2019_online\plus\mkcert-v1.4.3-windows-amd64.exe -install

2.3 Generate a certificate

Drag the downloaded certificate file to the command line followed by localhost 127.0.0.1

E:\2019_online\plus> E:\2019_online\plus\mkcert-v1.4.3-windows-amd64.exe localhost 127.0.0.1

insert image description here

file at this time

Copy the certificate to the project and directory

insert image description here

Copy the above two files to the root directory of the react project
insert image description here

Modify the startup command

Add the following code before the startup command in the package.json file

cross-env HTTPS=true SSL_CRT_FILE=localhost+1.pem SSL_KEY_FILE=localhost+1-key.pem

insert image description here

Install dependencies

The following packages need to be installed first

 yarn add cross-env

Start the project again

npm start

At this time, the user may transfer to this page and the project will not move
or the https has not been successfully opened .

At this point, you need to modify the ip here and change it to 127.0.0.1.