localhost https 설정(mkcert)

mkcert를 적용해 localhost에서 https 프로토콜 사용하는 방법

1. mkcert install

// window
choco install mkcert -g

// mac
brew install mkcert -g

2. mkcert를 적용할 프로젝트 폴더로 이동후 명령어 입력하면 localhost-key.pem 파일과 localhost.pem파일이 생성됨

mkcert -key-file localhost-key.pem -cert-file localhost.pem localhost 127.0.0.1 ::1

---

vite 프로젝트에서 mkcert 적용

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import mkcert from "vite-plugin-mkcert";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    mkcert({
      // SSL 키 등록
      keyFile: "/localhost-key.pem",
      certFile: "/localhost.pem",
    }),
  ],
});