[HTTPS] Vite HTTPS 개발 환경용 OpenSSL 인증서 발급 가이드

개요

API 서버 프로토콜 변경과 Cookie 보안을 위해 Secure 속성이 추가됨에 따라
웹 서버도 HTTP 프로토콜에서 HTTPS 프로토콜로 변경해야 한다.

 

이 가이드는 OpenSSL만 사용하여 CSR 파일 없이(.csr 생략)
자체 서명(Self-Signed) SSL 인증서를 발급하고, macOS 및 Windows 환경에서 Vite 개발 서버에 적용하는 방법을 설명한다.

 

생성할 파일은 다음 두 개다.

localhost-key.pem   → 개인 키 (private key)
localhost-cert.pem  → 자체 서명 인증서 (self-signed certificate)

 

이 파일들은 Vite 설정에서 다음과 같이 사용된다.

https: {
  key: fs.readFileSync(path.resolve(process.env.HOME, '.cert/localhost-key.pem')),
  cert: fs.readFileSync(path.resolve(process.env.HOME, '.cert/localhost-cert.pem')),
}

 

CSR 파일(.csr)은 공인 인증기관(CA)에 제출하기 위한 요청서이므로
로컬 개발용 HTTPS 환경에서는 필요하지 않는다.

---

내용

#1. macOS 환경

[ 1. OpenSSL 설치 확인 ]

macOS에는 기본적으로 OpenSSL이 포함되어 있다.
다음 명령어로 설치 여부를 확인한다.

openssl version

 

버전이 출력되면 바로 사용할 수 있다.

 

[ 2. 인증서 생성 명령어 ]

mkdir -p ~/.cert
cd ~/.cert

openssl req -x509 -newkey rsa:2048 -nodes   -keyout localhost-key.pem   -out localhost-cert.pem   -days 365   -subj "/C=KR/ST=Seoul/L=Seoul/O=MyCompany/OU=Dev/CN=localhost"

 

아래는 옵션 설명이다.

옵션	설명
-x509	자체 서명(Self-Signed) 인증서 생성
-newkey rsa:2048	새 개인키(2048bit RSA) 생성
-nodes	개인키 암호 미설정 (비밀번호 입력 생략)
-keyout	개인키 파일명 지정
-out	인증서 파일명 지정
-days 365	유효기간 365일
-subj	비대화형으로 인증서 정보 입력

 

[ 3. 결과 확인 ]

~/.cert/
├── localhost-key.pem
└── localhost-cert.pem

 

이 두 파일이 생성되면 준비가 완료된다.

 

[ 4. Vite HTTPS 서버 실행 ]

npm run start

 

접속 주소:

https://localhost:5173

 

브라우저에서 보안 경고가 표시될 수 있다.
“고급 → 계속 진행”을 선택하면 정상적으로 HTTPS로 접속됩니다.

---

#2. Windows 환경

[ 1. OpenSSL 설치 ]

Windows에는 OpenSSL이 기본 포함되어 있지 않다.
다음 중 하나의 방법으로 설치할 수 있다.

• Git Bash 설치
  → C:\Program Files\Git\usr\bin\openssl.exe 포함
• Win64 OpenSSL 다운로드
  https://slproweb.com/products/Win32OpenSSL.html

설치 후 아래 명령어로 버전을 확인한다.

openssl version

 

 

[ 2. 인증서 생성 명령어 ]

mkdir %USERPROFILE%\.cert
cd %USERPROFILE%\.cert

openssl req -x509 -newkey rsa:2048 -nodes ^
  -keyout localhost-key.pem ^
  -out localhost-cert.pem ^
  -days 365 ^
  -subj "/C=KR/ST=Seoul/L=Seoul/O=MyCompany/OU=Dev/CN=localhost"

 

PowerShell에서는 ^ 대신 \를 사용할 수 있다.

 

[ 3. 결과 확인 ]

C:\Users\<사용자명>\.cert\
├── localhost-key.pem
└── localhost-cert.pem

 

[ 4. Vite HTTPS 서버 실행 ]

npm run start

 

접속 주소:

https://localhost:5173

 

처음 실행 시 브라우저가 “이 사이트는 안전하지 않음” 경고를 표시할 수 있다.
“고급 → 계속 진행”을 선택하면 HTTPS가 정상적으로 동작한다.

---

#3. 인증서 폴더 구조 요약

운영체제	경로	파일
macOS	~/.cert/	localhost-key.pem, localhost-cert.pem
Windows	%USERPROFILE%\.cert\	localhost-key.pem, localhost-cert.pem

---

#4. 브라우저 경고에 대한 설명

OpenSSL로 생성한 인증서는 공인 인증기관(CA)에서 서명되지 않았기 때문에
브라우저가 신뢰할 수 없는 인증서로 인식한다.

이 경고는 개발 환경에서 정상적인 현상이며
“고급 → 계속 진행”을 클릭하면 HTTPS 통신이 가능하다.

---

마무리

구분	macOS	Windows
OpenSSL 설치	기본 포함	Git Bash 또는 Win64 OpenSSL 필요
인증서 위치	~/.cert	%USERPROFILE%\.cert
생성 명령	openssl req -x509 -newkey rsa:2048 -nodes ...	동일
생성 파일	localhost-key.pem, localhost-cert.pem	동일
Vite 환경 변수	VITE_USE_HTTPS=true	동일
접속 주소	https://localhost:5173	동일
CSR 파일	불필요	불필요