오늘은 aws-cloudfront에 대해서 설명하고자 합니다.
AWS CloudFront와 Aws Amplify는 웹 애플리케이션의 성능을 향상시키고 전 세계적으로 빠른 속도로 콘텐츠를 전달하는 데 도움이 되는 강력한 서비스입니다. 오늘은 AWS CloudFront와 AWS Amplify에 대해서 소개하고 실무에서 어떻게 쓰이는지를 설명해드리겠습니다.
-
AWS CloudFront는 전 세계적으로 콘텐츠를 안정적이고 빠르게 전달하기 위한 CDN(Content Delivery Network) 서비스입니다.
- CloudFront를 사용하여 웹 애플리케이션의 정적 및 동적 콘텐츠를 Edge Locations에 캐싱하고, 사용자가 최적의 지역에서 콘텐츠를 받을 수 있도록 합니다.
- AWS Amplify는 서버리스 아키텍처를 지원하는 풀 스택 프레임워크로, 모바일 애플리케이션 및 웹 애플리케이션의 빠른 개발과 배포를 가능하게 합니다. Amplify를 사용하여 웹 애플리케이션을 간편하게 호스팅하고 관리할 수 있습니다.
- AWS CloudFront와 AWS Amplify의 연동: AWS CloudFront와 AWS Amplify를 함께 사용하면, 정적 자원을 CloudFront로 캐싱하고 동적 콘텐츠는 Amplify로 관리하여 웹 애플리케이션의 성능을 최적화할 수 있습니다. 이를 통해 더 빠른 로딩 속도와 효율적인 콘텐츠 전달이 가능해집니다.
회사에서 AWS CloudFront와 AWS Amplify를 적용하는 전략은 다음과 같습니다:
- 프론트 개발: 로컬에서 개발하고 GitHub에 코드를 반영합니다.
- Amplify 연결: GitHub에 반영된 코드를 Amplify와 연결하여 자동으로 빌드와 배포를 수행합니다.
- 자동 배포: Amplify를 통해 빌드가 완료되면, AWS CloudFront에 해당하는 주소로 자동으로 배포됩니다.
- 최종 배포: AWS ECS 또는 AWS EC2에 프론트 서버가 최종 배포됩니다.
다음은 회사에서 AWS CloudFront와 AWS Amplify를 쓰면서 발생하는 상황을 알려드고자 한다.
상황
- 로컬 개발해서 github 반영
- 깃헙에 반영된 것은 통해서 Amplify로 배포
- AWS Ampify로 자동 배포됨
- 배포된 주소 : https://{baseUrl}/endpoint
- 접속 시 특정 api 호출이 안되는 현상 http://localhost:3000/v2/api/token/test?user_id=1740166
문제
CloudFront에서 “403 오류 – 요청을 충족할 수 없습니다. 요청이 차단됨”을 해결하려면 어떻게 해야 합니까?
간단한 설명
오류 메시지 “403 오류 – 요청을 충족할 수 없습니다. 요청이 차단되었습니다.” 클라이언트의 오류입니다. 이 오류는 CloudFront 배포와 연결된 AWS WAF 규칙 의 기본 작업으로 인해 발생할 수 있습니다 . 다음 설정으로 인해 Request Blocked 오류가 발생할 수 있습니다.
- 기본 작업이 AllowAction 이 Block로 설정된 경우 요청은으로 설정된 규칙과 일치합니다 .
- 기본 동작이 차단차단 으로으로 설정된 경우 요청은 동작이설정된 규칙의 조건과 일치합니다 .
- 또는-
- 기본 작업이 차단작업이 허용으로 설정된 경우 요청은으로 설정된 규칙의 조건과 일치하지 않습니다 .
다른 유형의 403 오류 문제 해결에 대한 자세한 내용은 CloudFront에서 403 오류를 해결하려면 어떻게 해야 합니까? 를 참조하십시오.
해결
차단된 요청 오류를 해결하려면:
- CloudFront 콘솔을 엽니다 .
- 업데이트하려는 배포의 ID를 선택합니다.
- 동작탭을 선택합니다 .
- 동작 생성
- http://localhost:3000/v2/token/test?user_id=1740166 허용
- 다른 설정방식은 해당 호출과 같은 설정 방식으로 적용
문제 해결 및 도출하는 방식
로컬에서 환경과 배포된 환경은 같다
같은 테스트를 했을 때 로컬에서 api 호출은 되었지만 배포된 주소에서 호출은 안되었다.
배포된 주소를 다시 적용할 때 테스트 확인
403 에러 요청 실패 CloudFront
상황
배포 시 빌드 에러 나는 현상
에러 코드
2023-08-03T05:04:53.826Z [WARNING]: error Command failed with exit code 1. 2023-08-03T05:04:53.826Z [INFO]: info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. 2023-08-03T05:04:53.831Z [ERROR]: !!! Build failed 2023-08-03T05:04:53.832Z [INFO]: Please check the supported SSR features to find if your build failure is related to an unsupported feature: https://docs.aws.amazon.com/amplify/latest/userguide/ssr-Amplify-support.html#supported-unsupported-features. You may also find this troubleshooting guide useful: https://docs.aws.amazon.com/amplify/latest/userguide/troubleshooting-ssr-deployment.html 2023-08-03T05:04:53.832Z [ERROR]: !!! Non-Zero Exit Code detected 2023-08-03T05:04:53.832Z [INFO]: # Starting environment caching... 2023-08-03T05:04:53.832Z [INFO]: # Environment caching completed Terminating logging...
해결 방식
- 모든 앱 > [프로젝트 이름]> 앱 설정: 환경 변수 > Edit
새로운 api 호출 변수
문제 도출 방식
- 로컬과 개발에서 적용은 같은데 같은 빌드를 적용했을 때 왜 배포된 주소만 안되었을 까?
- Non-Zero Exit Code detected는 소스상의 문제가 아닌 외부 설정과정에서 문제가 발생
- 외부 환경 변수 적용 확인
결론
AWS CloudFront와 AWS Amplify를 함께 사용하다가 발생할 수 있는 상황 중 하나로 “403 오류 – 요청을 충족할 수 없습니다. 요청이 차단되었습니다.” 오류가 있습니다. 이 오류는 CloudFront 배포와 연결된 AWS WAF 규칙의 기본 작업으로 인해 발생할 수 있습니다. 이러한 경우 CloudFront 콘솔을 통해 규칙과 동작 설정을 확인하여 문제를 해결해야 합니다.
또 다른 상황으로는 배포 시 빌드 에러가 발생하는 경우가 있습니다. 이 때는 AWS Amplify 환경 변수를 확인하여 외부 설정과정에서 문제가 발생했는지 확인해야 합니다.
결론적으로 AWS CloudFront와 AWS Amplify는 웹 애플리케이션의 성능 최적화와 빠른 콘텐츠 전달에 큰 도움이 되며, 적절한 설정과 모니터링을 통해 웹 애플리케이션의 성능을 높이고 사용자 경험을 향상시킬 수 있습니다.
추가 내용
[AWS-1]elastiCache vs Redis 에 들어가시면 AWS 관련된 다른 내용을 보실 수 있습니다.