Caddy와 Docker로 간편하게 프론트엔드 제공하기

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• Docker 및 웹 서버 구성에 관심 있는 개발자
• Nginx 설정의 복잡성으로 인해 어려움을 겪는 중급 이상 개발자
• 자동 HTTPS, 압축, 로깅 기능이 필요한 프론트엔드 서비스 개발자
• 난이도: 초급~중급 (Docker 기초 지식 필요)

핵심 요약

• Caddy는 자동 HTTPS, 압축, 로깅 기능을 제공하는 Go 기반 웹 서버로, nginx.conf 설정을 대체할 수 있다.
• Docker Compose를 통해 frontend.localhost 도메인으로 서비스를 제공하며, Caddyfile을 통해 간단한 구성 파일로 설정 가능.
• reverse_proxy와 encode 등 핵심 API를 활용해 Nginx 대체 가능.

섹션별 세부 요약

1. Caddy의 주요 기능

• 자동 HTTPS: tls internal 설정으로 로컬 개발 환경에서 Let's Encrypt 없이도 HTTPS 제공.
• 압축: encode zstd gzip을 통해 Brotli 및 Gzip 압축 활성화.
• 로깅: log { output stdout }으로 컨테이너 stdout에 실시간 로그 출력.
• 리버스 프록시: reverse_proxy frontend-ui:3030으로 프론트엔드 서비스 연결.

2. Docker Compose 설정

• 서비스 구성:

- frontend-ui: git.apps.hexmos.com:5050/hexmos/client/main 이미지 사용.

- caddy: caddy:2-alpine 이미지 사용, 80/443 포트 노출.

• 볼륨 마운트: Caddyfile과 TLS 데이터를 caddy_data 및 caddy_config 볼륨에 저장.
• 의존성: frontend-ui 서비스가 실행된 후 Caddy 실행.

3. 로컬 환경 설정

• hosts 파일 업데이트: sudo echo "127.0.0.1 frontend.localhost" >> /etc/hosts 명령어로 도메인 매핑.
• 명령어 실행: docker compose up --build로 컨테이너 구동.

4. 프로덕션 환경 구성

• TLS 설정 변경: tls internal을 tls you@example.com으로 변경하여 Let's Encrypt 인증서 자동 발급 및 갱신.
• 사용 사례: 단일 페이지 앱(SPA), 백엔드 API 리버스 프록시, 미들웨어 환경 자동 보안화.

결론

• Caddy는 Nginx의 복잡한 설정을 대체할 수 있는 간편한 웹 서버로, docker-compose.yaml과 Caddyfile만으로 빠르게 프론트엔드 서비스를 제공 가능.
• 핵심 팁: tls internal은 로컬 개발용, tls you@example.com은 프로덕션용으로 설정 변경.
• 실무 적용: Caddy를 사용하면 보안, 간결성, 명확성의 균형을 유지하면서 웹 서버 구성이 쉬워짐.