aws cloudfront - aws amplify - 개발남 블로그

쉬운 목차

오늘은 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 관련된 다른 내용을 보실 수 있습니다.

aws cloudfront – aws amplify

AWS CloudFront는 전 세계적으로 콘텐츠를 안정적이고 빠르게 전달하기 위한 CDN(Content Delivery Network) 서비스입니다.

상황

문제