소개

Elasticsearch를 사용하여 인벤토리 데이터를 빨리 검색하고 필요한 정보를 검색하는 앱을 0~1일 내에 만드는 단계입니다. 소지품이나 지식을 분류 데이터화한 것을 PC나 스마트폰으로부터 검색할 수 있도록 합니다. 당연히 데이터 자체는 직접 준비해야합니다.

만들 것

백엔드는 Amazon Elasticsearch Service를 제공하며 데이터는 거기에 축적됩니다.
프런트 엔드는 브라우저에서 실행되는 React 앱으로 Reactivesearch라는 구성 요소를 활용하여 Elasticsearch Service의 데이터를 검색할 수 있도록 합니다. 브라우저 (자바 스크립트)에서 직접 Elasticsearch Service에 액세스합니다.
또한 React 앱을 자동으로 빌드하고 배포하는 환경도 Codepipeline에서 만듭니다.

앱의 화면 이미지

(이 화면은 인벤토리 관리가 아니지만 유용 할 수 있다고 생각합니다)

인프라 개요도

환경

Elasticsearch v7.4
Node.js v13.10.1
React v16.13.0
Reactivesearch v3.5.0

절차

자세한 순서를 기술한 기사를 이 순서로 해 나가면 만들 수 있습니다. 오른쪽 끝의 시간은 순조롭게 진행될 때의 기준 시간입니다.

Amazon Elasticsearch Service에서 검색할 수 있는 상태까지 가장 빠른 시작 (30분)

React 버전 Reactivesearch v3을 사용하여 처음부터 가장 빠른 Elasticsearch 전면 앱 만들기 (1시간)

React 버전 Reactivesearch 앱을 iPhone 세로에서도 쉽게 볼 수 있습니다. (15분)

AWS S3+ CloudFront에서 React 앱을 HTTPS 게시하기 위한 올바른 구성 (1시간)

AWS Codepipeline을 사용하여 React 앱의 CI 환경을 처음부터 생성 (1시간)

Brackets 편집기에서 git push 버튼으로 자동으로 배포되는 CI 환경 만들기 (15분)

번외편

이번에는 대응하고 있지 않습니다만, 파생으로의 참고 기사입니다.

Amplify를 사용하면 이번과 동등한 환경을 더욱 쉽게 만들 수 있습니다. 그러나 제약이 있습니다.
AWS Amplify Console을 사용하여 React 앱의 CICD 환경을 10분 내에 생성

Elasticsearch Service에 인증을 하고 싶은 곳입니다만, 이번은 제약으로부터 보냈습니다.
Amazon Elasticsearch Service의 Kibana Cognito 인증 설정을 0에서 최소한의 설정으로 구현