vue에서 https로 테스트 하기

테스트를 하다가 cors에러 해결을 위해 https로 테스트 할 일이 생겼다.
안그래도 계속 cors 골칫덩어리를 해결하기 위해 무언가 작업해야지 해야지 하다가 이번 기회에 적용해보기로 함

windows 기반으로 작성함

mkcert

mkcert는 로컬에서 신뢰할 수 있는 인증서를 만드는 도구이다. localhost에서도 https로 개발할 수 있도록 도와준다고 한다. 딱 내가 찾던거다

1. PowerChell을 관리자 권한으로 실행

mkcert는 chocolatey가 필요함 이를 설치하기 위해선 PowerShell을 꼭 관리자 권한으로 실행해야 함

2. chocolatey 설치

chocolatey란? 쉽게 말해 윈도우용 패키지 매니저이다. 리눅스 에서 터미널을 통해 프로그램 설치하는 것처럼 윈도우에서도 ui로 next,next를 누르는걸 명령어 기반으로 쉽게 설치가 가능하다.

# Get-ExecutionPolicy 실행
$ Get-ExecutionPolicy

# Restricted라면 AllSigned나 Bypass로 설정
# ExcutionPolicy를 AllSigned로 설정
$ Set-ExecutionPolicy AllSigned

# ExcutionPolicy를 Bypass로 설정
$ Set-ExecutionPolicy Bypass -Scope Process

# 설치!
$ Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

# 확인
$ choco

3.mkcert설치

choco 설치 후에는 mkcert를 설치한다.

choco install mkcert

4.설치 후에 프로젝트 상위 디렉토리에서 mkcert install을 실행

mkcert -install

5.mkcert localhost 실행

mkcert localhost

디렉토리에 -key.pem과 .pem 파일이 생성된다.

후에 vue에서는 config파일에 아래와 같이 생성된 2개의 인증서들을 특정 폴더에 넣어두고 httpsOption으로 지정해둔다.

const fs = require("fs");
const path = require("path");

const httpsOptions = {
  key: fs.readFileSync(
    path.resolve(__dirname + "\\.cert", "localhost-key.pem")
  ),
  cert: fs.readFileSync(path.resolve(__dirname + "\\.cert", "localhost.pem")),
};

 devServer: {
    https: httpsOptions,
    host: "localhost",
    port: 8082,
 }

위와 같이 설정 후에 실행시키면 끝.
다만, 해당 내용은 서버에 https://localhost:port 를 등록이 가능할 때만 사용가능한 점 유의 해야한다.