회사 프로젝트를 정적 페이지에서 테스트하기 위해, LiveServer 를 활용하여 테스트 진행하였다.
그러나 LiveServer는 http가 default 이기 때문에, https로 구축된 프로젝트와 cors에러가 발생하였다.
LiveServer를 Https로 바꾸면 테스트가 가능할 것이라 판단되어 변환하는 방법을 시도하게 되었다.
openssl genrsa -aes256 -out localhost.key 2048
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
.vscode
폴더 안에 settings.json
을 만들고 아래의 내용을 넣는다.{
"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 변경이 완료됐다!
와 간단히 테스트 할 때 필요했는데 덕분에 쉽게 적용했습니다. 감사합니다!