AWS Amplify+Admin UI 휴대용

개시하다

2021/4/24(토요일) 다음 Harson에 참가할 때의 내용 요약.
AWS의 기본을 학습하고 특별편 최신 서비스의 Amplify+Admin UI를 만나보십시오.

개요

AWS Amplify에 Todo 목록을 설치한 후
Amplify 콘솔에서 Admin UI를 시작하여 애플리케이션의 관리 화면을 만들고 편집합니다.

AWS Amplify 소개

웹 및 모바일 애플리케이션 개발을 위한 프레임워크
아래 서술한 바와 같이 그 특징은 시간을 쓰지 않고 백엔드를 구축할 수 있다는 것이다

Amplify CLI를 사용하여 여러 명령으로 백엔드 구축

Amplify 라이브러리를 사용하여 어플리케이션과 백엔드를 직관적으로 연결

AWS Amplify Admin UI 소개

AWS 계정을 만들지 않고 응용 프로그램의 서비스를 관리할 수 있습니다.
Admin UI에 초대된 사용자는 AWS 콘솔 외부에서 컨텐트와 백엔드를 관리하고 설정할 수 있습니다.

데이터 모델링

컨텐츠 관리

인증, 승인 및 사용자 관리

Amplify CLI에서 Infrastructure-AS Code

울긋불긋 흐르는 물

Amplify에 Todo 목록 설치

Cloud9 설정

AWS Cloud9에 응용 프로그램을 설치합니다.

Cloud9은 기본적으로 10GB의 용량만 있기 때문에 이것을 증가시킵니다.

$ df
Filesystem     1K-blocks    Used Available Use% Mounted on
/dev/nvme0n1p1  10473452 8414336   2059116  81% /

핸드폰으로 나눠주는 스킨 추가 디스크 공간를 집행한다.

$ sh resize.sh 30

용량이 3배입니다.
비활성화

$ df
Filesystem     1K-blocks    Used Available Use% Mounted on
/dev/nvme0n1p1  31444972 8435560  23009412  27% /

AWS Managed Temporary Credentials.
이걸 하지 않으면 나중에 만든 IAM 이용자들이 제대로 일을 할 수 없게 된다.

Amplify CLI 설치

$ npm install -g @aws-amplify/cli

CLI 설정

$ amplify configure

중간에 보낸 URL에 액세스할 때 CLI 작업용 IAM 사용자 제작 화면이 표시됩니다.
모두 기본값에 따라 AdministratorAccess 권한이 있는 IAM 사용자를 만듭니다.

React 애플리케이션 작성

$ npx create-react-app react-amplified

명령을 실행하면 다음 폴더나 파일이 자동으로 생성됩니다.

프로젝트의 루트 디렉토리로 이동하여 React를 시작합니다.

$ cd react-amplified
$ npm start

완료.

Amplify 초기화

프로젝트에서 Amplify 가져오기

$ amplify init

amplify 폴더가 생성되었습니다.
출력 백엔드의 설정입니다.

Amplify 라이브러리 설치

$ npm install aws-amplify @aws-amplify/ui-react

API 기능 추가

$ amplify add api

GraphiQL을 통해 DynamoDB에 대한 조회를 수행할 수 있는 기능을 추가합니다.

$ amplify add api
? Please select from one of the below mentioned services: GraphQL
? Provide API name: myapi
? Choose the default authorization type for the API API key
? Enter a description for the API key: amplify-cli-user
? After how many days from now the API key should expire (1-365): 7
? Do you want to configure advanced settings for the GraphQL API No, I am done.
? Do you have an annotated GraphQL schema? No
? Choose a schema template: Single object with fields (e.g., “Todo” with ID, name, description)
? Do you want to edit the schema now? Yes
? Choose your default editor: Vim (via Terminal, Mac OS only)

프로그램 설계

$ amplify push

CloudFormation을 통해 AppSync(GraphiQL)와 DynamoDB를 만듭니다.

AppSync

DynamoDB

App.js 를 덮어쓰고 React 를 다시 시작하면 Todo 애플리케이션이 표시됩니다.
데이터를 등록해 보세요.

데이터는 AWS AppSync를 통해 DynamoDB에 추가됩니다.

어플리케이션 공개

$ amplify add hosting
? Select the plugin module to execute Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)
? Choose a type Manual deployment

$ amplify publish

브라우저도 Todo 목록을 엽니다.

Admin UI로 Todo 목록 관리

Admin UI 사용

Amplify 콘솔에서 애플리케이션을 클릭하십시오.(세 개는...)
Enable admin UI (All environments)를 ON으로 설정합니다.

몇 분 후에 Admin UI 화면으로 마이그레이션할 수 있는 버튼이 표시됩니다.튀어나온 점.

Admin UI 액세스

AWS 콘솔 외부에서 자동으로 생성되는 Todo 목록의 관리 화면

데이터 모델링

여기서 업데이트된 데이터는 DynamoDB와 연합됩니다.

테이블 작성

관계

디버그

컨텐츠 관리

테이블을 선택하여 데이터를 편집합니다.

Admin UI를 시작하기 전의 데이터가 표시되지 않습니다.
로그인 데이터.

응용 프로그램에 반영됨

DynamoDB에 포함된 데이터

사용자 초대

초대할 사용자의 메일 주소를 입력하고 권한을 선택하십시오.

Full access: 백엔드 설정 관리·내용 관리

Manageonly: 컨텐츠만 관리

끝말

Amplify와 Admin UI는 직관적으로 조작할 수 있고 나처럼 조작하는 사람도 사용할 수 있다.
그리고 이 정도까지 무료로 사용할 수 있는 기능은 정말 대단하다.[1]
＊＊＊
2h 정도면 앱과 화면 관리를 할 수 있는데 놀랍게도 핸드폰이 끝났어요.😲、
그때 무슨 일이 있었죠?조금이나마 이해하려고 블로그에 정리해봤어요.
Amplify 및 Admin UI 의 큰 상자를 제어할 수 있습니까?
또 명령과 클릭 조작을 통해 뒷면이 어떤 자원이 움직이는지 대체적으로 이해할 수 있다.

참고 자료

[AWS Black Belt Online Seminar] AWS Amplify 자료 및 QA 공개

기본 관리 UI

[간단한 손잡이로 AWS 배우기] AWS Amplify로 Todo 어플을 만들어 보세요!AWS AppSync & Amazon DynamoDB를 통한 실시간 메시지 송수신

각주
Amplify와 Admin UI 자체는 무료이며, Amplify가 제작한 AppSync와 DynamoDB를 사용하는 비용↩︎