본문 바로가기
CS/Cloud

AWS Amplify 로 AWS 웹앱 구현하는 방법

by Warehaus 2024. 3. 23.

Photo by Luca Bravo on Unsplash

 

 

AWS Amplify

 

AWS Amplify는 프런트엔드 웹 및 모바일 개발자들이 클라우드 기반 애플리케이션을 쉽게 구축, 연결 및 호스팅 할 수 있도록 도와주는 JavaScript 라이브러리입니다.

 

AWS 는 Amplify 를 통해 클라우드 내에서 앱을 빌드하는데 필요한 모든 기능들을 제공합니다.

 

 

AWS Amplify를 사용하면 다음과 같은 기능을 수행할 수 있습니다.

 

  1. 프런트엔드 및 백엔드 연결: Amplify를 사용하여 프런트엔드 애플리케이션과 백엔드 서비스를 연결할 수 있습니다. 데이터베이스, 인증, 스토리지 등과 같은 백엔드 기능을 쉽게 추가할 수 있습니다.

  2. 호스팅 및 배포: Amplify를 사용하여 프런트엔드 웹 앱을 빠르고 안전하게 배포하고 호스팅 할 수 있습니다. CI/CD 워크플로를 통해 프런트엔드 변경 사항을 자동으로 배포할 수 있습니다.

  3. 확장성: Amplify는 수백만 명의 사용자에게 확장 가능한 앱을 구축할 수 있도록 지원합니다. 서버리스 아키텍처로 제공되므로 사용량에 따른 요금으로 비용을 지불하면 됩니다.

 

Amplify는 풀 스택 웹 및 모바일 앱 개발을 가속화할 수 있는 강력한 도구입니다.

클라우드 전문 지식이 필요하지 않으며, 간편하게 시작하고 확장할 수 있습니다.

 

200개가 넘는 각종 AWS 서비스에 연결이 가능하며 새로운 기능의 구현, DevOps 사례 그리고 사용자 증가에 대응 가능합니다. 

 

반응형

 

AWS Amplify 예시

출처: AWS

 

 

위 아키텍처는 AWS Amplify 를 이용한 웹 애플리케이션 예시입니다. 위 예시를 바탕으로 Amplify가 어떻게 동작하는지 설명드리려 합니다.

 

AWS의 Hands-on Tutorials 페이지에 Serverless 자습서 항목으로 추가되어 있어 비용없이 어플리케이션을 구성해 볼 수 이있습니다.

 

 

위의 아키텍쳐에서 구현하고자 하는 시나리오는 사용자를 통해 이름을 입력받아 정보를 데이터베이스에 저장하고, 요청이 처리되었다는 Toast 메시지를 띄우게 됩니다.

 

해당 과정에서 웹 페이지를 구성하는 데에는 AWS amplify가 사용되고, 데이터의 처리는 AWS Lambda 가 수행하게 됩니다.

 

위 아키텍처에 그려 진 각 AWS Product가 어떻게 동작하는지에 대한 설명은 아래와 같습니다.

 

 

1. AWS Amplify

 

구현된 웹페이지를 실행하여 사용자가 접속 시 해당 페이지를 조회할 수 있도록 합니다.

위 예시에서는 구현된 웹 페이지를 Amplify에. zip 파일로 압축하여 등록하면 Amplify는 해당 파일을 바로 페이지로 만들어줍니다. Amplify는 웹애플리케이션 페이지 URL을 제공하며, 해당 접속주소에 사용자가 접근하여 페이지 활용이 가능합니다.

 

 

2. Amazon API Gateway

 

API Gateway는 Amplify의 웹페이지가 AWS내의 기능들을 Trigger 하기 위해 사용합니다.

Amplify는 새로 구성한 API Gateway 호출을 위한 URL을 가지고 있으며 사용자의 특정 행동에 따라 API Gateway는 호출됩니다.

 

 

3. AWS Lambda

 

프런트엔드 단에서 사용자는 API Gateway를 호출하지만, 요청을 받은 API Gateway는 해당 요청에 의해 Lambda를 수행합니다.  Lambda 함수는 인증여부에 따라 DB에 데이터를 저장 가능합니다.

 

 

4. IAM

 

DynamoDB에서 수행을 허락할 기능(Action) 들을 정의합니다.

정의되지 않은 Action은 수행되지 않습니다.

 

 

5. DynamoDB

 

테이블을 생성하고 웹페이지를 통해 입력되는 데이터를 DB에 저장합니다.

 

 

 

 

[CS/AWS] 아마존 웹 서비스 신규 계정생성과 Free Tier 이용하기

 

[CS/AWS] 아마존 웹 서비스 신규 계정생성과 Free Tier 이용하기

올해에는 토이 프로젝트를 작게나마 시작해 볼 마음으로 AWS가입을 했다. AWS가입은 이메일 주소와 신용카드만 있으면 그렇게 어렵지 않게 진행이 가능하다. 아래에 사진 순서대로 설명을 해 두

armin.tistory.com

 

[CS/AWS] 아마존 웹 서비스 EC2 에서 Amazon Linux 생성하기

 

[CS/AWS] 아마존 웹 서비스 EC2 에서 Amazon Linux 생성하기

안녕하세요 Warehouse입니다. 22년을 맞아 작은 토이프로젝트를 진행해 보고자 AWS 에 계정을 새로 만들고 EC2를 만들어 봤습니다. 우선은 AWS에 로그인하고 AWS Management Console 을 보면 "Launch a virtual mach

armin.tistory.com