使用 ReactJS 和 AWS Lambda 预览 Facebook 帖子

我目前专注于学习 React。对我来说，学习的最好方式是做一个小项目，而不是一个待办事项清单（哈哈）。

话虽如此，我还是决定构建一个小型应用程序，接收 URL、获取元标记（尤其是开放图标记）并基于 Facebook 构建预览。

为了完成这项任务，我选择了 ReactJS 和 AWS Lambda（托管在 Netlify 上）。

Lambda 函数

Lambdas 的任务非常简单。接收一个 URL，解析并获取元标签，查找 Open Graph 标签。

open -graph-scraper npm 包几乎完成了整个工作，因此这里是 lambda 的最终代码：

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"
  },

结果如下：

贡献

它是免费且开源的！

该代码托管在 Github 上，您可以在此处查看其运行情况。

大家好，我期待你们的反馈。

谢谢

鏂囩珷鏉ユ簮锛�https://dev.to/hugodias/facebook-post-preview-with-reactjs-and-aws-lambda-38kk