App Search의 본문 파싱

9998 단어 elasticsearchjavascript
(저를 포함하여) 일부 사람들이 Swifttype 사이트 검색에서 놓친 기능은 CSS 선택기를 사용하여 콘텐츠를 구문 분석할 수 있다는 것입니다.

바디 파싱 문제



App Search 크롤러는 지정한 웹사이트에서 모든 콘텐츠를 추출하고 찾은 HTML 태그에 따라 필드에 퍼뜨립니다.

제목 태그 내의 텍스트는 제목 필드로 간주됩니다. 앵커 태그는 링크로, 본문은 다른 모든 것과 함께 하나의 거대한 필드로 구문 분석됩니다.

웹 사이트에 캡처하려는 사용자 정의 구조가 있는 경우 어떻게 합니까? 예를 들어 제품 페이지입니다. 단일 본문 필드의 일부가 아닌 특정 필드에서 색상, 크기 및 가격과 같은 항목을 캡처하려고 합니다.

App Search를 사용하면 웹 사이트에 추가Meta Tags하여 사용자 정의 필드를 만들 수 있지만 웹 사이트에서 변경하는 것이 너무 복잡하거나(요식적인 절차) 불가능할 수도 있습니다.

바디 파싱 솔루션



이 게시물에서는 크롤러와 추출을 수행하는 실제 웹 사이트 간에 프록시를 생성하고 필요한 메타 태그를 생성한 다음 App Search가 이러한 태그를 가져와 사용할 수 있도록 새 응답에 이를 삽입하는 방법을 탐색합니다.

짧게 유지하기 위해 단계별 가이드를 수행하지 않고 스크립트의 핵심 부분만 보여드리겠습니다.

그래서, 우리는 무엇을 하고 있습니까?



우리는 제품 페이지를 호스팅하는 NodeJS 서버와 전면에 있는 프록시를 만들 것입니다. 이것은 크롤러 요청을 받고, 제품 페이지를 누르고, 메타 태그를 삽입한 다음 페이지를 크롤러로 반환합니다.



다음은 메타 태그를 사용하여 사용자 정의 필드를 추가하는 방법입니다.

<head>
  <meta class="elastic" name="product_price" content="99.99">
</head>
<body>
  <h1 data-elastic-name="product_name">Printer</h1>
</body>


도구


  • Nodejs(예제 페이지 및 프록시 생성용)
  • Ngrok(로컬 프록시를 인터넷에 노출)
  • 앱 검색(페이지 크롤링용)

    • 그 페이지



    예제에 따라 프린터용 제품 페이지를 에뮬레이트하는 페이지를 제공합니다.
    index.html
    <html>
  <head>
    <title>Printer Page</title>
  </head>
  <body>
    <h1>Printer</h1>
    <div class="price-container">
      <div class="title">Price</div>
      <div class="value">2.99</div>
    </div>
  </body>
</html>

    server.js
    const express = require("express");
const app = express();

app.listen(1337, () => {
  console.log("Application started and Listening on port 1337");
});

app.get("/", (req, res) => {
  res.sendFile(__dirname + "/index.html");
});


    그런 다음 App Search를 사용하여 페이지를 크롤링하고 예상대로 가격과 같은 필드로 포함하려는 데이터를 본문 콘텐츠 필드에 넣었습니다.



    그런 다음 이 데이터를 인식할 수 있는 프록시를 만들고 응답에 메타 태그를 삽입하여 App Search에서 이 필드를 인식할 수 있도록 합니다.
    proxy.js
    const http = require("http"),
  connect = require("connect"),
  app = connect(),
  httpProxy = require("http-proxy");

app.use(function (req, res, next) {
  var _write = res.write;
  res.write = function (data) {
    _write.call(
      res,
      data
        .toString()
        .replace('class="value"', 'class="value" data-elastic-name="price"')
    );
  };
  next();
});

app.use(function (req, res) {
  proxy.web(req, res);
});

http.createServer(app).listen(8013);

var proxy = httpProxy.createProxyServer({
  target: "http://localhost:1337",
});

console.log("http proxy server" + " started " + "on port " + "8013");


    마지막으로 서버와 프록시를 시작하여 Ngrok로 프록시를 노출하고 App Search에서 사용할 수 있습니다.

    짜잔! 이제 별도의 필드로 가격이 있습니다.



    기존 클래스를 기반으로 하지만 콘텐츠 자체를 기반으로 메타 태그를 추가하기 위해 본문 응답을 변환하는 미들웨어를 사용하여 원하는 만큼 멋지게 갈 수 있습니다.

    이것은 간단한 예이지만 요지를 이해하시기 바랍니다.
    Windows 10에 OpenSSH 서버 설치
    유용한 Splunk 검색 기능

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage