LoginSignup
5

More than 3 years have passed since last update.

インベントリー/ナレッジ管理系のElasticsearchフロントアプリを1日で作る

Last updated at Posted at 2020-03-29

はじめに

Elasticsearchを使って、インベントリーデータをささっと検索して必要な情報を取り出すようなアプリをゼロから1日で作る手順です。所持品やナレッジを分類データ化したものをパソコンやスマホから検索できるようにします。当然データ自体は自分で用意する必要があります。

作成するもの

バックエンドはAmazon Elasticsearch Serviceを用意し、データはそこに蓄積します。
フロントエンドはブラウザで動作するReactアプリで、Reactivesearchというコンポーネントを活用して、Elasticsearch Serviceのデータを検索できるようにします。ブラウザ(のJavaScript)から直接Elasticsearch Serviceにアクセスします。
また、Reactアプリを自動でビルドしデプロイする環境もCodepipelineで作ります。

アプリの画面イメージ

(この画面はインベントリー管理になっていませんが流用はできると思います)
beautifiedcityrank.png

インフラの概要図

RactivesearchAP.png

環境

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

手順

詳細手順を記述した記事をこの順番でやっていけば作れます。右端の時間は、順調に進められたときの目安の時間です。

  1. Amazon Elasticsearch Serviceで検索できる状態まで最速で立ち上げる(30分)
  2. React版Reactivesearch v3を使ってゼロから最速でElasticsearchフロントアプリを作る(1時間)
  3. React版ReactivesearchアプリをiPhone縦でも見やすくする(15分)
  4. AWS S3 + CloudFrontでReactアプリをHTTPS公開するための正しい構成(1時間)
  5. AWS Codepipelineを使ってReactアプリのCI環境をゼロから作る(1時間)
  6. Bracketsエディタからgit pushボタンで自動でデプロイされるCI環境を作る(15分)

番外編

今回は対応していませんが、派生での参考記事です。

Amplifyを使えば今回と同等の環境はもっと簡単に作れます。ただし、制約はあります。
AWS Amplify Consoleを使ってReactアプリのCICD環境を10分で作る

Elasticsearch Serviceに認証を付けたいところですが、今回は制約から見送りました。
Amazon Elasticsearch ServiceのKibana Cognito認証設定をゼロから最小限の設定で実現する

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5