프론트엔드 로컬에서 HTTPS 웹서버 띄우기

실무에서 QR 코드를 이용한 기능을 개발하게 되었습니다. 해당 기능을 구현하기 위해 vue-qrcode-reader 라는 라이브러리를 사용하고 있었는데, 해당 라이브러리는 localhost와 HTTPS 프로토콜에서만 작동을 하는 라이브러리였습니다. 따라서 모바일에서 해당 기능이 제대로 구현됬는지 확인 하기 위해서는 HTTPS 서버가 필요했습니다. 먼저 로컬 개발 환경에서 테스트 하기 위해 백엔드 도움 없이 HTTPS로 서버를 띄워 봤습니다.

1. Vite의 자체 서버 옵션 사용하기

다행히 Vite에서 자체적으로 https를 지원했기 때문에 간단하게 띄워볼 수 있었습니다. vite.config.ts 파일에서 server 옵션에 https: true 로 적어주면 됩니다.

import { defineConfig } from 'vite'

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    https: true,
  },
})

다만, 유효한 인증서가 필요하기 때문에 공식문서에 적힌대로 @vitejs/plugin-basic-ssl 플러그인을 설치하고 plugin 옵션에 추가합니다.

import { defineConfig } from 'vite'
import basicSsl from '@vitejs/plugin-basic-ssl'

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    https: true,
  },
	plugins: {
		basicSsl(),
	}
})

2. mkcert 사용하기

공식문서의 내용에 따라 진행을 했지만, 인증서가 올바르지 않다며 제대로 https 연결이 되지 않았습니다. 따라서 유효한 인증서를 사용하기 위해 mkcert를 사용하기로 합니다.

먼저 mkcert를 homebrew를 통해 다운 받습니다.

brew install mkcert

mkcert가 설치 되었다면 루트 인증서를 생성합니다. 그리고 인증서를 사용할 프로젝트의 디렉토리로 이동 후, 도메인 이름을 넣어 인증서를 실행합니다. 해당 디렉토리로 .pem, -key.pem 파일이 생성되는 것을 확인 할 수 있습니다.

mkcert -install
cd ${project}
mkcert localhost

이제 프로젝트에서 해당 인증서를 적용하기 위해 vite-plugin-mkcert 플러그인을 설치해줍니다. 그리고 기존에 작성했던 vite.config.ts 파일을 수정합니다.

import mkcert from 'vite-plugin-mkcert';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    mkcert({ certFileName: './localhost.pem', keyFileName: './localhost-key.pem' 
  ],
  server: {
    https: true,
  },
})

이후 서버를 실행하면 성공적으로 https로 로컬 서버를 띄울 수 있습니다. 해당 방법으로 기능 구현이 제대로 되었는지 확인 할 수 있었습니다.

---

ps. 혹시나 최신 버전의 vite v5를 사용하고 있다면, v4로부터 마이그레이션을 하며 https: true 옵션을 제거해도 된다고 합니다. 해당 내용은 여기서 확인해주세요.

[참고]
https://web.dev/articles/how-to-use-local-https?hl=ko