신규 AWS Amplify 관리 도구 – 클라우드 경험 없이도 애플리케이션 백엔드 개발 지원

오늘 AWS Amplify에서 애플리케이션 백엔드를 구성하고 AWS 콘솔 외부에서 앱 사용자와 콘텐츠를 관리하는 새로운 관리 UI를 발표했습니다. 이 새로운 기능을 통해 AWS 서비스를 보다 쉽게 사용할 수 있으며 전체 스택 웹 및 모바일 앱의 개발 및 관리를 가속화할 수 있습니다.

2018년 11월에 AWS Amplify를 출시한 이후 AWS는 프런트 엔드 웹 및 모바일 개발자가 클라우드에 연결된 웹 및 모바일 애플리케이션을 신속하게 개발하고 배포할 수 있도록 지원해 왔습니다. 보다 앞서 나가고 고객에게 혁신을 제공하기 위해 기업은 기능을 빠르게 제공해야 합니다. 그러나 AWS의 기본 사항에 익숙하지 않은 개발자와 비개발자에게는 교육이 필요하며, 이로 인해 전체 프로세스가 느려집니다.

AWS Amplify는 오늘 팀 구성원이 AWS 계정 없이도 AWS와 상호 작용할 수 있는 새로운 관리 UI를 출시했습니다 (최초 배포 시에만 AWS 계정 필요).

관리 UI는 데이터베이스 테이블을 모델링하고, 인증 및 권한 부여를 추가하고, 앱 콘텐츠, 사용자 및 그룹을 관리할 수 있는 간단하면서도 강력한 도구를 제공합니다. 또한 애플리케이션 사용자 및 콘텐츠를 관리할 수 있는 기능도 제공합니다. AWS Amplify 관리 UI는 백엔드 인프라가 아닌 데이터 유형에 중점을 둡니다. 모든 백엔드 리소스는 팀 리포지토리에서 커밋하고 AWS Amplify의 지속적인 배포 워크플로와 통합하여 다양한 환경을 관리할 수 있는 코드(IaC) 템플릿으로 인프라를 생성합니다.

새로운 AWS Amplify 관리 UI를 사용한 예 살펴보기
여러분이 지역 레스토랑을 위한 웹 사이트를 생성하는 프런트 엔드 웹 개발자라고 상상해보세요. 레스토랑 소유자는 일별 메뉴를 표시할 수 있는 웹 사이트를 원하고 매일 페이지의 내용을 업데이트할 수 있는 간단한 방법을 원합니다.

이 문제를 해결하는 데는 여러 가지 방법이 있습니다. 서버를 가동하고 레스토랑 소유자가 메뉴를 관리할 수 있도록 CMS를 설치할 수 있습니다. 이 특정 사용 사례의 경우 독점적으로 서버를 사용한다면 리소스를 과도하게 프로비저닝하게 됩니다. 또는 서버리스 도구를 사용하여 직접 CMS를 생성할 수 있습니다. 그러나 이로 인해 개발 주기에 많은 복잡성과 추가 시간이 더해집니다.

또 다른 옵션은 새로운 AWS Amplify 관리 UI를 사용해서 많은 AWS Managed Services를 활용하여 백엔드를 신속하게 생성하고 애플리케이션 사용자 및 콘텐츠를 관리할 수 있는 기능도 제공하는 것입니다.

가장 먼저 해야 할 일은 AWS 콘솔에서 새로운 AWS Amplify 앱 백엔드를 생성하는 것입니다. AWS Amplify는 스테이징이라는 백엔드 환경을 생성합니다. 앱 백엔드가 준비되면 새 관리 UI를 엽니다. AWS에 대한 경험이 없거나 AWS 계정에 대한 액세스 권한이 없는 다른 개발자가 이 애플리케이션 작업을 할 수 있게 하려면 이제 해당 개발자에게 액세스 권한을 부여하여 UI 작업을 계속하도록 할 수 있습니다. 그러나 지금은 여러분이 모든 개발을 할 것이라고 상상해보겠습니다.

관리 UI에는 애플리케이션 개발자가 애플리케이션 백엔드를 구성하는 데 필요한 모든 도구와 콘텐츠 관리자가 애플리케이션 콘텐츠를 업데이트하는 데 필요한 도구가 포함되어 있습니다.

관리 UI의 사이드바(다음 그림 참조)에서 애플리케이션 설정에 대한 다른 모든 옵션을 찾을 수 있습니다.

레스토랑 웹 사이트를 시작하려면 메뉴 데이터 모델이 필요합니다. 이를 위해 먼저 데이터[Data](1)로 이동 한 다음 Menu(2)라는 새 데이터 모델을 만들고 필요한 필드를 추가하고 모델을 저장 및 배포(3)하세요. 모델을 저장하고 배포하면 백엔드에 AWS AppSync API 및 Amazon DynamoDB 테이블과 같이 메뉴 항목을 호스팅하는 데 필요한 모든 AWS 리소스가 생성됩니다. 배포에는 몇 분 정도 걸립니다.

모델을 배포한 후에는 웹 사이트에서 작업을 시작할 수 있습니다. 이 예에서는 AWS Amplify에서 지원하는 웹 프레임워크 중 하나인 React를 사용하겠지만 지원되는 프레임워크 중 어디에서나 동일한 예를 수행할 수 있습니다.

먼저 AWS Amplify CLI를 설치해야 합니다.

npm install -g @aws-amplify/cli

그런 다음 새 React 애플리케이션을 생성합니다.

npx create-react-app react-amplified
cd react-amplified

애플리케이션이 생성되면 방금 생성한 AWS Amplify 애플리케이션으로 이를 구성할 수 있습니다. 이러한 구성을 위해 관리 UI로 돌아가서 [로컬 설정 지침(Local setup instructions)](1)을 선택하고 웹 애플리케이션이 컴퓨터에 저장된 디렉터리에서 amplify 명령(2)을 실행하세요.

이 명령을 실행하면 AWS Amplify 관리 UI에 로그인할 것인지 묻는 브라우저 창이 열립니다. 예를 선택하면 로컬 데스크톱에서 직접 백엔드에 업데이트를 배포할 수 있는 AWS Amplify CLI 액세스 권한이 부여됩니다. CLI는 로컬 환경에 대한 몇 가지 질문을 묻는 메시지를 표시하고 마지막으로 이 백엔드를 로컬로 수정할 것인지 묻습니다. 예를 선택합니다.

프로세스가 끝나면 웹 애플리케이션 디렉터리에 몇 가지 변경 사항이 있음을 알 수 있습니다. 즉, 몇 가지 새로운 디렉터리(amplify 및 src/model)와 새 파일(aws-exports.js)이 생성되었습니다. 이러한 파일 및 디렉터리에는 AWS Amplify 애플리케이션의 모든 구성이 포함됩니다.

이제 애플리케이션을 개발할 차례입니다. 첫 번째 단계에서 생성한 메뉴 데이터 모델에 액세스하려면 AWS Amplify의 데이터 스토어 라이브러리를 사용합니다. 데이터 스토어를 사용하면 배포된 데이터베이스에 연결하고 UI에서 CRUD, 정렬 및 필터 작업을 수행하여 백엔드 데이터를 조작할 수 있습니다. 관리 UI에서 모델을 생성, 업데이트, 삭제 및 쿼리하는 방법에 대한 몇 가지 예를 볼 수 있습니다.

웹 사이트가 준비되면 일부 콘텐츠를 추가할 차례입니다. 메뉴 항목은 레스토랑 소유자가 추가합니다. 항목을 추가하기 위해서는 이 애플리케이션의 관리 UI에 액세스할 수 있는 권한이 있어야 합니다.

이렇게 하려면 올바른 권한을 가진 레스토랑 소유자를 위한 새 관리 UI 계정을 생성해야 합니다. 애플리케이션의 AWS Amplify 콘솔로 이동한 다음 [관리 UI 관리(Admin UI management)]로 이동하여 사용자를 초대합니다.

관리 UI에 새 사용자를 추가할 때 사용 권한 범위를 정의할 수 있습니다. [모든 권한(Full Access)]을 부여하려면 사용자는 애플리케이션 백엔드 환경을 구성 및 관리할 수 있으며, 콘텐츠 편집 권한만 부여하려는 경우에는 [관리 전용(Manage Only)] 액세스 범위를 제공할 수 있습니다. 레스토랑 소유자에 대해서는 관리 전용 권한만 부여합니다.

초대를 보내면 레스토랑 소유자는 관리 UI에 액세스할 수 있는 링크와 로그인할 수 있는 사용자 이름 및 암호가 포함된 이메일을 받게 됩니다. 로그인하면 [콘텐츠(Content)] 탭(1)으로 이동하여 메뉴(2)에 항목을 추가하고 화면의 테이블에서 사용할 수 있는 항목(3)을 볼 수 있습니다.

이 화면에서 레스토랑 소유자는 언제든지 메뉴에서 항목을 추가, 삭제 및 편집할 수 있습니다. 이러한 변경 사항은 저장 직후 웹 사이트에 반영됩니다.

관리 UI의 사용 사례는 블로그, 전자 상거래 사이트, 계획 앱 등과 같이 무한합니다. 개발자는 클라우드 인프라를 배포하고 연결하는 데 시간을 소비하지 않고 도메인별 데이터 모델에 집중하여 복잡하고 기능이 풍부한 앱을 빌드할 수 있습니다. AWS Amplify는 프런트 엔드 개발자에게 모바일 및 웹 앱을 가장 빠르고 쉽게 개발할 수 있는 방법을 제공합니다. 클라우드에 익숙하지 않은 개발자들도 모두 액세스할 수 있으며, 팀 내 모든 사람에게 AWS 액세스 권한을 부여할 필요가 없습니다.

가용성
AWS Amplify 관리 UI는 미국 동부(버지니아 북부), 미국 동부(오하이오), 미국 서부(오레곤), 아시아 태평양(뭄바이), 아시아 태평양(서울), 아시아 태평양(싱가포르), 아시아 태평양(시드니), 아시아 태평양(도쿄), 캐나다(중부), EU(프랑크푸르트), EU(아일랜드), EU(런던) 리전에서 사용할 수 있습니다.