Claude Code 첫 프로젝트 후기 - SLO 계산기와 배포방법 고민

목차

• 프로젝트 진행 과정
• 고민했던 내용
• Cloudflare 설정

 

들어가며

Claude Code로 코딩을 하나도 하지 않고 간단한 HTML 페이지를 만들었습니다. 정말 드물게 SLO(Service Level Objective) 허용 타임을 확인할 때가 있어서, HTML과 JavaScript 그리고 Claude Code로 SLO 계산기를 만들었습니다.

• GitHub PR: https://github.com/choisungwook/portfolio/pull/326
• 도메인: https://slo.akbun.com/

 

프로젝트 진행 과정

1. claude.md 생성
   claude.md 파일은 직접 생성하지 않고 Claude Code에게 생성을 부탁했습니다. 원하는 목표만 제시하고 그에 맞는 claude.md 파일을 만들어달라고 했습니다.
2. HTML 파일 생성
   claude.md 파일과 Anthropic의 frontend-design skills를 활용하여 HTML과 SLO를 계산하는 JavaScript를 만들어달라고 했습니다.
3. 디자인 수정
   처음에는 디자인이 잘 나오지 않았습니다. 원하는 디자인 스타일을 정확히 몰랐기 때문입니다. 크림배경색을 좋아해서 크림배경색 기준으로 디자인을 부탁했더니 원하는 디자인이 나왔습니다.
4. 도메인 구매
   akbun.com 도메인을 구매했습니다. 앞으로 Claude Code로 프로젝트를 많이 만들 것 같아서 AWS Route 53에서 도메인을 구매했습니다. 도메인의 1년 사용료는 $15입니다.
5. 배포
   index.html 배포는 AWS S3 웹 호스팅을 사용했습니다. AWS에 친숙했기 때문에 S3를 선택했고, CDN으로 Cloudflare를 사용했습니다. Cloudflare를 사용한 이유는 다음 챕터인 고민했던 내용에서 이야기합니다. AWS S3 배포는 테라폼을 사용했습니다. 향후 AWS S3를 Cloudflare 내부 서비스로 변경할지 고민 중입니다. 

[배포 아키텍처]

 

고민했던 내용

고민했던 내용은 CloudFront를 사용할지입니다. AWS S3로 웹 호스팅을 하고 있고 도메인도 Route 53에서 관리하기 때문에 CloudFront가 가장 이상적입니다. 하지만 Cloudflare로 AWS S3 웹 호스팅을 하려면 Route 53 NS 레코드를 전부 Cloudflare로 이관해야 하고, AWS S3를 public으로 오픈해야 합니다.
 
그럼에도 불구하고 Cloudflare를 사용한 이유는 보안과 비용입니다. CloudFront 등으로 서비스를 public으로 오픈하면 스캐닝 공격을 포함해서 공격이 엄청 많이 옵니다. 간단한 HTML 페이지여서 공격을 당해도 보안 위험은 없지만, DDoS 공격은 비용 문제가 발생합니다. DDoS 공격을 당하면 요청에 대한 응답을 해야 하기 때문에 CloudFront 비용이 크게 증가합니다. 그래서 AWS WAF를 달아야 하는데 AWS WAF는 무료가 아닙니다.
 
Cloudflare는 개인 프로젝트에 사용할 충분한 보안 기능을 무료로 제공합니다. 그래서 고민 끝에 DDoS를 방어하기 위해 Cloudflare를 선택했습니다.
 
Cloudflare가 S3에 접근하려면 AWS S3를 public으로 오픈해야 합니다. 그래서 AWS S3 접근을 Cloudflare만 가능하도록 설정했습니다. 이 접근 규칙은 bucket policy로 설정하는데, Cloudflare IP만 접근하도록 설정하거나 Cloudflare에서 AWS S3를 호출할 때 HTTP 헤더에 나만 아는 secret key를 설정하는 방법이 있습니다.
 

Cloudflare 설정

Cloudflare에서는 캐시 설정과 HTTPS redirect 설정을 했습니다.