About the process of setting Https for local development of React projects
foreword
Yesterday, someone in the group asked a question about how to enable Https when the React project was developed locally. I was also very curious when I saw this question, because sometimes when we connect with third-party APIs, we need to use Https to send requests. For example, some Api of the map. I checked the relevant documents and made a demo to try it out. Below I will share my own related process, hoping to provide some ideas for those who need it.
text
Modify the React startup command
First, we use React's scaffolding to
CREATE-REACT-APP
initialize a demo project, open thepackage.json
file, and modify the startup command
"scripts": {
"start": "HTTPS=true scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js"
},
copy code
After modification, we start the project first and find that the browser prompts that it is not a private connection
Don't worry, we're just getting started.
Since we don't have a valid certificate yet, our connection is deemed insecure, so we need a certificate.
Certificate
We use mkcert to generate the certificate , of course, we need to install mkcert first
MacOs install mkcert can use brew
brew install mkcert
brew install nss //这里firefox
copy code
Arch Linux installation can use yay
yay -S --noconfirm --needed go
yay -S --noconfirm --needed mkcert
copy code
Ubuntu installation can use apt-get
sudo apt-get updatesudo apt install wget libnss3-tools
export VER="v1.4.3" && wget -O mkcert https://github.com/FiloSottile/mkcert/releases/download/${VER}/mkcert-${VER}-linux-amd64\
下载文件后,使文件可执行并将二进制文件放在 `/usr/local/bin` 下面。
chmod +x mkcert\
sudo mv mkcert /usr/local/bin\
copy code
Windows installation can use scoop
scoop bucket add extras scoop install mkcert
copy code
Next, you need to create a CA root certificate locally, open the terminal, and enter mkcert -install
,
Then generate a certificate, mkcert localhost 127.0.0.1
, // you can continue to add other domain names or IP addresses with spaces, the default is pem format, if you want to know more mkcert commands, you can usemkcert -help
Enter the mkcert -CAROOT
command and find the certificate rootCA.pem
Create a new .cert folder in the root directory of our demo project, put the rootCA.pem file in it, and execute it in the terminal of the project root directory
mkcert -key-file ./.cert/key.pem -cert-file ./.cert/rootCA.pem "localhost"
Press Enter to execute, you can see that there is an additional key.pem certificate file in the .cert folder
Because the content of the .cert folder is only used in local development, we can add it to the .gitignore file
Then we modify the startup command of the demo project
"scripts": {
"start": "HTTPS=true SSL_CRT_FILE=./.cert/rootCA.pem SSL_KEY_FILE=./.cert/key.pem node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js"
}
copy code
At this time, we start the project again, and we can see that it is ok
mkcert Github
Thanks for reading, please like and comment
1 Comments