데브옵스
Travis CI로 AWS S3에 SPA 배포하기
두줄요약
Travis CI로 React SPA 빌드 결과물을 S3와 CloudFront에 자동 배포하는 구성을 소개했습니다. 보안 키 관리, SPA 라우팅용 오류 페이지, 캐시 무효화와 Slack 알림 설정을 다뤘습니다.
문제 상황
- 시간·예산 제약 속 SPA 프로젝트의 배포 자동화 필요
- develop 브랜치 최신 커밋의 Staging 사이트 상시 반영 정책
구조와 흐름
- Travis CI 빌드 결과물의 S3 업로드와 CloudFront 배포 구성
- CloudFront 원본 액세스 ID로 S3 파일 비공개 접근 유지
- 배포 후 CloudFront 엣지 캐시 무효화와 Slack 알림 연동
해결 방법
- create-react-app 기본 빌드 경로인 build 디렉터리를 배포 대상으로 지정
- 브랜치·태그별 Deployment Provider 설정으로 배포 대상 분기
- 403 오류 페이지를 index.html로 연결해 SPA 라우팅 지원
주의할 점
- AWS 접근 키의 YAML 평문 커밋 방지와 travis encrypt·환경변수 활용
- us-east-1 버킷 선택 시 초기 HTTP 307 오류 회피 가능성
- 다중 Provider 배포 시 before_deploy·after_deploy 반복 실행 주의
