로컬 환경에서 Https 붙이기 (Window)

WebRTC로 서로 테스트를 하고 싶은데 http 연결에는 카메라와 클립보드 복사가 안되는 등 제약사항이 너무 많아서 빠른 테스트를 위해 로컬에 https를 붙이는 법을 연구중이다

1. SSL 인증서 생성

자체 서명된 SSL 인증서를 생성해야 한다

# mkcert 설치 (Windows의 경우)
choco install mkcert

# 로컬 CA 생성
mkcert -install

# IP 주소용 인증서 생성 (여기서 본인의 IP 주소를 넣으세요)
mkcert 192.168.1.x localhost 127.0.0.1

 

이 명령은 192.168.1.x-key.pem과 192.168.1.x.pem 파일을 생성한다

2. Vue-Cli 사용시

vue.config.js 파일을 아래와 같이 수정해준다

const fs = require('fs')
const path = require('path')

module.exports = {
  devServer: {
    host: '0.0.0.0', // 모든 네트워크 인터페이스에서 접근 허용
    https: {
      key: fs.readFileSync(path.resolve(__dirname, './192.168.1.x-key.pem')),
      cert: fs.readFileSync(path.resolve(__dirname, './192.168.1.x.pem')),
    },
    port: 8080 // 포트 설정
  }
}