로컬pc에 https 적용하기 로컬 SSL 인증서 적용하기 mkcert (vue, vite, spring boot)

https 사용을 위하여 vue, 스프링부트 프로젝트에 로컬 SSL 인증서를 적용해야 한다. (한쪽만 적용시 api요청시 에러 뜸)

 

요약

1. mkcert를 설치하고 pem 인증서를 발급받은뒤 프론트엔드 config파일에 적용,

2. pem -> p12 변환 후 스프링부트에 적용.

 

자세한 방법은 아래 순서대로 따라하면 된다.

1. 아래 깃허브 들어가면 설명에 각자 OS에 맞게 mkcert 설치하는법이 나와있다.
2. 윈도우는 chocolatey를 설치 한 후 아래 명령어를 실행하라고 한다. (설치방법: https://woogyun.tistory.com/720)

https://github.com/FiloSottile/mkcert

GitHub - FiloSottile/mkcert: A simple zero-config tool to make locally trusted development certificates with any names you'd lik

 

 

 

mkcert 설치 완료후 터미널, 파워쉘 관리자모드에서 아래 2개 명령어 사용

#로컬 pc를 인증기관에 등록
mkcert -install

#localhost와 127.0.0.1의 주소에 대하여 인증서 발급
mkcert localhost 127.0.0.1

 

명령어를 입력하면 -key.pem 파일과 .pem 키 파일이 생성된다.

명령어를 사용하면 명령어를 사용한 디렉토리위치에 파일이 생성되는데 해당 파일을 적용할 프로젝트에 복사하면 된다.

 

vite.config.js 적용, 키 등록 부분만 넣으면 된다.

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: "/SSLKey/localhost-key.pem",
      certFile: "/SSLKey/localhost.pem",
    }),
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

다시 로컬 서버를 실행시키면 다음과 같이 https 설정이 정상적으로 적용된 것을 확인할 수 있다.

(웹 브라저도 완전히 껏다 켜보길)

 

---

이제 프론트는 적용이 끝났으니 스프링 부트 서버쪽에 적용을 해보자.

 

pem키를 p12로 변환한 후 적용하면 된다.

 

스프링부트에서는 ssl 인증을 위한 pem키를 지원하지 않기 때문에 p12키로 변환을 해주어야 한다.

pem키를 p12를 변환하기 위해 openssl을 설치해야만 한다. (맥, 리눅스는 설치 되어있으므로 3번으로 이동)

 

1. openssl 설치 (https://slproweb.com/products/Win32OpenSSL.html)

다운로드 후 실행, next 막 눌러서 설치하면 C:\Program Files\OpenSSL-Win64\ 폴더가 생김

2. openssl-win64/bin 폴더에 미리 생성해두었던 localhost.pem, localhost-key.pem 파일 복사

사진에 보이는 pem키 2개를 넣으면 되고 변환하면 localhost 파일이 생성되는거임

 

3. 파워쉘,터미널을 관리자권한으로 실행 후 키 파일이 있는 경로로 이동 

#c드라이브로 이동
cd c:\

#Program Files로 이동
cd '.\Program Files\'

#이런식으로 openSSL폴더 찾아가보자
#cd 까지 입력후 tab키를 눌러보자. 편하게 경로를 찾아갈 수 있음.

 

4. 키파일이 있는 bin폴더 안에서 아래 명령어 복사 붙여넣기로 실행

.\openssl pkcs12 -export -in localhost.pem -inkey localhost-key.pem -out localhost.p12 -name "localhost"

또는

openssl pkcs12 -export -in localhost.pem -inkey localhost-key.pem -out localhost.p12 -name "localhost"

 

localhost.p12 파일 생성 완료.

 

 

 

스프링부트 서버에 설정(키 파일은 src\main\resources 폴더에 넣으면 됩니다.)

 

이후 application.yml 파일에 다음과 같이 ssl인증서 적용을 위한 코드를 복사 붙여넣기 한다.

server:
  port: 8080
  ssl:
    key-store: classpath:localhost.p12
    key-store-type: PKCS12
    key-store-password:

 

https://localhost:8080 접속하면 이제 ssl이 적용된 모습을 볼 수 있다.