Como configurar o HTTPS localmente com create-react-app

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

Corrida yarn start após esta etapa, você verá esta tela no seu navegador:

Nesta fase, você já está pronto para ir com https. Mas como você não possui um certificado válido, sua conexão é considerada insegura.

Criando 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 um autoridade de certificação na sua máquina, o que permite gerar certificados para todos os seus projetos futuros.

Da raiz do seu create-react-app Agora, você 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"

Armazenaremos nossos certificados gerados no diretório .cert diretório. Eles não devem estar comprometidos com o controle de versão; portanto, você deve atualizar seu .gitignore para incluir o .cert diretório.

Em seguida, precisamos atualizar o start script 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"
  },

Quando você corre yarn start novamente, agora você deve 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.