VSCode의 Live Server확장 프로그램 https로 실행하기

Visual Studio Code의 Live Server는 기본적으로 HTTP 프로토콜을 사용합니다. 그러나 HTTPS를 사용하려면 다음과 같이 설정할 수 있습니다.

 

1. OpenSSL 설치: 먼저 OpenSSL을 설치해야 합니다. Windows에서는 OpenSSL을 설치하는 것이 상대적으로 간단합니다. OpenSSL을 설치하려면 OpenSSL 다운로드 페이지(https://slproweb.com/products/Win32OpenSSL.html)에서 Windows용 바이너리 파일을 다운로드하고 설치합니다.

 

 

2. 인증서 생성: 다음으로, 터미널에서 명령을 실행하여 인증서를 생성합니다.

openssl req -newkey rsa:2048 -x509 -nodes -keyout key.pem -new -out cert.pem -subj /CN=localhost -reqexts SAN -config <(cat /etc/ssl/openssl.cnf <(printf "[SAN]\nsubjectAltName=DNS:localhost")) -sha256 -days 3650

이 명령은 10년 유효 기간을 가진 self-signed 인증서를 생성하며, "localhost" 도메인을 사용합니다.

 

 

3. 설정 변경: 이제 VS Code의 설정을 변경하여 HTTPS를 사용하도록 설정합니다.

• VS Code를 열고, 'settings.json' 파일을 연다. (File > Preferences > Settings)
• 다음 라인을 추가해 'liveServer.settings.https' 를 설정한다.

"liveServer.settings.https": {
     "enable": true,
     "cert": "C:\\Users\\[username]\\[path]\\cert.pem",
     "key": "C:\\Users\\[username]\\[path]\\key.pem"
 }

경로는 생성된 인증서 파일의 경로로 바꿔야합니다.

 

 

4. HTTPS로 실행: 이제 Live Server를 HTTPS로 실행할 수 있습니다. 터미널에서 프로젝트 디렉토리로 이동하고, 다음 명령을 실행합니다.

live-server --https=[keyfile=PATH_TO_KEYFILE, certfile=PATH_TO_CERTFILE, port=PORT_NUMBER]

이 명령어는 'keyfile'과 'certfile'을 인자로 받는데, 위에서 설정한 경로로 넣어주면 됩니다. 또한, 'port'도 지정할 수 있습니다.

예를 들어, 'keyfile'과 'certfile'이 'C:\Users\username\my_project\key.pem'와 'C:\Users\username\my_project\cert.pem'일 경우, 'live-server'를 다음과 같이 실행할 수 있습니다.

live-server --https=keyfile=C:\\Users\\username\\my_project\\key.pem,certfile=C:\\Users\\username\\my_project\\cert.pem

 

이제 브라우저에서 'https://localhost:[PORT_NUMBER]'로 접속하여 HTTPS로 실행되는 것을 확인할 수 있습니다.