Next.js 14에 SSL 적용하기

웹 애플리케이션의 보안은 더 이상 선택이 아닌 필수입니다. 특히 Next.js와 같은 현대적인 프레임워크를 사용할 때, SSL(Secure Sockets Layer) 적용은 사용자 데이터 보호와 신뢰성 있는 서비스 제공을 위한 기본적인 요소입니다. 이 글에서는 Next.js 14 버전에서 SSL을 적용하는 방법을 상세히 알아보겠습니다. 개발 환경부터 프로덕션 환경까지, 단계별로 SSL 적용 과정을 살펴보며 보안 강화의 여정을 함께 떠나봅시다.

SSL의 중요성 먼저, SSL이 왜 중요한지 간단히 짚고 넘어가겠습니다. SSL은 웹사이트와 사용자 브라우저 사이의 통신을 암호화하여 데이터 도청, 변조를 방지합니다. 이는 개인정보 보호, 데이터 무결성 유지, 그리고 사용자 신뢰 구축에 필수적입니다. 또한 Google과 같은 검색 엔진은 HTTPS를 사용하는 웹사이트에 더 높은 순위를 부여하므로, SEO 측면에서도 중요합니다.

Next.js 14에서의 SSL 적용 준비 Next.js 14 버전에서 SSL을 적용하기 위해서는 몇 가지 준비 사항이 필요합니다. 먼저, 필요한 패키지를 설치하고 프로젝트 구조를 설정해야 합니다.

필요한 패키지 설치 터미널에서 다음 명령어를 실행하여 필요한 패키지를 설치합니다:

npm install --save-dev @types/node

프로젝트 구조 설정 Next.js 14에서는 App Router를 사용하므로, 커스텀 서버를 만들어 SSL을 적용할 것입니다. 프로젝트 루트에 server.ts 파일을 생성합니다.

SSL 인증서 생성 개발 환경에서 테스트를 위해 자체 서명된 SSL 인증서를 생성할 수 있습니다. 실제 프로덕션 환경에서는 신뢰할 수 있는 인증 기관(CA)에서 발급받은 인증서를 사용해야 합니다. 다음은 OpenSSL을 사용하여 자체 서명된 인증서를 생성하는 방법입니다:

OpenSSL 설치 (대부분의 시스템에 이미 설치되어 있을 수 있습니다)
개인 키 생성: openssl genrsa -out private-key.pem 2048
인증서 서명 요청(CSR) 생성: openssl req -new -key private-key.pem -out csr.pem
자체 서명된 인증서 생성: openssl x509 -req -days 365 -in csr.pem -signkey private-key.pem -out certificate.pem

이렇게 생성된 private-key.pem과 certificate.pem 파일을 프로젝트에서 사용할 것입니다.

SSL 적용을 위한 서버 설정 이제 server.ts 파일에 다음 코드를 작성하여 SSL을 적용한 커스텀 서버를 설정합니다:

import { createServer } from 'https';
import { parse } from 'url';
import next from 'next';
import fs from 'fs';

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

const httpsOptions = {
  key: fs.readFileSync('./private-key.pem'),
  cert: fs.readFileSync('./certificate.pem')
};

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

이 코드는 HTTPS 서버를 생성하고, Next.js 애플리케이션을 이 서버에서 실행합니다.

프로젝트 설정 파일 수정 Next.js 프로젝트의 설정 파일들을 수정하여 SSL 적용을 위한 환경을 구성합니다.

next.config.js 파일 수정 (또는 next.config.mjs로 이름 변경):

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
}

export default nextConfig;

package.json 파일의 scripts 섹션 수정:

"scripts": {
  "dev": "ts-node --project tsconfig.server.json server.ts",
  "build": "next build",
  "start": "NODE_ENV=production ts-node --project tsconfig.server.json server.ts"
}

tsconfig.server.json 파일 생성:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "module": "commonjs",
    "outDir": "dist",
    "noEmit": false
  },
  "include": ["server.ts"]
}

기존 tsconfig.json 파일에 다음 내용 추가:

{
  "compilerOptions": {
    // ... 기존 설정 ...
    "strict": true,
    "esModuleInterop": true
  }
}

SSL 적용된 Next.js 애플리케이션 실행 모든 설정이 완료되었다면, 이제 SSL이 적용된 Next.js 애플리케이션을 실행할 수 있습니다.

개발 모드에서 실행:

npm run dev

프로덕션 모드에서 실행:

npm run build
npm start

이제 브라우저에서 https://localhost:3000으로 접속하면 SSL이 적용된 Next.js 14 애플리케이션을 볼 수 있습니다.

주의사항 및 추가 고려사항

자체 서명 인증서 사용 시 주의: 개발 환경에서 자체 서명된 인증서를 사용할 경우, 브라우저에서 보안 경고가 표시될 수 있습니다. 이는 정상적인 현상이며, 개발 목적으로는 무시해도 됩니다.
프로덕션 환경 고려사항: 실제 서비스 환경에서는 보안 및 성능상의 이유로 Nginx나 Apache와 같은 웹 서버를 사용하여 SSL을 처리하는 것이 좋습니다. 이는 Node.js 애플리케이션의 부하를 줄이고, 더 효율적인 SSL 처리를 가능하게 합니다.
인증서 관리: SSL 인증서와 개인 키는 매우 중요한 보안 자산입니다. 이들을 안전하게 보관하고, 절대 버전 관리 시스템에 포함시키지 마세요.
정기적인 갱신: SSL 인증서는 유효 기간이 있으므로, 정기적으로 갱신해야 합니다. Let's Encrypt와 같은 서비스를 사용하면 무료로 인증서를 발급받고 자동으로 갱신할 수 있습니다.
HTTP에서 HTTPS로 리다이렉션: 사용자가 HTTP로 접속하더라도 자동으로 HTTPS로 리다이렉션되도록 설정하는 것이 좋습니다. 이는 사용자 경험을 향상시키고 보안을 강화합니다.

결론 Next.js 14에 SSL을 적용하는 과정은 초기에는 복잡해 보일 수 있지만, 단계별로 접근하면 충분히 해낼 수 있는 작업입니다. SSL 적용은 웹 애플리케이션의 보안을 크게 향상시키며, 사용자에게 신뢰를 줍니다. 개발 환경에서 시작하여 점진적으로 프로덕션 환경에 적용해 나가면서, 웹 애플리케이션의 보안을 한 단계 높일 수 있습니다.

Next.js와 같은 현대적인 프레임워크를 사용하면서 SSL을 적용하는 것은 웹 개발의 필수적인 부분이 되었습니다. 이 과정을 통해 not only 보안을 강화할 뿐만 아니라, 웹 표준을 준수하고 사용자에게 더 나은 경험을 제공할 수 있습니다. 웹 개발의 세계는 계속해서 진화하고 있으며, SSL 적용은 그 진화의 중요한 한 걸음입니다. 안전하고 신뢰할 수 있는 웹 애플리케이션을 만들어 나가는 여정에 이 가이드가 도움이 되기를 바랍니다.