Frontend 개발 후 AWS에 서비스 배포하기
Frontend(vue, react, angular 등등)를 개발을 하고 서비스를 하기 위한 AWS 환경 설정 및 배포에 대해서 글을 남깁니다.
아키텍처
단순하게 SSR이 아니기 때문에 따로 서버를 두고 관리하기 보다는 S3에 파일을 올리고 그에 맞게 CDN인 Coundfront와 연결 후 Route53을 이용해서 도메인까지 연결하는 구조로 생각을 했습니다. 그리고 배포 시스템으로는 Codepipeline을 이용해서 배포 하는 방법을 채택했습니다.
개발자
- 개발 소스 GitHub 배포
- CodePipeline에서 Webhook을 이용 Github 확인
- CodeBuild를 이용하여 빌드(ex. npm run build와 같은 것 등등)
- CodeDeploy를 이용해서 S3 배포
- S3를 배포가 완료 되면 Lambda를 실행 시켜 CloudFront 캐시 초기화
고객
www.example.com 접속시 DNS 접속(Route53)
Route53에 연결된 CNS(CloudFront) 호출
캐싱이 되어 있으면 캐싱된 부분으로 리턴 안되어 있으면 S3 접근 후 리턴
아키텍처에 따른 환경 설정
CloudFormation을 이용해서 배포 하는 방법이 있지만 아직 그 부분은 익숙하지 않아서 아래와 같이 직접 배포를 하게 되었습니다.
1. S3
1) 저장소 생성
위의 이미지의 버킷 만들기를 클릭 후 배킷을 생성 합니다.
생성시 꼭 퍼블릭 액세스 차단은 비활성화를 하셔야됩니다.
2) 정책 설정
만든 버킷에 접속 후에 해당 권한 탭 -> 버킷 정책을 클릭후 아래와 같은 정책을 입력 합니다. 그냥 해당 정책은 읽기 권한을 퍼블릭하게 오픈 한다는 의미 입니다.
{
"Version": "2008-10-17",
"Statement": [
{
"Sid": "Stmt1484315864175",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::버킷명/*"
}
]
}
3) 정책 설정
속성 탭에 있는 정적 웹사이트 호스팅을 위와 같이 설정합니다.
2. CloudFront 설정
1) 생성
위의 Create Distribution을 클릭합니다.
Web 부분의 Get Started를 클립 합니다. (저희는 Web이니깐요)
- Origin Domain Name 여기에 위의 S3 속성 설정의 앤드포인트(URL주소)를 가지고 와서 붙여넣기 합니다. (url 주소를 넣는 거지 버킷 아이디를 넣으면 안 됩니다.) Ex) http://dev-front-itam.store-admin.s3-website.ap-northeast-2.amazonaws.com/
- 다른 부분은 굳이 입력하지 않아도 됩니다.
여기에서 버킷을 안 넣고 주소를 넣는 웹서비스이기 때문입니다. 특히 권한 문제.
- Viewer Protocol Policy Redirect HTTP to HTTPS 을 선택해주세요.
- Object Caching caching에 대한 설정을 다르게 하고 싶으시면 이 부분을 Customize로 설정후 아래의 활성화된 값을 넣으면 됩니다. 굳이 안 하려면 위의 사진과 같이 확인하시면 되요.
- Price Class 기본값인 Use All Edge Locations를 선택합니다. 물론 나의 타깃은 확고하고 정해져 있다고 하면 다른 값으로 설정하셔도 됩니다.
- Alternate Domain Names (CNAMEs) 서비스할 도메인을 넣으면 됩니다. 복수도 가능합니다. 여러 개의 도메인을 사용 시 한 줄 씩 쓰면 됩니다. Ex) dev.example.com
- 서비스할 도메인이 있을시 SSL Certificate의 Custom SSL Certificate (example.com) 을 선택 후 인증서를 넣으면 됩니다. (인증서는 바로 아래의 버튼을 클릭 후 설정이 가능합니다.)
여기까지 왔으면 다 온 거라고 보시면 돼요. 여기서는 간단하게 Comment만 적어 두고 끝내면 됩니다. (관리하기 편하게 해당 서비스명을 넣는걸 추천해 드립니다.)
2) SPA 관련 세팅
SPA는 말 그대로 싱글 페이지 애플리케이션이기 때문에 모든 부분을 index.html 가게 해야 됩니다. 지금 이 설정을 하지 많으면 404 에러가 뜨게 됩니다.
위의 Create Custom Error Response를 클릭 해주세요.
위의 사진과 같이 404 관련된 에러는 전부 /index·html로 가게 해주면 됩니다. 여기에서 주의 깊게 볼 부분은 꼭 TTL은 0으로 세팅해주셔야 됩니다. 안 그러면 기다림이 발생합니다.
Route53
여기에서는 DNS 설정이 대한 부분은 제외하고 설명하겠습니다. 되게 간단합니다.
- 이름에 서브 도메인을 입력합니다(CloudFront에서 넣은 도메인명).
- 별칭을 클릭하면 Cloudfront영역에 선택 할 수 있는 주소가 생성되어 있습니다. 해당 부분을 선택합니다.
위와 같이 하면 Route 53은 설정이 끝납니다.
마치며
처음 하는 입장이면 생각보다 어렵다고 느껴지실 수 있습니다.
직접 해보고 익숙해지면 쉽게 하실 수 있다는 생각이 듭니다. 위의 CloudFront 부분에서 도메인 인증서 하는 부분이 빠지긴 했지만, 그 부분은 그냥 버튼을 클릭 한 후에 하라는 대로 따라 하면 됩니다.