- 사용자 등록 및 인증을 하게하여 누가 어떤 사진 앨범의 소유자인지 알 수 있습니다.
- API 서버를 구현해서 사용자가 소유한 앨범과 사진들을 로딩하여 보여줄 수 있습니다.
- 누가 무엇을 볼 수 있는가에 대한 권한 정보, 앨범 정보, 사진 정보를 저장하기 때문에 API는 데이터를 빠르게 조회하고 저장하는 신뢰성있는 저장소를 갖습니다.
- 사용자가 앨범에 업로드하는 모든 사진을 저장하는 공간이 생깁니다. (S3)
- 자동으로 사진 썸네일(미리보기)을 생성하므로 사용자가 앨범 목록을 조회했을때, 전체 해상도의 사진까지 목록으로 전달할 필요가 없습니다.
- 업로드한 사진과 관련한 레이블을 자동으로 감지하고 레이블을 기반으로 사진 검색이 가능합니다.
사용도구
- AWS Amplify CLI는 클라우드 서비스를 빠르게 프로비저닝하고 구성합니다.
- AWS Amplify JavaScript 라이브러리는 프론트와 클라우드리소스를 연결합니다.
- Amazon Cognito는 사용자 등록과 인증을 처리합니다.
- Amazon Simple Storage Service (S3)는 사용자가 업로드한 많은 사진을 저장하고 제공하며 어플리케이션의 정적 에셋을 호스팅합니다.
- Amazon DynamoDB는 사진과 앨범 데이터에 대한 API 쿼리를 수밀리초 응답으로 제공합니다.
- AWS AppSync는 프론트엔드에 GraphQL API를 호스팅합니다.
- AWS Lambda는 클라우드에서 사진의 썸네일을 비동기적으로 생성합니다.
- Amazon Rekognition는 업로드한 사진의 연관된 레이블을 감지합니다.
- Amazon Elasticsearch Service는 사진의 레이블을 검색하고 색인을 생성합니다.
AWS cli 를 설치후
pip install --user --upgrade awscli
nvm을 설치합니다.
https://rainbound.tistory.com/243
nvm 설치(Mac OS)
Node Version Manager node.js 관리하는 프로그램인것 같네요. nvm을 설치해보면 이런 메세지가 나옵니다. mkdir ~/.nvm ~/.zshrc를 아래와 같이 수정 export NVM_DIR="$HOME/.nvm" [ -s "/usr/local/opt/nvm/nvm..
rainbound.tistory.com
필요하다면 npm을 업데이트 합니다.
npm install -g npm
아래 명령어로 node.js를 설치합니다.
# Install and use Node.js v8.11 (to match AWS Lambda)
nvm install v14
nvm alias default v14.x.x(위에서 설치된 버전을 적으시면 됩니다.)
lambda에서 14.X 버전을 지원한다고 하니 14.17.5를 설치 하였습니다.
너무 낮으면 amplify init이 되지 않습니다.
그리고 amplify cli를 설치해줍니다.
npm install -g @aws-amplify/cli
마지막으로 command line 으로 json 을 컨트롤 하기위해 jq를 설치합니다.
sudo yum install jq -y
사전구성
nodejs 패키지를 설치합니다.
npx create-react-app photo-albums
그리고 semantic react ui 도 설치하구요
npm install --save semantic-ui-react
semantic ui를 적용하기 위해서 다음을 추가합니다.
public/index.html
<head>
<!-- ... -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.css"></link>
<!-- ... -->
</head>
그리고 이제 실행해봅시다!
npm start
기본화면이 잘 출력되는 것을 볼 수 있습니다.
간단하게 출력하기 위해 app.js를 수정합니다.
src/App.js 수정
import React, { Component } from 'react';
import { Header } from 'semantic-ui-react';
class App extends Component {
render() {
return (
<div>
<Header as='h1'>Hello World!</Header>
</div>
);
}
}
export default App;
출력이 잘 되는것을 볼수 있습니다!
Reference
create-react-app은 https://github.com/facebook/create-react-app에서 좀 더 배울 수 있습니다.
이 자습서를 보고 참고하였습니다.
이건 버전이 좀 예전꺼라 설치 버전이 안맞아 오류가 많이 납니다.
Amplify + AppSync Workshop
무엇을 빌드하나 목표 이 워크샵에서 다음을 포함한 몇 가지 기능이 있는 어플리케이션을 빌드합니다. 사용자 등록 및 인증을 하게하여 누가 어떤 사진 앨범의 소유자인지 알 수 있습니다. API
awskrug.github.io
'CLOUD > AWS' 카테고리의 다른 글
| Amplify CLI init 오류(syntax) (0) | 2021.08.31 |
|---|---|
| [Amplify사진] 인증 추가하기 (0) | 2021.08.31 |
| AWS Lambda 란? (기능, 장점, 단점) (0) | 2021.08.30 |
| Canary 배포 - Rollbacks (0) | 2021.08.24 |
| Canary 배포 - Sam 탬플릿 업데이트 및 Canary 모니터링 (0) | 2021.08.24 |
댓글