S3 + Cloudfront 를 사용한 프론트 서버 띄우기

간단한 REACT 앱을 서버에 올리도록 해보자.

사용할 AWS 리소스는 S3, CloudFront 2가지 인데 각각의 역할은 다음과 같다.

S3: 정적 웹사이트 호스팅 기능을 제공하는데 정적 파일을 업로드 하면 이를 웹 서버로 사용 할 수 있다.
CloudFront: 캐시 서버로 사용자와 S3 사이에서 속도를 빠르게 할수 있고 HTTP 호출을 HTTPS 로 적용하여 보안을 강화 할수도 있다.

S3

먼저 설정을 진행하도록 한다.

1. 버킷 생성

• S3 페이지에 접속하여 버킷 만들기 버튼 클릭
  
• 버킷의 이름과 리전을 선택해 준다.
  
• S3 로만 서버를 사용하려면 해당 버킷이 웹사이트가 되기 때문에 퍼블릭 엑세스가 가능해야 한다.
  하지만 cloudFront 를 붙이게되면 사용자가 S3의 객체에 직접 접근하는것이 아니라 cloudFront를 통해 캐시된 CDN 서버에서만 접근을 가능하게 하기 때문에 모든 퍼블릭 엑세스를 차단하도록 설정한다.
  
• 나머지는 모두 기본값으로 설정 후 하단의 생성 버튼 클릭

2. 객체 업로드

• 테스트 리엑트 코드를 빌드한 후 build 폴더에 생성된 파일을 업로드 해준다.
  

3. 정적 웹 사이트 호스팅 설정

• 웹서버로 만들어주기 위해 정적웹사이트 호스팅 설정을 해주어야 한다.

• 생성한 버킷을 클릭하여 준 후 속성 탭을 클릭한다.
  

• 속성탭의 제일 하단에 정적 웹 사이트 호스팅 기능이 있는데 현재 비활성으로 되어있다.
  편집 버튼을 눌러준다.
  

• 정적 웹 사이트 호스팅을 활성화 해주고 인덱스 문서를 설정해 준 후 하단의 변경사항 저장 버튼을 클릭해준다.
  

• 설정이 되고 저장후 버킷 웹 사이트 엔드포인트 가 나오는데 해당 주소를 호출하여 업로드한 리엑트 서버를 접속할 수 있다.
  

• 하지만 해당 주소로 접속을 하게 되면 403 에러가 발생되는데 이는 버킷에 업로드된 객체에 접근권한이 없어 페이지 노출이 되지않는 문제다.
  

4. 객체 권한 설정

• S3 의 객체 접속 권한을 주기 위해 권한 탭으로 이동 후 버킥 정책 영역의 편집 버튼을 클릭해준다.
  

• 정책 생성기 버튼을 클릭 후 노출되는 페이지에서 다음 설정을 진행한다.
  
  : Select Type of Policy: S3 Bucket Policy
  : Principal: *
  : Actions: GetObject
  
  : Amazon Resource Name(ARN): 이전 페이지의 arn 정보를 복사해서 넣어준다.

• 값을 모두 입력후 Add Statement 버튼 클릭 후 하단에 생성되는 Generage Ploicy 버튼 클릭
  

• 출력되는 정보를 복사해서 이전 페이지의 버킷 정책 항목에 입력해준 후 하단의 변경 사항 저장 버튼 클릭
  ( 정책을 붙여 넣기 할때 Resource 에 /* 를 추가해주어야 정상적인 파일 접근이 가능하다 )
  
  

• 다시 버킷 웹 사이트 엔드포인트를 호출하여 정상적으로 페이지 접속이 되는지 확인한다.

CloudFront

S3 설정이 끝났다면 실제 사용자가 접속할 캐시 서버인 CloudFront 설정을 해주자.

• cloudFront 접속후 배포 화면에서 우측 상단 "배포생성" 버튼을 클릭해준다.
  
• 원본도메인은 조금전 생성한 S3 를 선택
  (현재 올리고 있는 웹사이트는 도메인이 없지만 도메인이 있는경우 웹사이트 엔드포인트 사용을 해주어야 한다. )
  
• 원본엑세스는 권장 설정인 "원본 엑세스 제어 설정" 으로 설정 후 우측의 "제어 설정 생성"버튼을 클릭하여 기본값으로 저장후 설정을 진행해준다.
  
• Origin Shield 를 활성화 하고 가까운 리전으로 선택해준다.
  (설명대로 부하를 줄이고 속도를 향상시키지만 비용이 발생되므로 비용 발생을 원하지않는경우 활성화하지 않는다. )
  
• HTTP 접속은 보안상 권장되지않으므로 HTTPS 접속을 위한 뷰어 프로토콜 정책을 "Redirect HTTP to HTTPS" 로 설정해준다.
  
• 기본값 루트객체는 앱에 접속하는 기본 페이지로 설정해주면 된다.
  
• 하단의 배포 생성 버튼을 클릭하여 배포.
• 생성된 배포 세부정보의 배포 도메인 이름 을 호출하여 업로드한 앱이 정상적으로 실행되는지 확인한다.
  

경로 접근시 오류?

• 배포된 CloudFront 호출시 루트 경로로 접속을 하면 데이터가 잘 나오는데, 경로로 접근시 오류 페이지가 출력될수 있다.
  (SPA 앱 배포시 해당 문제 발생됨 )
  
• 이 문제는 cloudFront 에서 S3 로 요청을 할때 경로를 통한 파일을 호출하도록 하는데 SPA 앱은 호출경로에 파일이 생성되어있지 않기 때문이다.
  SPA : /user 호출시 index 에서 user component 를 바인딩.
  S3 : /user 호출시 /user 폴더의 index 파일을 찾아 호출
• 이 경우 S3 는 찾는 경로에 파일이 없으므로 403 에러를 출력하게 되는데 이게 위에서본 AccessDenied 오류다.
• S3는 찾는 파일이 없으면 403 오류를 호출하기 때문에 CloudFront 에서 403 에러시 index 를 호출하도록 수정해주면 해당 문제는 해결된다.

해결

• CloudFront 의 오류 페이지 탭의 사용자 정의 오류 응답 생성 버튼을 클릭한다.
  
• 화면의 값을 아래와 같이 설정해준다
  HTTP 오류 코드 : 403
  오류 응답 사용자 정의: 예
  응답페이지 경로: /index.html
  HTTP 응답 코드: 200
  
• 값을 수정해도 바로 오류가 해결되지 않는다
  이유는 CloudFront 가 캐시서버이기 때문에 이전 호출되던 캐시가 남아있어서 이전 데이터가 호출되기 때문이다.
• 이 경우 무효화 처리를 진행하여 캐시 초기화를 해준다.
• 무효화 탭 이동 → 무효화 생성 버튼 클릭
  
• 경로를 입력해야 하는데 전체 경로로 설정 후 하단의 무효화 생성 버튼을 클릭한다.
  
• CloudFront 는 특정 리전의 서비스가 아니라 글로벌 서비스 이기 때문에 처리되는데 시간이 좀 걸린다.
• 진행이 완료되면 오류가 발생되었던 경로 호출이 정상적으로 되는지 확인한다.