☁️ 클라우드

Netlify

웹 프로젝트 배포 자동화 플랫폼

📖 상세 설명

Netlify는 JAMstack(JavaScript, APIs, Markup) 기반 웹사이트와 애플리케이션을 위한 올인원 호스팅 플랫폼입니다. Git 저장소와 연동하여 푸시만으로 자동 빌드와 배포가 이루어지며, 전 세계 CDN을 통해 빠른 콘텐츠 전송을 제공합니다.

2015년 설립된 Netlify는 JAMstack 아키텍처의 대중화를 이끌었습니다. GitHub, GitLab, Bitbucket과 원클릭 연동이 가능하며, React, Vue, Next.js, Gatsby 등 주요 프레임워크를 즉시 지원합니다. 월 100GB 대역폭과 300분 빌드 시간의 무료 티어로 개인 프로젝트와 스타트업에 인기가 높습니다.

Netlify의 핵심 기능으로는 Netlify Functions(서버리스 함수), Edge Functions(엣지 컴퓨팅), Forms(서버리스 폼 처리), Identity(인증), Split Testing(A/B 테스트) 등이 있습니다. 특히 Deploy Preview 기능은 PR마다 고유 URL을 생성해 코드 리뷰 전 미리보기를 가능하게 합니다.

실무에서 Netlify는 마케팅 사이트, 문서 사이트, 포트폴리오, SPA(Single Page Application) 배포에 최적화되어 있습니다. Netlify CMS와 함께 사용하면 비개발자도 콘텐츠를 수정할 수 있는 정적 사이트를 만들 수 있습니다.

💻 코드 예제

# netlify.toml - Netlify 설정 파일

[build]
  # 빌드 명령어
  command = "npm run build"
  # 배포할 디렉토리
  publish = "dist"
  # 함수 디렉토리
  functions = "netlify/functions"

[build.environment]
  NODE_VERSION = "18"
  NPM_FLAGS = "--legacy-peer-deps"

# 프로덕션 환경 설정
[context.production]
  command = "npm run build:prod"

# 브랜치별 설정
[context.staging]
  command = "npm run build:staging"

# 리다이렉트 규칙
[[redirects]]
  from = "/api/*"
  to = "/.netlify/functions/:splat"
  status = 200

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

# 헤더 설정
[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"
    X-XSS-Protection = "1; mode=block"
    Content-Security-Policy = "default-src 'self'"

# 플러그인
[[plugins]]
  package = "@netlify/plugin-lighthouse"

🗣️ 실무에서 이렇게 말하세요

💬 프로젝트 셋업 회의에서
"랜딩 페이지는 Netlify에 배포하면 좋겠어요. Git 푸시만 하면 자동 배포되고, PR마다 Deploy Preview URL이 나와서 디자이너분들도 바로 확인할 수 있거든요. 무료 티어로도 월 100GB 대역폭이면 충분합니다."
💬 기술 면접에서
"Netlify Functions를 활용해서 Contact Form 처리와 외부 API 프록시를 구현했습니다. CORS 문제 없이 서드파티 API를 호출할 수 있고, 환경 변수로 API 키를 안전하게 관리했어요. Cold Start는 약 200ms 정도로 AWS Lambda보다 빨랐습니다."
💬 Vercel과 비교 질문에
"Netlify는 정적 사이트와 JAMstack에 특화되어 있고, Vercel은 Next.js와의 통합이 뛰어나요. 폼 처리나 Identity 같은 빌트인 기능은 Netlify가 강하고, ISR이나 서버 컴포넌트는 Vercel이 앞서 있습니다."

⚠️ 흔한 실수 & 주의사항

❌
SPA 라우팅 404 오류

React Router나 Vue Router 사용 시 새로고침하면 404가 발생합니다. _redirects 파일에 "/* /index.html 200"을 추가하거나 netlify.toml에 리다이렉트 설정이 필요합니다.

❌
빌드 시간 초과

무료 티어 빌드 제한(월 300분)을 초과하면 배포가 중단됩니다. 빌드 캐시를 활용하고, 불필요한 의존성을 제거하세요. 대형 프로젝트는 Incremental Static Regeneration을 고려하세요.

✅
최적의 배포 전략

netlify.toml로 빌드 설정을 버전 관리하고, Branch Deploy로 스테이징 환경을 구성하세요. Deploy Preview를 활용해 PR 리뷰 품질을 높이고, 롤백이 필요하면 대시보드에서 이전 배포로 즉시 전환하세요.

🔗 관련 용어

📚 더 배우기