한달에 750시간 공짜, ebs storage는 10gb 공짜
배포 유형은 개발 및 테스트
인스턴스 구성
우리가 설정했던 마스터 아이디와 비밀번호를 작성해서 들어가면 된다.
그리고 그 키바나 밑에 엘라스틱 서치의 엔드포인트도 있다.
postman을 통해 통신이 잘 되는지 확인해보자.
# views.py
def search_keyword(request):
keyword = request.GET.get('keyword')
AWS_ACCESS_KEY = 'AWS_ACCESS_KEY'
AWS_SECRET_KEY = 'AWS_SECRET_KEY'
AWS_REGION = 'AWS_REGION'
AWS_SERVICE = 'es'
HOST = '엔드포인트 주소'
awsauth = AWS4Auth(
AWS_ACCESS_KEY,
AWS_SECRET_KEY,
AWS_REGION,
AWS_SERVICE,
)
es = Elasticsearch(
hosts=[{'host': HOST, 'port': 443}],
http_auth=awsauth,
use_ssl=True,
verify_certs=True,
connection_class=RequestsHttpConnection
)
docs = es.search(
index='chosung_test',
body={
"size": 5,
"query": {"wildcard": {"name_chosung": "*"+keyword+"*"}}
}
)
data_list = []
for data in docs['hits']['hits']:
data_list.append(data.get('_source'))
print(data['_source'])
return JsonResponse({"result":data_list})
// javascript 코드
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>자동완성</title>
</head>
<style>
.hide {
display: none !important;
}
.rel_search {
display:flex;
flex-direction:column;
justify-content : space-around;
border: 1px solid red;
border-radius: 12px;
}
.pop_rel_keywords {
list-style: none;
margin-right: 30%;
}
.pop_rel_keywords > li {
line-height : 250%
}
</style>
<body>
<input class="search_input">
<container class="rel_search">
<ul class="pop_rel_keywords">
</ul>
</container>
<script>
const ul = document.querySelector(".pop_rel_keywords");
const searchInput = document.querySelector(".search_input");
const relContainer = document.querySelector(".rel_search");
let cache = '';
const checkInput = () => {
const beforeInput = searchInput.value;
timer(beforeInput);
}
const timer = (beforeInput) => {
setTimeout(() => {
if(searchInput.value === beforeInput) {
console.log("입력멈춤");
loadData(searchInput.value);
checkInput();
} else {
console.log("입력변함");
checkInput();
}
if(searchInput.value === "") {
relContainer.classList.add("hide");
} else {
relContainer.classList.remove("hide");
}
}, 500);
}
const loadData = (input) => {
const url = `http://127.0.0.1:8000/search?keyword=${input}`;
console.log(input);
if(cache === url) return;
else {
cache = url;
fetch(url)
.then((res) => res.json())
.then(res => fillSearch(res.result))
}
}
const fillSearch = (suggestArr) => {
ul.innerHTML = "";
suggestArr.forEach((el, idx) => {
const li = document.createElement("li");
li.innerHTML = el.name;
ul.appendChild(li);
})
const liList = document.querySelectorAll(".pop_rel_keywords li");
}
const highlightText = () => {
}
checkInput();
</script>
</body>
</html>