Como configurar HTTPS localmente com create-react-app

Executar HTTPS no desenvolvimento é útil quando você precisa consumir uma API que também está atendendo a solicitações via HTTPS.

Neste artigo, estaremos configurando HTTPS em desenvolvimento para nosso aplicativo criar-reagir com nosso próprio certificado SSL.

Este guia é para usuários do macOS e requer que você tenha brewinstalado.

Adicionando HTTPS

No seu package.json, atualize o script de início para incluir https:

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

Executar yarn startapós esta etapa mostrará esta tela em seu navegador:

Nesta fase, você já está pronto para prosseguir https. Mas você não tem um certificado válido, então sua conexão é considerada insegura.

Criação de um certificado SSL

A maneira mais fácil de obter um certificado é via 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

Depois de executar os comandos acima, você terá criado uma autoridade de certificação em sua máquina que permite gerar certificados para todos os seus projetos futuros.

Na raiz do seu create-react-appprojeto, você agora deve executar:

# 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"

Estaremos armazenando nossos certificados gerados no .certdiretório. Eles não devem estar comprometidos com o controle de versão, então você deve atualizar seu .gitignorepara incluir o .certdiretório.

Em seguida, precisamos atualizar o startscript novamente para incluir nosso certificado recém-criado:

 "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" },

Ao executar yarn startnovamente, você verá que sua conexão está segura.

Não seja um estranho! Sinta-se à vontade para escrever se tiver alguma dúvida - conecte-se comigo no Linkedin ou siga-me no Twitter.