[TIL] vscode LiveServer http 에서 https 로 변환하는 방법(feat. cors 에러 핸들링)

Why?

회사 프로젝트를 정적 페이지에서 테스트하기 위해, LiveServer 를 활용하여 테스트 진행하였다.
그러나 LiveServer는 http가 default 이기 때문에, https로 구축된 프로젝트와 cors에러가 발생하였다.
LiveServer를 Https로 바꾸면 테스트가 가능할 것이라 판단되어 변환하는 방법을 시도하게 되었다.

How?

1. LiveServer를 킬 프로젝트 최상단 터미널에서 private key를 생성한다.

openssl genrsa -aes256 -out localhost.key 2048

• 여기서 비밀번호를 입력하라고 하는데, 마지막 단계에서 기입할 비밀번호이기 때문에 기억해야한다!
• 아니면, 다시 1번째 단계부터 시작해야한다.

2. 동일하게 certificate를 생성한다.

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

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) []:KR
State or Province Name (full name) []:Seoul
Locality Name (eg, city) []:Seoul
Organization Name (eg, company) []:Sohui
Organizational Unit Name (eg, section) []:Dev
Common Name (eg, fully qualified host name) []:localhost
Email Address []:sohui.choi@example.com

• 위에서 입력한 비밀번호를 입력 후, 관련 내용들을 쓰면 된다.
• 여기서 지금 상황의 경우, hostname을 localhost로 하였다.

3. .vscode 폴더를 프로젝트 루트 경로에 생성한다.

• .vscode 폴더 안에 settings.json을 만들고 아래의 내용을 넣는다.
• 여기서 cert, key의 경로는 파일 경로를 복사해서 수정하면 된다.

{
  "liveServer.settings.port": 5501,
  "liveServer.settings.root": "/",
  "liveServer.settings.CustomBrowser": "chrome",
  "liveServer.settings.https": {
    "enable": true,
    "cert": "/Users/sohui.choi/Desktop/https/localhost.pem",
    "key": "/Users/sohui.choi/Desktop/https/localhost.key",
    "passphrase": "키 생성시, 입력한 비밀번호"
  }
}

결과

이제 LiveServer 페이지를 다시 켜보면 http://127.0.0.1:5500/index.html http -> https 변경이 완료됐다!

• 만약 http로 열고 싶으면, enable 값을 false로 바꾸면 된다.