mkcert를 이용해 로컬 환경 https로 실행시키기

프론트

1. mkcert설치

https://github.com/FiloSottile/mkcert#installation

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

window 예시)

choco install mkcert

 

2.로컬 루트 CA에 mkcert를 추가

mkcert -install

 

3. 인증서를 생성

mkcert localhost

 

만약 루트 디렉토리에서 작업이 이루어졌다면 아래처럼 파일이 생기게 된다.

 

5. 실행 설정

리액트

"scripts": {
    "start": "HTTPS=true SSL_CRT_FILE=localhost.pem SSL_KEY_FILE=localhost-key.pem react-scripts start"

Next.js

루트 디렉토리에 server.js파일 생성

// server.js

const { createServer } = require("https");
const { parse } = require("url");
const next = require("next");
const fs = require("fs");

const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();

const httpsOptions = {
  key: fs.readFileSync("./localhost-key.pem"),
  cert: fs.readFileSync("./localhost.pem"),
};

app.prepare().then(() => {
  createServer(httpsOptions, (req, res) => {
    const parsedUrl = parse(req.url, true);
    handle(req, res, parsedUrl);
  }).listen(3000, (err) => {
    if (err) throw err;
    console.log("> Ready on https://localhost:3000");
  });
});

package.json에 명령어 아무거나 추가

    "dev": "next dev",
    "https": "node server.js",
    "build": "next build",

 

참고 자료

https://web.dev/i18n/ko/how-to-use-local-https/

백엔드(스프링 부트)

1. 인증서 생성하기

mkcert -key-file localhost-key.pem -cert-file localhost.pem localhost

 

2. 인증서 파일을 PKCS#12 형식으로 변환

Spring Boot는 PKCS#12 형식의 키스토어를 사용하기에 PEM 형식의 인증서와 개인 키를 PKCS#12 형식으로 변환시켜준다.

openssl pkcs12 -export -in localhost.pem -inkey localhost-key.pem -out keystore.p12 -name springboot -CAfile rootCA.pem -caname root

생성된 keystore.p12는 src/main/resources에 위치시킨다.

 

3. 설정

server:
  port: 8443
  ssl:
    key-store: classpath:keystore.p12
    key-store-password: 설정한비밀번호
    keyStoreType: PKCS12
    keyAlias: springboot

• server.port: HTTPS 서버가 사용할 포트입니다. 기본적으로 443이지만, 로컬에서는 8443을 자주 사용
• server.ssl.key-store: classpath:를 사용해 키스토어 파일의 경로를 참조함 (src/main/resources가 기본 경로)
• server.ssl.key-store-password: 키스토어 파일 생성 시 설정한 비밀번호
• server.ssl.keyStoreType: 키스토어 타입
• server.ssl.keyAlias: 키스토어에서 인증서를 찾기 위해 사용되는 별칭

변환에 사용된  localhost-key.pem과 localhost.pem는 필요없어졌으므로 삭제하면 된다.