localhost에 https 인증서 설치하기 - 리액트 mkcert chocolatey 설치

리액트 PWA를 실행하려면  mkcert 를 설치하라고 하는데.. mkcer를 설치하려면 그전에 먼저 chocolatey 를 설치하라고 한다..

 

 

1. Window Powershell 을 관리자 권한으로 실행한다.

2. 아래를 입력한다.

$ Get-ExecutionPolicy

 

결과 화면이  Restricted가 아닐 경우 Set-ExecutionPolicy AllSigned 실행 후 Y 입력

 

3. 다음 코드를 입력한다.

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'))

 

4. 

choco

를 입력해 버전이 나오는지 확인한다. 

 

 

5.

choco install mkcert

 

6. 윈도우 파워셀에서 인증서를 적용하려는 폴더로 이동한다 (cd /경로) 입력. 

mkcert -install

 

보안경고가 나오면 예 클릭

mkcert -key-file key.pem -cert-file cert.pem localhost 127.0.0.1 ::1

 

그러면 리액트 폴더 루트 경로에 아래같이 파일이 만들어진다. 

 

 

package.json에서 start명령어를 수정해준다.

 

"scripts": {
    "start": "cross-env HTTPS=true SSL_CRT_FILE=./localhost.pem SSL_KEY_FILE=./localhost-key.pem react-scripts start",
  }

 

 

그리고

npm start

 

npm start를 했는데, 만약 터미널에서 

 

> HTTPS=true SSL_CRT_FILE=localhost.pem SSL_KEY_FILE=localhost-key.pem start:react

혹은

> HTTPS=true SSL_CRT_FILE=./localhost.pem SSL_KEY_FILE=./localhost-key.pem start:react

 

 

'HTTPS'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 에러가 났을 때는,

 

이 Windows 환경에서는 HTTPS=true와 같은 방식으로 환경 변수를 설정할 수 없기 때문에 발생하는 것이다.

대신에 다음과 같이 cross-env 패키지를 사용하여 HTTPS 환경 변수를 설정할 수 있다.

 

npm install --save-dev cross-env

 

package.json 파일에서 start 스크립트를 다음과 같이 수정한다.

 

"scripts": {
  "start": "cross-env HTTPS=true SSL_CRT_FILE=./localhost.pem SSL_KEY_FILE=./localhost-key.pem react-scripts start"
}

 

 

 

인증서가 잘 적용됨을 확인 가능하다.