1. spring boot 톰켓용 p12 인증서를 생성합니다.

> keytool -genkey -alias tomcat -storetype PKCS12 -keyalg RSA -keysize 2048 -keystore keystore.p12 -validity 3650

Enter keystore password:   <-- 개인 암호 입력

Re-enter new password: <-- 위와 같은 암호입력

1.1 생성한 인증서를 spring boot에 추가 합니다.

application.properties 또는 application.yaml

server.ssl.key-store-type=PKCS12

#위에서 생성한 keystore.p12 파일이 위치한 폴더입니다.

server.ssl.key-store=file:/C:/Us...40/keystore.p12

#위에서 인증서 생성시 keytool실행하면 나오는 암호입력부분에 입력한 암호입니다.

server.ssl.key-store-password=123456

#위에서 인증서 생성시 작성한 alias입니다. 변경 안한경우 tomcat

server.ssl.key-alias=tomcat

2.express에서 https용 인증서 생성

openssl이 설치된곳에서 생성합니다.

>openssl genrsa -out key.pem

>openssl req -new -key key.pem -out csr.pem

>openssl x509 -req -days 9999 -in csr.pem -signkey key.pem -out cert.pem

2.1 인증서 추가하기

import https from 'https';
...
  let port = 3000;

  var app=express();

  const privateKey = fs.readFileSync('./key.pem', 'utf8');
  const certificate = fs.readFileSync('./cert.pem', 'utf8');

  const credentials = {
    key: privateKey,
    cert: certificate 
  };

  const server = https.createServer(credentials, app); 

  server.listen(port, () => {
    console.log(`HTTP server is running at https://localhost:${port}`);
  });

-1,2두 방법 모두 사설 인증서여서 브라우저에서 접속할 경우 경고가 발생합니다.

브라우저에서 p12로 인증서 추가하기 를 수행해주시면 경고가 사라집니다.

3.vite 사용시 connect error가 발생합니다.

npm i vite-plugin-mkcert -D

vite.config.js

import { defineConfig } from 'vite'
import mkcert from 'vite-plugin-mkcert'

export default defineConfig({
  server: { https: true }, // Not needed for Vite 5+
  plugins: [ mkcert() ]
})

를 수행하면 vite의 경우 자동으로 인증서를 브라우저에 추가해줍니다.

ssl - Vite https on localhost - Stack Overflow