NGINX와 멀티 스테이지 Docker를 활용한 React SSR 빌드 최적 서빙 전략

핵심 기술

NGINX와 멀티 스테이지 Docker 빌드를 활용하여 React와 같은 SSR 또는 정적 HTML 빌드 출력을 효율적으로 프로덕션 환경에 서빙하는 방법을 안내합니다. 빌드 결과물만 추출하여 NGINX로 가볍고 빠르게 서빙하는 아키텍처를 제안합니다.

기술적 세부사항

• 멀티 스테이지 Docker 빌드: Node.js 기반 빌드 환경(builder)에서 애플리케이션을 빌드하고, 최종 이미지에는 NGINX와 빌드된 정적 파일만 포함시켜 이미지 크기를 최소화합니다.
• 빌드 과정:
  • node:18 이미지를 사용하여 앱 소스 코드를 복사하고 npm install 및 npm run build를 실행합니다.
  • src/ssr 디렉토리의 빌드 결과물(예: index.html, public/styles.css)을 /app/signin 경로로 복사합니다.
  • index.html 내의 CSS 경로(styles.css)를 직접 참조하도록 수정하여 서빙 문제를 해결합니다.
• NGINX 서빙 설정:
  • nginx:alpine 이미지를 베이스로 사용합니다.
  • 빌더 단계에서 추출한 정적 파일(/app/signin)을 NGINX의 웹 루트(usr/share/nginx/html/signin)로 복사합니다.
  • nginx.conf를 커스텀하여 /signin/ 경로로 오는 요청을 /usr/share/nginx/html/signin/에서 처리하도록 alias 지시어를 사용합니다. index.html을 기본 파일로 지정합니다.
  • 다른 모든 경로는 404 오류를 반환하도록 설정하여 라우팅을 엄격하게 관리합니다.
• 실행 방법: docker build로 이미지를 빌드하고 docker run으로 컨테이너를 실행하여 로컬에서 서빙되는 결과물을 확인할 수 있습니다.

개발 임팩트

• 생산성 향상: Node.js 런타임 없이 정적 파일만으로 서비스를 제공하여 이미지 크기를 줄이고, 콜드 스타트 시간을 단축하며, 수평 확장을 용이하게 합니다.
• 유연성 증대: 여러 마이크로프론트엔드 또는 앱의 특정 부분을 서로 다른 서브 경로(/signin, /docs 등)로 격리하여 서빙할 수 있습니다.
• 보안 강화: 프로덕션 환경에서 불필요한 Node.js 프로세스를 제거하여 공격 표면을 줄일 수 있습니다.
• 확장성: NGINX 설정을 통해 캐시 제어, 인증 헤더 추가, 리디렉션 등의 다양한 기능을 쉽게 확장할 수 있습니다.

커뮤니티 반응

콘텐츠 자체에 구체적인 커뮤니티 반응이 언급되지는 않았지만, 이 패턴은 일반적으로 웹 개발 및 DevOps 커뮤니티에서 널리 사용되며 효율성과 간결성으로 긍정적인 평가를 받습니다.