react 와 spring boot 간의 https로 테스트하기

windows 환경에서 React 와 Spring boot 간의 Https 로 테스트를 할 일이 생겼다.

yaytomato님의 블로그 글을 참고하여 구성한 내용을 정리해본다.

환경

• OS : Windows 10 Enterprise
• frontend : CRA + typescript
  - react version : 18.0.0
  - typescript version : 4.6.3
  - IDE : VSCode 1.66.2
• backend : Spring boot
  - spring boot version : 2.5.2
  - IDE : Intellij 2021.2.3 Community Edition

로컬 인증서 발급

1. mkcert 설치

• 윈도우 환경에서는 "Chocolatey"를 이용하여 mkcert를 설치 할 수 있다.
• cmd로 chocolatey 설치

  @"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command " [System.Net.ServicePointManager]::SecurityProtocol = 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

• chocolatey로 mkcert 설치

  choco install mkcert

2. mkcert 를 이용하여 인증서 발급

mkcert -install
mkcert "{domain}" 127.0.0.1 ::1

예) mkcert "*.example.com" 127.0.0.1 ::1

pem과 key 파일이 생성된다.

• _wildcard.example.com+2.pem
• _wildcard.example.com+2-key.pem

3. crt 인증서 생성 및 등록
윈도우에서 인증서를 등록하기 위해 openssl을 이용하여 crt 인증서를 생성

openssl rsa –in _wildcard.example.com+2-key.pem –text > _wildcard.example.com.key
openssl x509 –inform PEM –in _wildcard.example.com+2.pem –out _wildcard.herace.com.crt

crt 파일을 더블클릭하여 신뢰할 수 있는 루트 인증 기관 저장소에 인증서 저장

Host 파일 수정

hosts에 아래 내용 추가

127.0.0.1 web.examplecom
127.0.0.1 api.example.com

HTTPS로 Frontend 실행

1. 인증서 파일 프로젝트 root 에 위치
2. .env 파일 생성

#.env

HTTPS=true
SSL_CRT_FILE=_wildcard.example.com.crt
SSL_KEY_FILE=_wildcard.example.com.key

3. 실행

$ yarn start

4. https://web.example.com:{port} 에서 https 접속 확인

HTTPS로 Backend 실행

1. spring boot에 사용하기 위해 openssl 을 이용하여 p12 인증서 생성

openssl pkcs12 -export -inkey _wildcard.example.com+2-key.pem -in _wildcard.example.com+2.pem -out _wildcard.example.com.p12

2. 인증서 파일 프로젝트에 위치

3. application.properties 에 추가

server.ssl.key-store=_wildcard.example.com.p12
server.ssl.key-store-type=PKCS12
server.ssl.key-store-password={password}

4. https로 실행되는지 확인

---

참고자료

yaytomato 블로그 글 "https로 React 로컬 테스팅하기"