mac에서 https로 localhost 테스트하기

mkcert 를 우선 설치합니다. 

$ brew install mkcert # windows에서는 choco 사용
$ mkcert -install

# ssl을 사용할 폴더로 가서...
$ mkdir .cert  # pem파일을 넣을 폴더를 만들어 두세요.
$ mkcert -key-file ./.cert/key.pem -cert-file ./.cert/cert.pem "localhost"

 

vite에서 적용할 때는 https://www.npmjs.com/package/vite-plugin-mkcert 참고하여 설정. 단, 버그인지 설치 시 "npm i vite-plugin-mkcert@1.10.1 -D" 로 설치해야 react와 같이 사용할 경우 에러가 발생하지 않음.

import { defineConfig } from 'vite'
import mkcert from'vite-plugin-mkcert'
import react from '@vitejs/plugin-react'

export default defineConfig({
  base: "/",
  server: {
    historyApiFallback: true,
    https: true,
  },
  plugins: [react(), mkcert()],
});

 

npm에 적용하려면 package.json 의 scripts세션의 start에 아래와 같이 설정

.
"start":"HTTPS=true SSL_CRT_FILE=./.cert/cert.pem SSL_KEY_FILE=./.cert/key.pem react-scripts start"
.
.

 

만약 fastapi에 사용하려면 아래와 같이 설정

    uvicorn.run(app, host="localhost", port=8080,
        ssl_keyfile="./.cert/key.pem", 
        ssl_certfile="./.cert/cert.pem"
    )

끝!!