ホームページ > ウェブフロントエンド > jsチュートリアル > Node.js と MongoDB を使用した URL 短縮アプリの構築

Node.js と MongoDB を使用した URL 短縮アプリの構築

WBOY
リリース: 2024-07-23 17:18:34
オリジナル
743 人が閲覧しました

Building a URL Shortener App with Node.js and MongoDB

URL 短縮サービスの作成は、Node.js と MongoDB を使用したフルスタック開発に取り組むための優れた方法です。このブログでは、ユーザーが長い URL を短縮バージョンに変換し、その使用状況を追跡できるようにする URL 短縮アプリケーションを構築するプロセスを順を追って説明します。

前提条件

このチュートリアルを進めるには、以下が必要です:

  • Node.js がインストールされました
  • JavaScript と Express.js の基本的な知識
  • MongoDB データベース (クラウド ソリューションとして MongoDB Atlas を使用できます)

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

ステップ 1: プロジェクトを初期化する

まず、プロジェクト用に新しいディレクトリを作成し、npm で初期化します。

mkdir url-shortener-app
cd url-shortener-app
npm init -y
ログイン後にコピー

ステップ 2: 依存関係をインストールする

次に、必要な依存関係をインストールします。

npm install express mongoose cors dotenv
npm install --save-dev nodemon
ログイン後にコピー

ステップ 3: プロジェクトの構造

次のフォルダー構造を作成します:

url-shortener-app/
├── controllers/
│   └── urlController.js
├── models/
│   └── urlModel.js
├── routes/
│   └── urlRoutes.js
├── .env
├── index.js
├── package.json
ログイン後にコピー

バックエンドの構築

ステップ 4: Express サーバーをセットアップする

index.js ファイルで、Express サーバーをセットアップし、MongoDB に接続します。

const express = require('express');
const mongoose = require('mongoose');
const urlRoutes = require('./routes/urlRoutes');
const cors = require('cors');

const app = express();
app.use(express.json());

require("dotenv").config();

const dbUser = process.env.MONGODB_USER;
const dbPassword = process.env.MONGODB_PASSWORD;

// Connect to MongoDB
mongoose
    .connect(
        `mongodb+srv://${dbUser}:${dbPassword}@cluster0.re3ha3x.mongodb.net/url-shortener-app`,
        { useNewUrlParser: true, useUnifiedTopology: true }
    )
    .then(() => {
        console.log("Connected to MongoDB database!");
    })
    .catch((error) => {
        console.error("Connection failed!", error);
    });

app.use(cors({
    origin: "*",
}));

app.get('/', (req, res) => {
    res.send('Welcome to URL Shortener API');
});

app.use('/api', urlRoutes);

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});
ログイン後にコピー

ルート ディレクトリに .env ファイルを作成して、環境変数を保存します。

MONGODB_USER=yourMongoDBUsername
MONGODB_PASSWORD=yourMongoDBPassword
ログイン後にコピー

ステップ 5: URL モデルを定義する

models/urlModel.js ファイルで、URL のスキーマを定義します。

const mongoose = require('mongoose');

const urlSchema = new mongoose.Schema({
    originalUrl: { type: String, required: true },
    shortUrl: { type: String, required: true, unique: true },
    clicks: { type: Number, default: 0 },
    expirationDate: { type: Date },
    createdAt: { type: Date, default: Date.now },
});

module.exports = mongoose.model('Url', urlSchema);
ログイン後にコピー

ステップ 6: ルートを作成する

routes/urlRoutes.js ファイルで、API のルートを定義します。

const express = require('express');
const { createShortUrl, redirectUrl, getUrls, getDetails, deleteUrl } = require('../controllers/urlController');
const router = express.Router();

router.post('/shorten', createShortUrl);
router.get('/urls', getUrls);
router.get('/:shortUrl', redirectUrl);
router.get('/details/:shortUrl', getDetails);
router.delete('/delete/:shortUrl', deleteUrl);

module.exports = router;
ログイン後にコピー

ステップ 7: コントローラーを実装する

controllers/urlController.js ファイルで、コントローラー関数を実装します。

const Url = require('../models/urlModel');

function generateUniqueId(length) {
    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    let result = '';
    for (let i = 0; i < length; i++) {
        const randomIndex = Math.floor(Math.random() * characters.length);
        result += characters[randomIndex];
    }
    return result;
}

const createShortUrl = async (req, res) => {
    const { originalUrl } = req.body;
    const shortUrl = generateUniqueId(5);
    const urlRegex = new RegExp(/^(http|https):\/\/[^ "]+$/);
    if (!urlRegex.test(originalUrl))
        return res.status(400).json('Invalid URL');
    const url = await Url.findOne({ originalUrl });
    if (url) {
        res.json(url);
        return;
    }
    const expirationDate = new Date();
    expirationDate.setDate(expirationDate.getDate() + 7);
    const newUrl = new Url({ originalUrl, shortUrl, expirationDate });
    await newUrl.save();
    res.json(newUrl);
};

const redirectUrl = async (req, res) => {
    const { shortUrl } = req.params;
    const url = await Url.findOne({ shortUrl });
    if (!url || (url.expirationDate && url.expirationDate < new Date())) {
        res.status(404).json('URL expired or not found');
        return;
    }
    url.clicks++;
    await url.save();
    res.redirect(url.originalUrl);
};

const getUrls = async (req, res) => {
    try {
        const urls = await Url.find({}).sort({ _id: -1 });
        res.json(urls);
    } catch (error) {
        res.status(500).json({ message: 'Server Error' });
    }
};

const getDetails = async (req, res) => {
    try {
        const { shortUrl } = req.params;
        const url = await Url.findOne({ shortUrl });
        if (url) {
            res.json(url);
        } else {
            res.status(404).json('URL not found');
        }
    } catch (error) {
        res.status(500).json({ message: 'Server Error' });
    }
};

const deleteUrl = async (req, res) => {
    try {
        const { shortUrl } = req.params;
        await Url.findOneAndDelete({ shortUrl });
        res.json('URL deleted');
    } catch (error) {
        res.status(500).json({ message: 'Server Error' });
    }
};

module.exports = { createShortUrl, redirectUrl, getDetails, getUrls, deleteUrl };
ログイン後にコピー

アプリケーションの実行

次のコマンドを使用してサーバーを起動します:

npm run dev
ログイン後にコピー

このコマンドは Nodemon を使用してサーバーを起動します。これにより、コードを変更するとサーバーが自動的に再起動されます。

結論

このブログでは、Node.js と MongoDB を使用してシンプルな URL 短縮アプリケーションを構築しました。このアプリケーションを使用すると、ユーザーは URL を短縮し、その使用状況を追跡し、有効期限を付けて管理できます。このプロジェクトは、フルスタック開発について学ぶための優れた出発点であり、ユーザー認証、カスタム URL エイリアスなどの追加機能で拡張できます。

コードを調べる

コードを詳しく調べるには、GitHub リポジトリにアクセスしてください。


好みに応じてブログを自由にカスタマイズし、必要に応じて詳細や説明を提供してください。

以上がNode.js と MongoDB を使用した URL 短縮アプリの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート