使用 BrightData、React.js 和 Node.js 抓取不可抓取的 Amazon 数据集

# Web 开发# API# Dev Challenge

我建造了什么

该项目使用 Brightdata 从亚马逊抓取数据并返回页面上的数据输出。您可以搜索任何您想要的内容，并且只要您搜索的内容可以在亚马逊上找到，它就会加载到页面上。

演示

该项目使用两个不同的 GitHub repo。一个用于前端，另一个用于后端。

  • 您可以在此处找到现场🔥演示。
  • Github Repo 前端
  • GitHub Repo 后端
    • Image description

    如何使用 Bright Data

    该项目是使用明亮的数据构建的。

    我使用 Brightdata Scraping 浏览器从亚马逊检索数据集。

    import 'dotenv/config'
import { Router } from 'express';
import puppeteer from 'puppeteer-core';
import process from 'node:process';

const router = Router();

// Scraping logic using Puppeteer and BrightData
const scrapeData = async (searchTerm) => {
  const BROWSER_WS = process.env.BROWSER_WS; // set your bright data proxy credential here
  const URL = "https://www.amazon.com";

  const browser = await puppeteer.connect({
    browserWSEndpoint: BROWSER_WS,
  });

 // ... some code here

  await browser.close();
  return products;
};

// Define the API route for scraping
router.get('/scrape', async (req, res) => {
     // ... some code here
  }
});

export default router;

    Brightdata 抓取浏览器使用 puppeteer-core 抓取亚马逊数据并将内容作为 json 响应返回。

    我使用 express.js 为前端应用程序创建了一个 api 端点和服务器，它是一个 React 和 vite.js 设置。

    import express from 'express';
import scrapeRouter from './index.js'; // Import the logic from index.js
import cors from 'cors';

const app = express();

// allow all origin
app.use(cors());

// Use the scrapeRouter for /api routes
app.use('/api', scrapeRouter);

// Set the port
const PORT = 4040;

// Start the server
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

    Tailwindcss 用于保存，React Icons 用于图标。其他堆栈如下所示。

    部署

    后端 Express 应用单独部署

  • 在 Render.com 上部署的后端
  • 在 Netlify.com 上部署的前端

    • 使用的堆栈

  • 反应
  • 维特
  • Tailwindcss
  • React 图标
  • Axios
  • 科尔斯
  • Brightdata（用于代理和数据获取）
  • 渲染（用于 API 托管）
  • Dotenv（加载环境）
  • express（设置服务器和路由）
  • nodemon（本地开发）
  • puppeteer-core（从亚马逊抓取数据）

    • DEV 挑战现已开始！

    DEV Challenges Hub

    查看所有参与方式、证明您的技能并赢取奖品。

    访问挑战中心