VSCode 개발 모드를 https로 실행하기

 

Next.js 프로젝트 내에서 SNS 자동 로그인 기능을 구현하는데 https 설정이 필요했다. 그래서 VSCode를 통해 프로젝트를 개발자 모드로 실행할 때, https로 실행되도록 관련 프로그램을 설치하고 설정 해본다.

기존에 openssl을 통해서 인증서를 만들고, server.mjs를 통해서 커스텀 서버를 돌리면 브라우저에서 URI는 https로 시작하지만, 보안 경고가 생겨서 의미가 없어 보여서 이 방법을 사용한다.

1. PowerShell로 chocolately (choco) 설치

https를 적용하기 위해서는 TTL/SSL 인증서가 필요하다. mkcert는 자체 서명된 인증서를 만들어주고, 이를 신뢰할 수 있도록 로컬 CA(인증 관린)를 설치하고 관리한다. 따라서 개발 중 보안 경고 없이 https를 사용할 수 있도록 한다.

# 1. PowerShell Execution Policy 설정
Set-ExecutionPolicy Bypass -Scope Process -Force
# 2. Powershell Chocolatey 설치 스크립트 실행
iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))
# 3. chco 명령어 입력하여 설치 확인
choco --version

2. mkcert 설치

mkcert를 프로젝트 폴더에 설치하면 .gitignore 에 확장자 pem이 자동으로 등록되어 편리하다.

# 1. (PowerShell) 윈도우 설치
choco install mkcert
# 2. (PowerShell) 로컬 CA를 생성. 프로젝트 루트 디렉토리에서 실행하도록 한다.
mkcert -install
# 3. (PowerShell) 로컬 CA 인증서를 생성 (localhost.pem과 localhost-key.pem 생성)
mkcert locallhost or 도메인

3. 프로젝트 설정

mkcert가 설치되고, mkcert-install로 로컬 인증 기관을 설치한 상태라면 간단하게 package.json 파일에 스크립트를 추가해 실행할 수 있는 것이다. 이렇게 추가한 스크립트(npm run https)로 실행하면, 자동으로 필요한 인증서 (pem 확장자)를 생성하고 https 로컬 환경을 실행시켜 준다.

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint",
  "https": "next dev -H localhost -p 3000 --experimental-https"
},

4. Reference

참고 1. [Next.js, React(vite.js)] 로컬 개발 환경 https 적용하기