Trouble Shooting

로컬 환경에서 HTTPS 인증서 사용하기

로컬 환경에서 HTTPS 인증서 사용하기
개발 과정에서 외부 API를 안전하게 테스트하고 연동하는 것은 매우 중요하다. 나의 경우 회사 프로젝트에서 Facebook Graph API를 사용해야 할 일이 있었는데, Facebook Graph API는 HTTP 프로토콜에서 작동하지 않아 API 요청을 보안 연결(HTTPS)을 통해 수행해야 했다. 이 글에는 OpenSSL 대신 mkcert를 사용하여 더욱 쉽게 HTTPS 환경을 구축했던 경험을 기록해두었다.

문제 상황

Facebook Graph API는 데이터 보안과 사용자의 개인 정보 보호를 위해 HTTPS 프로토콜을 통한 요청만을 허용한다. 하지만 기본적으로 로컬 개발 환경은 HTTP 프로토콜을 사용하며, 이로 인해 API 연결 테스트 시 보안 문제로 요청이 차단되는 경우가 발생할 수 있다.

mkcert를 선택한 이유

  • mkcert는 로컬 개발을 위한 간편한 도구로, 자체 서명된 SSL 인증서를 생성하여 브라우저가 신뢰할 수 있도록 한다. OpenSSL과 달리 mkcert는 설치와 사용이 간단하며, 브라우저에서 추가 설정 없이 생성된 인증서를 자동으로 신뢰하게 만들어준다.

로컬 HTTPS 환경 구축 과정

1단계: mkcert 설치

mkcert는 Homebrew, Chocolatey 등 다양한 패키지 관리자를 통해 쉽게 설치할 수 있다. macOS 사용자의 경우, Homebrew를 사용하여 설치할 수 있다.
brew install mkcert
(Windows 사용자는 Chocolatey를 통해 설치할 수 있다.)
choco install mkcert

2단계: 로컬 CA 생성 및 설치

mkcert를 사용하기 전에, 첫 번째 단계로 로컬 CA(인증 기관)를 생성하고 시스템에 설치해야 한다. 이 과정은 로컬에서 생성된 인증서가 시스템 및 브라우저에 의해 신뢰될 수 있도록 한다.
mkcert -install

3단계: 인증서 생성

이제 localhost, 127.0.0.1 (IPv4), ::1 (IPv6) 주소를 위한 인증서를 생성할 수 있다. 이러한 주소는 일반적으로 로컬 개발 환경에서 사용된다.
mkcert localhost 127.0.0.1 ::1
이 명령으로 localhost+2.pem (인증서 파일)과 localhost+2-key.pem (개인 키 파일)을 생성할 수 있다.

4단계: 웹 서버에 인증서 적용

생성된 인증서를 웹 서버에 적용해야 한다. 나의 경우 Next.js 프로젝트에 적용했기에 다음과 같은 코드를 src에 작성하여 서버를 구성했다.
// src/sever.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+2-key.pem'),
	cert: fs.readFileSync('./localhost+2.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');
	});
});

5단계: package.json 파일에 스크립트 추가하기

next dev를 시작했을 때 설정해둔 server.js를 실행할 수 있도록 스크립트를 추가한다.
"scripts": {
	...
	"dev": "node server.js",
	...
},

Facebook Graph API 연결 테스트

로컬에서 HTTPS 환경을 성공적으로 구축한 후, 안전하게 Facebook Graph API에 연결하여 테스트를 수행할 수 있게 되었다. 이러한 설정을 하므로서 API 테스트 시 보안 연결을 통한 데이터 전송을 보장하며, 개발 과정에서의 데이터 보호와 사용자의 개인 정보 보호에 기여할 수 있게 된다.