[Typescript] 1분만에 세팅하는 로컬 HTTPS - local-ssl-proxy

[DevOps] 1분만에 세팅하는 로컬 HTTPS - local-ssl-proxy

1. 서론

로컬에서 웹 작업을 하다보면, 외부 HTTPS 리소스를 연동해야하는 상황들이 발생한다. 이때 일반적으로 로컬 개발 서버는 HTTP로 동작하기 때문에 작업이 애로사항이 발생하는데, 이번 포스팅에선 이를 간단하게 해결해주는 "local-ssl-proxy" npm 패키지를 소개해볼까 한다. local-ssl-proxy는 HTTP 포트를 HTTPS 포트로 프록싱해주는 패키지이며, 이를 사용하면 빠르게 로컬 HTTPS 개발 환경을 구축할 수 있다.

2. local-ssl-proxy 설치 및 세팅

2-1. mkcert 설치 및 인증서 생성

local-ssl-proxy를 사용하기 위해서 mkcert 명령어를 통해 인증서 생성이 필요하다. mkcert 명령어는 자신에 OS에 따라 아래 명령어를 실행하여 설치하면 된다.
Windows의 경우, choco 패키지 매니저가 설치되어있어야 한다. 만약 아직 설치되어있지 않았을 경우, 아래 블로그 글을 참고하여 설치하기 바란다.

Windows용 패키지 매니저 chocolatey 설치 하기

준비가 되었다면 아래 명령어를 통해 "mkcert" 명령어를 설치하자:

# MacOS
$ brew install mkcert

# Windows
$ choco install mkcert

이제 아래 명령어를 실행하면 local-ssl-proxy를 사용하기 위한 인증서가 생성된다.
이 명령어는 local-ssl-proxy를 실행시킬 폴더 위치에서 실행시키니, 필요에 따라 적절히 폴더 위치를 변경하여 사용하면 된다. 일반적으로는 프로젝트 루트 경로에 생성한다.

만약 모노레포를 사용중이라면, 모노레포 프로젝트 루트 경로에 인증서를 생성하는걸 추천한다(이후 설명할 local-ssl-proxy config 파일을 통해 한번에 여러 포트의 HTTPS 프록시를 만들 수 있기 때문이다.)

$ cd {프로젝트_루트_경로}
$ mkcert localhost

2-2. local-ssl-proxy 설치 및 프록시 실행

인증서를 생성했다면 아래 명령어를 통해 HTTPS 프록시를 생성할 수 있다. 필요한 스타일에 따라 아래 방법들 중 하나를 택하여 실행하면 된다.
필자의 경우 전역 패키지를 극히 최소화하는 것을 선호하기 때문에(패키지 버전 충돌을 방지하기 위함), 일반적으로 3번의 방법을 많이 사용한다.

target이 원본 HTTP 포트 번호이고, source가 HTTPS 프록시를 실행시킬 포트 번호이다. 

# 1. 전역 설치 후 실행

$ npm install -g local-ssl-proxy@1.3.0
$ local-ssl-proxy --key localhost-key.pem --cert localhost.pem --source 9001 --target 9000

# 2. 설치 없이 즉시실행

$ npx local-ssl-proxy@1.3.0 --key localhost-key.pem --cert localhost.pem --source 9001 --target 9000

# 3. 프로젝트 내 설치 후 package.json 명령어로 설정

$ npm install -D local-ssl-proxy@1.3.0
# package.json 수정: "scripts"에 새 명령어(ex: "ssl:proxy")로 "local-ssl-proxy --key localhost-key.pem --cert localhost.pem --source 9001 --target 9000" 추가
$ npm run ssl:proxy

만약 모노레포와 같이 여러 로컬 HTTP 개발 서버의 HTTPS 프록시 생성이 필요할 경우, config 파일을 생성하여 실행시킬 수 있다.
프로젝트 루트 경로에 임의의 json 파일을 만들고 내용을 아래와 같이 채운다(필자의 경우 ssl-proxy.config.json 이라고 명명했다):

{
  "proxy1": {
    "source": 3001,
    "target": 3000
  },
  "proxy2": {
    "source": 9999,
    "target": 9000
  }
}

위와 같이 파일 내용을 채우고, local-ssl-proxy를 실행할때 아래와 같이 옵션을 사용하면 된다:

$ local-ssl-proxy --key localhost-key.pem --cert localhost.pem --config ssl-proxy.config.json

이제 config 파일로 인해, 3000->3001과 9000->9999 프록시가 동시에 생성된다.

2-3. "크롬 연결이 비공개로 설정되어 있지 않습니다" 해결 방법

local-ssl-proxy로 띄운 프록시를 크롬으로 접근하면 위와 같은 화면이 나타날 수 있다. 이 경우, 키보드로 "thisisunsafe"라고 입력해주면 경고가 무시된 채로 접속할 수 있다(약간 코나미 커멘드 같은거다.)