리액트 https 설정하기 (Windows)

1. Chocolatey 설치하기

1-1. 먼저 windows Powershell을 관리자 권한으로 실행

1-2. 다음을 입력하여 이 값이 Restricted인지 확인한다

$ Get-ExecutionPolicy

1-2.1 만약 Restricted라면 아래와 같이 변경하여 준다

$ Set-ExecutionPolicy AllSigned

1.3 이제 Chocolatey 설치를 진행합니다.

$ Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

1.4 Chocolatey is now ready라는 메시지가 보이면 성공적으로 설치하게 된 것입니다

 

2. mkcert 설치하기

2.1 위의 과정을 잘 이행하였거나 이미 chocolatey가 다운로드되어 있는 사람들은    choco    명령어를 입력하면 아래와 같이 버전이 나오게 됩니다

2.2 위와 같은 화면이 나온다면     choco install mkcert  를 입력하여 mkcert를 설치해 줍니다

2.3   mkcert -install    명령어를 통해 로컬을 인증된 발급기관으로 추가해 줍니다

2.4 아래와 같이 입력하면 key.pem 파일과 cert.pem 파일이 생성되게 됩니다

mkcert -key-file key.pem -cert-file cert.pem 자신이필요한주소
예시) mkcert -key-file key.pem -cert-file cert.pem localhost

 

3. 파일 리액트 프로젝트로 옮겨주기

3.1 저는 파일이 C:\Windows\System32에 저장되어 있어서 그 파일들을 

다음과 같이 옮겨 주었습니다.

 

3.2 package.json 폴더에서

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

다음과 같이 만들어줍니다.

 

 

** 만일 안되시는 분은 .env파일을 생성해서

HTTPS=true

을 입력한 후 실행해 봅니다

 

참고자료

https://www.lainyzine.com/ko/article/how-to-install-package-manager-chocolatey-on-windows-10/
chocolatey 설치 방법

https://xionwcfm.tistory.com/255 mkcert 설치 방법

https://velog.io/@horang-e/React-localhost-%ED%99%98%EA%B2%BD-HTTPS%EB%A1%9C-%EB%B0%94%EA%BE%B8%EA%B8%B0Windows 리액트에서 https 적용하는 방법