[vscode] Live Server Extension https 연결하기 w/openssl

시작하며

PWA 연습을 위해서 간단한 프로젝트를 구성했다.

 

192, 512px 사이즈의 두 로고와 src 폴더에는 index.html, index.js, master.css, manifest.json 이렇게 파일을 두고 있다. lighthouse를 통해 pwa 리포트를 출력하는데 https 부분을 해결해야 할 것 같아서, Live Server 설정을 손보기로 했다. 

문제 상황

Live Server extension에 들어가 설명을 보니 다행히 https를 지원한다.

공용 사이트가 아닌 테스트를 위함이니 자체 서명을 통해서 간단하게 Open SSL을 이용하기로 했다. Open SSL은 네트워크를 통한 데이터 통신에 쓰이는 두 프로토콜 TLS, SSL의 오픈 소스 버전이며, 이 링크에서 다운로드 받을 수 있었다.

OpenSSL 다운로드

다운 받기 전 openssl이 있는지 확인하고 싶다면 cmd 창에서 위처럼 뜬다면 별도의 다운로드 절차를 거치지 않아도 된다. 다운이 완료됐다면 위 명령어로 제대로 다운 되었는지 여부를 확인해본다. 

OpenSSL 환경변수 설정

OpenSSL 파일 구성

압축 해제 후 이런 파일들을 가지고 있는데, 환경 변수 지정을 통해 좀 더 편하게 사용해보자. 내 PC -> 속성 -> 고급 시스템 설정 보기 -> 고급 탭 클릭 -> 환경 변수 클릭

시스템 변수 -> Path 클릭 -> 새로 만들기 클릭 후 OpenSSL 압축 해제한 폴더의 bin 파일 경로를 넣어준다.

이번에는 시스템 변수 -> 새로만들기를 클릭해 bin 폴더 내 openssl.cnf 파일의 경로를 찾아서 입력해준다. 여기까지 환경 변수 설정이 완료되었다면 키 발급을 위해 다시 CMD 창으로 이동한다.

인증키 발급

CMD 창에서 아래 명령어를 입력한다.

openssl genrsa -aes256 -out localhost.key 2048

generating RSA의 줄임말인 명령어 genrsa를 통해 양방향 알고리즘인 (그래서 SSL 인증 등에 사용되는 방식인) AES-256 방식의 암호를 생성한다는 명령어이고, 해당 output을 localhost.key라는 이름의 파일에 저장한다는 의미이다. 2048은 사이즈를 의미하며, localhost.key는 다른 이름의 파일로 변경해도 무방하다.

이때 암호를 묻고 확인하는 작업을 거친다.

아직 localhost.pem 파일은 생성하지 않았으므로 localhost.key만 존재할 것이다. 

키 파일이 잘 생성되었다면, 다음은 pem 파일을 생성한다. PEM 파일은 보안 웹 사이트를 인증하는데 사용되는 인증서를 Base64 방식으로 인코딩된 파일이다.

openssl req -days 3650 -new -newkey rsa:2048 -key localhost.key -x509 -out localhost.pem

# 이후 질문 몇 가지가 나온는데, 굳이 적지 않아도 되는 부분은 공백으로 남기고 Enter 키로 넘어가도 된다. 

Enter pass phrase for [아까 입력한 localhost.key 또는 사용자가 지정한 파일 이름]:
You are about to be asked to enter information that will be incorporated
into your certificate request.
What you are about to enter is what is called a Distinguished Name or a DN.
There are quite a few fields but you can leave some blank
For some fields there will be a default value,
If you enter '.', the field will be left blank.
-----
Country Name (2 letter code) [AU]:KR
State or Province Name (full name) [Some-State]:
Locality Name (eg, city) []:Seoul
Organization Name (eg, company) [Internet Widgits Pty Ltd]:
Organizational Unit Name (eg, section) []:
Common Name (e.g. server FQDN or YOUR name) []:localhost
Email Address []: 

이제 해당 경로를 참고해서 vscode 설정 파일을 추가한다.

vscode

.vscode/settings.json

{
    "liveServer.settings.port" : 5501,
    "liveServer.settings.root": "/",
    "liveServer.settings.CustomBrowser": "chrome",
    "liveServer.settings.https": {
        "enable": true,
        "cert": "C:\\Users\\fnsk9\\https\\localhost.pem",
        "key": "C:\\Users\\fnsk9\\https\\localhost.key",
        "passphrase": "[아까 입력한 비밀번호]"
    }
}

 

Tips : 사용 가능한 브라우저 옵션은 아래와 같다. 

• Chrome
• chrome:PrivateMode
• firefox
• firefox:PrivateMode
• microsoft-edge
• blisk

여기까지 마치고 서버를 다시 실행시키면, 

 

프로토콜이 https로 바꿔 실행되고 있다. 

 

참고

www.youtube.com/watch?v=v4jgr0ppw8Q

oops.org/?t=lecture&sb=sslwrap&n=2

blog.naver.com/PostView.nhn?blogId=baekmg1988&logNo=221454486746