フルスタック Web スクレイピング: Vite.js、React、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 サイトの他の関連記事を参照してください。