리액트 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"
}
인증서가 잘 적용됨을 확인 가능하다.
