ReactJS 및 AWS Lambda를 사용한 Facebook 게시물 미리보기

저는 현재 React에 대해 더 많이 배우는 데 집중하고 있습니다. 나에게 무언가를 배우는 가장 좋은 방법은 할 일 목록이 아닌 작은 프로젝트를 만드는 것입니다(웃음).

즉, URL을 수신하고 메타 태그(특히 열린 그래프 태그)를 가져오고 Facebook을 기반으로 미리 보기를 빌드하는 작은 앱을 빌드하기로 결정했습니다.

이 작업을 수행하기 위해 저는 ReactJS와 AWS Lambda(Netlify에서 호스팅됨)를 선택했습니다.

람다 함수

람다 작업은 매우 간단합니다. URL을 수신하고, 메타 태그를 구문 분석하고 가져와 Open Graph 태그를 찾습니다.

open-graph-scraper npm 패키지는 거의 모든 작업을 완료했으므로 다음은 람다의 최종 코드입니다.

import ogs from "open-graph-scraper";
import getUrl from "get-urls";
import urlParser from "url";

export function handler(event, context, callback) {
  const text = event.queryStringParameters.q;
  const urls = getUrl(text);

  // Return if there is no urls in text
  if (!urls.size) {
    return callback(null, {
      statusCode: 200,
      body: JSON.stringify({
        text: text,
        meta: null,
        error: ["Empty url in text"]
      })
    });
  }

  // Retrieve first URL in text - urls are already normalized
  const url = [...urls][0];
  const options = { url };

  ogs(options, (error, results) => {
    const statusCode = results.success ? 200 : 500;
    callback(null, buildResponseObject(statusCode, results, text));
  });
}

function getUrlDomain(url) {
  const urlObj = urlParser.parse(url);
  return urlObj.host;
}

function cleanText(text) {
  return text.replace(/(?:https?|ftp):\/\/[\n\S]+/g, "");
}

function buildResponseObject(statusCode, result, text) {
  let meta = statusCode === 200 ? result.data : null;

  if (meta) {
    let images = meta.ogImage;

    if (images instanceof Array) {
      meta.ogImage = images[0];
    }

    let domain = meta.ogUrl;

    if (domain) {
      meta.ogUrl = getUrlDomain(meta.ogUrl);
    }
  }

  const body = {
    meta: meta,
    text: cleanText(text),
    error: statusCode !== 200 ? result.error : null
  };

  return {
    statusCode,
    body: JSON.stringify(body)
  };
}

프론트엔드

포스트 초반에 언급했듯이 클라이언트 인터페이스를 구축하기 위해 react를 선택했습니다.

사용된 패키지는 다음과 같습니다.

  "dependencies": {
    "get-urls": "^7.2.0",
    "netlify-lambda": "^0.4.0",
    "open-graph-scraper": "^3.3.0",
    "react": "^16.4.1",
    "react-content-loader": "^3.1.2",
    "react-dom": "^16.4.1",
    "react-scripts": "1.1.4",
    "styled-components": "^3.3.2"
  },

결과는 다음과 같습니다.

기여

무료이며 오픈 소스입니다!

코드는 hosted on Github이고 할 수 있습니다 see it in action here .

여러분의 피드백을 기다리겠습니다.

감사