webpack 프로젝트에 msw(mock service worker)를 적용

msw(mock service worker)

msw란? api 응답을 모킹하는 서비스 워커.

적용 상의 문제점

• msw의 제약 사항
  • msw의 mockServiceWorker는 https 환경에서만 정상 실행된다.(다시 확인해보니 http에서도 실행 되더라…)
• 프로젝트의 제약 사항
  • 타 시스템과의 연계(인증 서버)를 하려면 로컬 개발 환경에서의 url은 *.우리회사url.co.kr 로 설정되어야 한다.
• webpack-dev-server의 제약 사항
  • webpack-dev-server의 ssl 인증서는 ‘localhost’를 host로 한다.
  • (react를 사용하는 프로젝트다보니) create-react-app의 webpack-dev-server는 ‘localhost’를 host로 하여 실행된다(기본 설정).

조치

1. TLS 인증서
   1. *.우리회사url.co.kr 도메인을 위한 TLS 인증서를 만든다.
   2. 프로젝트의 루트 경로 아래에 /scripts 디렉토리를 만든다.
   3. 위 디렉토리 아래에 이런 내용으로 해서 make_cert.sh 파일을 만든다.
   4. 아래 sh 파일을 실행한다.

## make_cert.sh

CONFIGDIR="ssl/"
# set /etc/hosts
# 호스트 설정이 완료되었다는 가정 하에 진행한다.
# install mkcert
brew install mkcert
# create local CA & system trust store
mkcert -install
# create certificate
mkdir -p $CONFIGDIR
cd $CONFIGDIR
mkcert live11-local.우리회사url.co.kr

1. webpack-dev-server
   1. webpack-dev-server의 host를 *.우리회사url.co.kr 로 바꾼다.
      1. env 파일에 하기 설정을 추가

# .env 파일
HOST=live11-local.우리회사url.co.kr

1. webpack-dev-server를 HTTPS로 실행하도록 설정한다.
   1. env 파일에 하기 설정을 추가

      # .env 파일
      HTTPS=true
      

2. webpack-dev-server의 TLS 인증서를 위에서 만든 인증서로 교체한다.
   1. package.json에 하기 스크립트를 등록한다
   2. 하기 스크립트는 start 명령을 하기 전에 항상 실행된다.

      "prestart": "rm ./node_modules/webpack-dev-server/ssl/server.pem && cp -f ./ssl/server.pem ./node_modules/webpack-dev-server/ssl"
      

이제 yarn start 혹은 npm start를 하면 msw가 잘 실행될 것이다. 끝.

20220119