Frontend 개발 후 AWS에 서비스 배포하기


Frontend(vue, react, angular 등등)를 개발을 하고 서비스를 하기 위한 AWS 환경 설정 및 배포에 대해서 글을 남깁니다.

아키텍처

단순하게 SSR이 아니기 때문에 따로 서버를 두고 관리하기 보다는 S3에 파일을 올리고 그에 맞게 CDN인 Coundfront와 연결 후 Route53을 이용해서 도메인까지 연결하는 구조로 생각을 했습니다. 그리고 배포 시스템으로는 Codepipeline을 이용해서 배포 하는 방법을 채택했습니다.

개발자

  1. 개발 소스 GitHub 배포
  2. CodePipeline에서 Webhook을 이용 Github 확인
  3. CodeBuild를 이용하여 빌드(ex. npm run build와 같은 것 등등)
  4. CodeDeploy를 이용해서 S3 배포
  5. S3를 배포가 완료 되면 Lambda를 실행 시켜 CloudFront 캐시 초기화

고객

  1. www.example.com 접속시 DNS 접속(Route53)

  2. Route53에 연결된 CNS(CloudFront) 호출

  3. 캐싱이 되어 있으면 캐싱된 부분으로 리턴 안되어 있으면 S3 접근 후 리턴

아키텍처에 따른 환경 설정

CloudFormation을 이용해서 배포 하는 방법이 있지만 아직 그 부분은 익숙하지 않아서 아래와 같이 직접 배포를 하게 되었습니다.

1. S3

1) 저장소 생성

위의 이미지의 버킷 만들기를 클릭 후 배킷을 생성 합니다.

생성시 꼭 퍼블릭 액세스 차단은 비활성화를 하셔야됩니다.

2) 정책 설정

만든 버킷에 접속 후에 해당 권한 탭 -> 버킷 정책을 클릭후 아래와 같은 정책을 입력 합니다. 그냥 해당 정책은 읽기 권한을 퍼블릭하게 오픈 한다는 의미 입니다.

1
2
3
4
5
6
7
8
9
10
11
12
{
"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이니깐요)

  1. Origin Domain Name
    여기에 위의 S3 속성 설정의 앤드포인트(URL주소)를 가지고 와서 붙여넣기 합니다. (url 주소를 넣는 거지 버킷 아이디를 넣으면 안 됩니다.)
    Ex) http://dev-front-itam.store-admin.s3-website.ap-northeast-2.amazonaws.com/
  2. 다른 부분은 굳이 입력하지 않아도 됩니다.

여기에서 버킷을 안 넣고 주소를 넣는 웹서비스이기 때문입니다. 특히 권한 문제.

  1. Viewer Protocol Policy
    Redirect HTTP to HTTPS 을 선택해주세요.
  2. Object Caching
    caching에 대한 설정을 다르게 하고 싶으시면 이 부분을 Customize로 설정후 아래의 활성화된 값을 넣으면 됩니다. 굳이 안 하려면 위의 사진과 같이 확인하시면 되요.

  1. Price Class
    기본값인 Use All Edge Locations를 선택합니다. 물론 나의 타깃은 확고하고 정해져 있다고 하면 다른 값으로 설정하셔도 됩니다.
  2. Alternate Domain Names (CNAMEs)
    서비스할 도메인을 넣으면 됩니다. 복수도 가능합니다. 여러 개의 도메인을 사용 시 한 줄 씩 쓰면 됩니다.
    Ex) dev.example.com
  3. 서비스할 도메인이 있을시 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 설정이 대한 부분은 제외하고 설명하겠습니다. 되게 간단합니다.

  1. 이름에 서브 도메인을 입력합니다(CloudFront에서 넣은 도메인명).
  2. 별칭을 클릭하면 Cloudfront영역에 선택 할 수 있는 주소가 생성되어 있습니다. 해당 부분을 선택합니다.

위와 같이 하면 Route 53은 설정이 끝납니다.

마치며

처음 하는 입장이면 생각보다 어렵다고 느껴지실 수 있습니다.

직접 해보고 익숙해지면 쉽게 하실 수 있다는 생각이 듭니다. 위의 CloudFront 부분에서 도메인 인증서 하는 부분이 빠지긴 했지만, 그 부분은 그냥 버튼을 클릭 한 후에 하라는 대로 따라 하면 됩니다.

Share Comments