[프론트엔드] localhost에 https 적용하기
개발을 하다보면 로컬에서도 https를 적용해야할 순간들이 있다.
예를 들어, 인증 관련 api를 연동하는중에 백엔드에서 크로스 사이트 쿠키를 위해 SameSite=None; Secure 옵션을 주었거나, https에서만 동작하는 브라우저 api를 활용해야하는 경우가 있을 수 있다.
전자의 경우, SameSite=Lax나 Secure=true로 완화하여 로컬에서 개발할 수도 있으나, 테스트 조건이 프로덕션 환경과 다르면 예상치 못한 문제가 발생할수도 있기에 개발 편의성보다 실전 환경과의 일관성을 유지하는게 좋을 수도 있겠다는 생각이 든다.
1. HTTPS 사설 인증서 발급을 위한 CLI 툴 설치 (Mac OS 기준)
우선, localhost는 기본적으로 http 환경에서 실행된다.
localhost 환경에서 HTTPS를 사용하려면, 기본 개발 서버(ex. next dev)는 HTTPS를 지원하지 않기 때문에, HTTPS를 직접 구성한 커스텀 서버가 필요하다.
서버를 성공적으로 띄워 개발 환경을 실행하기 위해서는 SSL/TLS 인증서가 필요하다.
역시 이런 일을 쉽게 할 수 있도록 도와주는 도구가 있다.
mkcert라는 프로그램을 이용해서 로컬 환경에서 신뢰할 수 있는 인증서를 생성할 수 있다.
mkcert는 로컬 개발자용 루트 인증서를 시스템에 설치하고, 이를 기반으로 브라우저가 신뢰하는 인증서를 발급해준다. 이로 인해 일반적인 사설 인증서와 달리 브라우저에서 안전하지 않음 경고 없이 HTTPS 통신이 가능하다고 한다.
// homebrew를 통해 다운
brew install mkcert(Windows나 Linux 사용자도 mkcert 설치 가능하다고 한다: 공식 GitHub 참고)
2. 인증서 생성하기
mkcert를 성공적으로 설치했다면 이제 로컬 호스트에 대해 인증서를 만들어준다.
아래 코드를 복붙하면 된다.
mkcert -key-file key.pem -cert-file cert.pem localhost 127.0.0.1 ::1
이 명령어는 localhost, 127.0.0.1(IPv4), ::1(IPv6) 모두에 대해 유효한 인증서를 발급한다. 이는 브라우저가 요청 시 사용하는 도메인/IP에 따라 인증 오류를 방지하기 위함이다.
이 명령어를 실행하면 cert.pem, key.pem이라는 파일이 생성된 것을 볼 수 있을 것이다.
3. 인증서 추가하기
성공적으로 파일(cert.pem, key.pem)이 생성되었다면 https로 띄우고 싶은 프로젝트의 루트 디렉토리에 해당 파일들을 추가해준다.
파일은 반드시 루트 디렉토리에 있을 필요는 없다.
다만 server.js에서 fs.readFileSync로 읽기 쉽도록 상대경로 기준 루트에 두는 것이 괜찮다고 생각할 뿐.
4. 서버 코드 작성하기
인증서 파일도 추가했다면 이제 커스텀 서버를 띄우기 위한 코드를 작성해야한다.
아래와 같이 설정해주면 된다.
// server.js
const { createServer } = require("https");
const { parse } = require("url");
const next = require("next");
const fs = require("fs");
const port = 3000;
const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();
const httpsOptions = {
key: fs.readFileSync("./key.pem"),
cert: fs.readFileSync("./cert.pem"),
};
app.prepare().then(() => {
createServer(httpsOptions, (req, res) => {
const parsedUrl = parse(req.url, true);
handle(req, res, parsedUrl);
}).listen(port, () => {
console.log(`> Server started on https://localhost:${port}`);
});
});
5. Package.json 설정 변경
이제 package.json에서 dev script를 기본설정인 next dev (next.js 기준)에서 node server.js로 변경한다.
// package.json
"scripts": {
"dev": "node server.js",
... 그외 스크립트
}
이제 yarn dev (yarn을 사용한다면)를 실행하면 https://localhost:3000 이런식으로 띄울 수 있다