Full-Stack Web Scraping: Create Link Previews with Vite.js, React, and Node.js

はじめに

Web 開発は常に進化しており、Vite.js や React などのツールを使用すると、高速で応答性の高いフロントエンドアプリケーションの作成がかつてないほど簡単になります。しかし、アプリが他の Web サイトからコンテンツを取得して表示する必要がある場合はどうなるでしょうか?ここで Web スクレイピングが登場します。今日は、まさにそれを行うフルスタックアプリケーションを構築します。

このチュートリアルでは、フロントエンドに React を使用し、バックエンドに Cheerio を備えた Node.js を使用して、ダイナミックリンクプレビュージェネレーターを作成する方法を学びます。これは、Vite や TypeScript などの最新の効率的なツールを使用しながら、Web スクレイピングを探索したい Web 開発者にとって素晴らしいプロジェクトです。

学習内容:

TypeScript を使用した Vite.js React プロジェクトのセットアップ

Express を使用した Node.js サーバーの作成

Web スクレイピングに Axios と Cheerio を使用する

1 つのまとまったプロジェクトでフルスタックアプリケーションを構築する

1.プロジェクトのセットアップ

プロジェクト構造を設定することから始めます。このチュートリアルでは、フロントエンドとバックエンドは同じプロジェクトディレクトリ内に格納されます。この設定により、開発が簡単になり、プロジェクトが整理された状態に保たれます。

まず、ViteJS で ReactJS プロジェクトを作成し、Typescript テンプレートを使用します

Vite.js を使用して React フロントエンドを作成する

次に、Vite を使用して、TypeScript で React フロントエンドをスキャフォールディングします。

pnpm create vite@latest

ログイン後にコピー

このコマンドは、
TypeScript を使用して、プロジェクトディレクトリに新しい React プロジェクトをセットアップします。 your-project フォルダーに移動し、依存関係をインストールします:

<span>cd your-project<br>pnpm install</span>

ログイン後にコピー

2. Node.js サーバーのセットアップ

フロントエンドの準備ができたので、Node.js サーバーの作成に進みましょう。まず、サーバーディレクトリを作成し、Node.js プロジェクトを初期化します。

<span>cd ..<br>mkdir server<br>cd server<br>pnpm init</span>

ログイン後にコピー

サーバーには Express が必要です。また、HTTP
リクエストを作成するための Axios、HTML を解析するための Cheerio、
リクエストから JSON 本文を取得するための body-parser、および API の CORS を有効にするための cors が必要です。

npm install express axios cheerio <span>body-parser cors</span>

ログイン後にコピー

3. Web スクレイピング API の構築

バックエンドをセットアップすると、URL を受け入れ、そのコンテンツを取得し、タイトル、説明、画像などの主要なメタデータを抽出する API エンドポイントを作成できます。

index.ts 内のサーバーの基本構造は次のとおりです。

<span>// index.js<br><br>const express = require("express");<br>const bodyParser = require("body-parser");<br>const cors = require("cors");<br><br>const { getUrlPreview } = require("./url.controller");<br><br>const app = express();<br>const PORT = process.env.SERVER_PORT || 5005;<br><br>app.use(bodyParser.json());<br>app.use(cors());<br><br>app.get("/health", (<span>req, res) =></span> {<br>  return res.status(200).json({ status: "Server Running" });<br>});<br>app.post("/preview", getUrlPreview);<br><br>app.listen(PORT, () => {<br>  console.log("Server is running: %s", PORT);<br>});</span>

ログイン後にコピー

<span>// url.controller.js<br><br>const axios = require("axios");<br>const cheerio = require("cheerio");<br>const { object, string, ValidationError } = require("yup");<br><br>const schema = object({<br>  url: string().url().required(),<br>});<br><br>const getUrlPreview = async (req, res) => {<br>  try {<br>    const value = await schema.validate(req.body);<br><br>    const { data } = await axios.get(value.url);<br>    const $ = cheerio.load(data);<br><br>    const title =<br>      $('meta[property="og:title"]').attr("content") || $("title").text();<br>    const description =<br>      $('meta[property="og:description"]').attr("content") ||<br>      $('meta[property="description"]').attr("content");<br>    const image =<br>      $('meta[property="og:image"]').attr("content") ||<br>      $("img").first().attr("src");<br><br>    const previewData = {<br>      title: title || "No title available",<br>      description: description || "No description available",<br>      image: image || "No image available",<br>    };<br><br>    return res.status(200).json(previewData);<br>  } catch (err) {<br>    if (err instanceof ValidationError) {<br>      return res.status(422).send(err.message);<br>    }<br><br>    console.log(err);<br><br>    return res.status(500).send("Something went wrong!");<br>  }<br>};<br><br>module.exports = {<br>  getUrlPreview,<br>};</span>

ログイン後にコピー

このコードは、/api/preview で POST リクエストをリッスンする単純な Express サーバーをセットアップします。 URL を使用してリクエストが行われると、サーバーは Axios を使用してその URL の HTML コンテンツを取得し、Cheerio で解析します。その後、メタデータが抽出され、クライアントに返されます。

4.リンクプレビューコンポーネントの作成

React アプリで、URL を入力として受け取り、バックエンドから取得したプレビューを表示するコンポーネントを作成します。

リンクプレビュージェネレーターを処理するためのアプリコンポーネントを実装する方法は次のとおりです。

pnpm create vite@latest

ログイン後にコピー

<span>cd your-project<br>pnpm install</span>

ログイン後にコピー

このコンポーネントを使用すると、ユーザーは URL を入力できます。URL はバックエンドに送信され、リンクのプレビューを取得して表示します。

5.アプリケーションの実行

最後に、アプリケーションを実行するには、フロントエンドサーバーとバックエンドサーバーの両方を起動する必要があります。

Node.js サーバーを起動します:

<span>cd ..<br>mkdir server<br>cd server<br>pnpm init</span>

ログイン後にコピー

Vite React フロントエンドを開始します:

npm install express axios cheerio <span>body-parser cors</span>

ログイン後にコピー

http://localhost:5173 に移動すると、アプリが動作しているのが表示され、ユーザーが URL を入力してリンクプレビューを生成できるようになります。

結論

このチュートリアルでは、Vite.js、React、Node.js、Cheerio の力を組み合わせて、Web スクレイピングが可能なフルスタックアプリケーションを作成しました。個人プロジェクトを作成しようとしている場合でも、ポートフォリオに新しいスキルを追加しようとしている場合でも、フロントエンドとバックエンドを 1 つのプロジェクトに統合する方法を理解することは非常に重要です。

Web スクレイピングは強力なツールですが、責任を持って使用することが重要であることを覚えておいてください。スクレイピングする Web サイトの利用規約を常に尊重し、倫理的な影響を考慮してください。

このチュートリアルが役に立ったと思われた場合は、このようなコンテンツをもっと見るために私のチャンネルに登録することを忘れないでください。また、今後のチュートリアルについて質問や提案がある場合は、コメントを残してください。

以上がフルスタック Web スクレイピング: Vite.js、React、Node.js を使用してリンクプレビューを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。