로컬 개발 환경에서 HTTPS 설정하기

1. OpenSSL을 사용하여 자체 서명된 SSL 인증서 생성하기

가장 먼저 해야 할 일은 로컬에서 사용할 SSL 인증서를 생성하는 것입니다. SSL 인증서는 웹사이트와 사용자 간의 데이터를 암호화하여 보안을 강화합니다. 이를 위해 OpenSSL을 사용할 수 있습니다. 대부분의 UNIX 기반 시스템에는 이미 설치되어 있으며, Windows에서도 쉽게 설치할 수 있습니다.

OpenSSL 설치 및 인증서 생성

먼저, OpenSSL이 시스템에 설치되어 있는지 확인하세요. UNIX 기반 시스템에서는 대부분 이미 설치되어 있습니다. Windows 사용자는 OpenSSL 설치 페이지에서 다운로드할 수 있습니다.

OpenSSL 설치 후, 다음 명령어를 터미널에 입력하여 자체 서명된 SSL 인증서와 개인 키를 생성하세요:

openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout localhost.key -out localhost.crt

이 명령어는 1년간 유효한 `localhost.key`라는 개인 키 파일과 `localhost.crt`라는 인증서 파일을 생성합니다. 이제 로컬 서버에 이 파일을 사용하여 HTTPS를 설정할 준비가 되었습니다.

2. 로컬 서버에서 HTTPS 설정하기

이제 생성한 SSL 인증서를 사용하여 로컬 서버에 HTTPS를 설정할 차례입니다. Node.js를 예로 들어보겠습니다.

Node.js를 사용하는 경우

Node.js를 사용하고 있다면, `https` 모듈을 통해 쉽게 HTTPS 서버를 설정할 수 있습니다. 아래 예제 코드를 사용해 보세요:

const https = require('https');
const fs = require('fs');
const express = require('express');

const app = express();

// SSL 인증서와 키 로드
const sslOptions = {
  key: fs.readFileSync('path/to/localhost.key'),
  cert: fs.readFileSync('path/to/localhost.crt')
};

// HTTPS 서버 생성
https.createServer(sslOptions, app).listen(3000, () => {
  console.log('HTTPS Server running on https://127.0.0.1:3000');
});

app.get('/', (req, res) => {
  res.send('Hello HTTPS World!');
});

위 코드를 실행하면, HTTPS를 통해 로컬 서버를 구동할 수 있습니다. 이 설정은 Express.js 뿐만 아니라 다른 Node.js 프레임워크에도 쉽게 적용할 수 있습니다.

Next.js 개발 서버에서 HTTPS 설정하기

Next.js를 사용하는 경우, 커스텀 서버를 설정하여 HTTPS를 지원할 수 있습니다. `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('path/to/localhost.key'),
  cert: fs.readFileSync('path/to/localhost.crt')
};

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('> Server started on https://localhost:3000');
  });
});

이 코드를 사용하면, Next.js 개발 서버가 HTTPS를 통해 로컬에서 안전하게 실행됩니다.

3. 브라우저에 인증서 신뢰 설정

자체 서명된 인증서는 기본적으로 브라우저에서 신뢰하지 않습니다. 따라서 이를 신뢰하도록 브라우저에 수동 설정해야 합니다. 각 브라우저나 운영체제에 따라 설정 방법이 조금씩 다릅니다.

• Chrome: `localhost.crt` 파일을 클릭하여 설치하고, 신뢰 목록에 추가하세요.
• macOS: 인증서 파일을 더블 클릭하여 키체인에 추가하고, “항상 신뢰” 옵션을 선택하세요.
• Windows: 인증서를 더블 클릭하여 인증서 설치 마법사를 실행하고, 신뢰할 수 있는 루트 인증 기관에 추가하세요.

4. 로컬에서 HTTPS를 사용하는 이유

로컬 환경에서 HTTPS를 설정하는 것은 단순히 보안 강화 차원을 넘어섭니다. 다음과 같은 이유로 HTTPS 설정이 필수적입니다:

• 보안 테스트: 운영 환경과 동일한 조건에서 보안 기능을 테스트할 수 있습니다.
• 프로덕션 환경과의 일관성 유지: HTTPS는 대부분의 프로덕션 환경에서 필수적입니다. 로컬에서도 동일한 환경을 구축함으로써, 예상치 못한 문제를 미리 발견할 수 있습니다.
• 브라우저 기능 요구 사항: 일부 브라우저 기능, 예를 들어 서비스 워커나 푸시 알림은 HTTPS가 필수입니다. 이러한 기능을 로컬에서 테스트하려면 HTTPS를 설정해야 합니다.

로컬 개발 환경에서 HTTPS를 사용함으로써, 여러분의 개발 경험은 한층 더 향상될 것입니다. 지금 바로 HTTPS를 설정하여, 안전하고 일관된 개발 환경을 구축하세요.