mkcert 사용법 - 로컬 개발을 위한 HTTPS 환경 만들기

✏️ 로컬 개발을 위한 HTTPS 환경 만들기 (mkcert 사용법)

1. mkcert를 이용하여 로컬에서 신뢰할 수 있는 인증서 만들기

2. mkcert로 발급받은 인증서를 이용해 HTTPS 서버 구축하기

 

 

 📌 mkcert: https://github.com/FiloSottile/mkcert

 

 💬 mkcert는 코드스테이츠 프론트엔드 부트캠프 3개월차 쯤, 네트워크 유닛에서 접하게 되었다. 처음 들어보고, 처음 사용해보는거라 너무 헷갈리는데 학습자료를 보고 따라해도 잘 되지 않았다. 구현 도중 발생한 에러의 문제가 무엇인지 모른채 시간을 많이 보내서 과정을 기록해보려 한다. 참고로 MacOS 에서의 사용법만 기록한다.

 • 참고자료: 코드스테이츠SEB 학습자료, https://web.dev/how-to-use-local-https/

 

1. mkcert 설치

macOS 사용자의 경우, Homebrew를 통해 mkcert를 설치할 수 있다.

$ brew install mkcert

 

2. 인증서 생성

2-1. 다음 명령어를 통해 로컬을 인증된 발급기관으로 추가

$ mkcert -install

# 참고로 삭제는 uninstall
$ mkcert -uninstall

 

2-2. 로컬 환경에 대한 인증서 생성

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

→ 옵션으로 추가한 localhost, 127.0.0.1(IPv4), ::1(IPv6)에서 사용할 수 있는 인증서가 완성된다.

→ cert.pem key.pem 2개의 파일이 생성된다.

 

인증서 생성 완료

📌 저장 경로 확인하기: 저장 경로를 알아야 다른 프로젝트에서도 경로만 지정해서 사용 가능하다.

📌 인증서는 공개키, 그리고 인증기관의 서명을 포함하고 있으므로 공개되어도 상관이 없지만, key.pem의 경우 개인 키이므로 git에 커밋하지 않고, 암호처럼 다루어야 한다.

→ cert.pem 공개 키와 인증기관의 서명을 포함하고 있는 인증서(certificate) / 공개 가능

→ key.pem 개인 키 / 공개 X

 

💬 참고로, 폴더 여기저기 옮기며 작업해본 결과

→ mkcert는 어느 폴더에서 install해도 상관없음

→ 생성되는 cert.pem key.pem 파일도 위치 옮겨도 상관없음 (단, 두 파일은 세트이므로 항상 함께 사용해야 한다.)

 

3. HTTPS 서버 작성 (Node.js, Express.js)

 

 💬 CodeStates의 앞으로의 학습에서도 cert.pem과 key.pem이 사용된다고 해서 상위폴더에 파일을 생성하고, 경로지정을 위해 path.join을 사용했다.

아래 Node.js와 Express.js로 작성한 코드에서 확인할 수 있다.

 

👩🏻‍💻 Node.js

// 예시코드
const https = require('https');
const fs = require('fs');
const options = {
  key: fs.readFileSync('{PATH/TO/CERTIFICATE-KEY-FILENAME}.pem'),
  cert: fs.readFileSync('{PATH/TO/CERTIFICATE-FILENAME}.pem'),
};
https
  .createServer(options, function (req, res) {
    // server code
  })
  .listen({PORT});

const https = require('https'); // https 모듈 불러오기
const fs = require('fs');
const path = require('path');

// console.log(path.join(__dirname, '../..', '/key.pem'))

const option = {
  key: fs.readFileSync( path.join(__dirname, '../..', '/key.pem'), 'utf-8' ),
  cert: fs.readFileSync( path.join(__dirname, '../..', '/cert.pem'), 'utf-8'),
}

https
  .createServer(option, (req, res) => {
    res.write('Congrats! You made https server now :)');
    res.end();
  })
  .listen(3001, () => {
    console.log("서버연결완료");
  });

 

👩🏻‍💻 Express.js

const https = require('https');
const fs = require('fs');
const express = require('express'); // express 모듈 불러오기
const path = require('path');

const app = express(); // 서버 실행

const option = {
  key: fs.readFileSync( path.join(__dirname, '../..', '/key.pem'), 'utf-8' ),
  cert: fs.readFileSync( path.join(__dirname, '../..', '/cert.pem'), 'utf-8'),
}

https
  .createServer(
    option,
    app.use('/', (req, res) => {
      res.send('Congrats! You made https server now :)');
    })
  )
  .listen(3001, () => {
    console.log("서버연결완료");
  });

→ express.js를 사용하는 경우, https.createServer의 두 번째 파라미터에 들어갈 callback 함수를 Express 미들웨어로 교체하면 된다.

 

HTTPS 연결 완료

 

---

📌 👀 💬 ERROR NOTE

 mkcert도 잘 설치했고, cert.pem key.pem 파일도 생성되었고, 서버 코드도 맞게 작성한 것 같은데 https로 접속이 되지 않는 오류가 계속되었다.

 mkcert를 삭제했다가 다시 설치도 해보고, 파일 전부를 삭제하기도 해보고, 브라우저를 껐다 켜보기도 하고, 캐시도 삭제해보고, 시크릿 모드로도 들어가보고, 시간을 좀 두고 쉬다가 작업을 해보기도 했는데 해결이 되지 않아서 chrome 브라우저 에러 창에서 연결 오류 해결을 눌러서 도움말을 확인해봤었다.

 내가 실행한 브라우저에서 나왔던 에러는 ‘연결이 비공개로 설정되어 있지 않습니다’ 였고 (블로그에 작성할 줄 알았으면 화면 캡쳐를 해둘걸 그랬네), 3단계에 운영체제 업데이트하기가 있길래 현재 Mac OS의 업데이트 사항을 확인했다. 권장하는 업데이트 사항이 있어서 운영체제를 업데이트하고 나서 다시 실행해보니 https로 연결이 잘되었다..!!

 몇 시간동안 계속 검색해보며 고민했는데 운영체제 업데이트가 문제였다고..? 사실 정확한 원인이 운영체제 업데이트가 맞는지는 확인할 방법이 없지만, 이렇게 허무하게도 해결되었다는 사실을 기록하고 싶었다. 다음번에 문제가 생기거나, 다시 설치할 일이 있으면 이 글을 보고 좀 더 원활하게 해결하기를 바라며..⭐️