アプリケーションを最初から作成するのは、アプリケーションがどのように機能するかを学ぶための私のお気に入りの方法です。この投稿では、URL 短縮ツールを最初から作成する方法について説明します。

URL 短縮ツールは非常に簡単に作成でき、初心者が言語を学習するのに最適な方法だと思います。より難しいのは、カスタム ドメイン、分析、リンクのグループ化、および URL 短縮サービスに追加されるその他の機能を追加することです。そこで、ゼロから作成する方法を紹介します。

このチュートリアルでは hono (nodejs)、drizzle orm、postgres を使用しますが、どの言語やフレームワークでも実行できます。私の sveltekit/golang 実装 kon.sh と github のソース コードをチェックしてください。

新しい hono プロジェクトを作成してみましょう

npm create hono@latest

次に、次の情報を入力します

[email protected]
Ok to proceed? (y)
create-hono version 0.13.1
? Target directory url-shortener
? Which template do you want to use? nodejs
? Do you want to install project dependencies? yes
? Which package manager do you want to use? npm

postgres データベースの準備ができていることを確認し、url-shortener という新しいデータベースを作成してください。

src/ フォルダーの下に、index.ts ファイルがあるはずです。このファイルには、API サーバーを実行するコードが含まれています。ここでは 2 つの API ルートを追加する必要があります。

• 短縮ツールを作成
• 受信リクエストをリダイレクトするキャッチオール ルート

src/index.ts

app.post("/api/shortener", async (c) => {
    // create shortener route
    return c.text("Not yet implemented");
});

app.get("/:code", async (c) => {
    // redirect
    return c.text("Not yet implemented");
});

これで、drizzle orm をインストールしてデータベースを初期化できます。まず、必要なパッケージをインストールします

npm i drizzle-orm postgres
npm i -D drizzle-kit

次に、src フォルダーの下に新しい db フォルダーを作成し、db クライアントを初期化するためのindex.ts とデータベース スキーマ用の schema.ts を追加する必要があります。

src/db/schema.ts

import { pgTable, text, varchar } from "drizzle-orm/pg-core";

export const shortener = pgTable("shortener", {
    id: text("id").primaryKey(),
    link: varchar("link", { length: 255 }).notNull(),
    code: varchar("code", { length: 255 }).notNull().unique(),
});

src/db/index.ts

import { drizzle } from "drizzle-orm/postgres-js";
import postgres from "postgres";
import * as schema from "./schema";

const queryClient = postgres(
    "postgres://postgres:[email protected]:5432/url-shortener"
);
export const db = drizzle(queryClient, { schema });

次に、ルート フォルダーに drizzle.config.ts ファイルを作成します。

drizzle.config.ts

// drizzle.config.ts
import { defineConfig } from "drizzle-kit";

export default defineConfig({
    schema: "./src/db/schema.ts",
    out: "./drizzle",
    dialect: "postgresql",
    dbCredentials: {
        url: "postgres://postgres:[email protected]:5432/url-shortener",
    },
});

npx drizzle-kit Push を実行して、スキーマをデータベースにプッシュします。

npx drizzle-kit push

すべてのセットアップが完了したら、最終的に API で作業し、npm run dev を実行してサーバーを起動できます

npm run dev

まずランダムな文字列ジェネレータを作成します。 src の下に utils という名前の新しいフォルダーを作成し、index.ts ファイルを作成します。

インデックス.ts

export function generateId(length: number) {
    let result = "";
    const characters =
        "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    const charactersLength = characters.length;
    for (let i = 0; i 



次に、短縮ルートの作成を更新します。



app.post("/api/shortener", async (c) => {
    const body = await c.req.json();

    const link = body.link;

    const code = generateId(6);

    await db.insert(shortener).values({
        id: generateId(8),
        link,
        code,
    });

    return c.json({ code });
});




その後、リンクを含むエンドポイントにポストリクエストを送信して、新しい短縮ツールを生成できます。これは私の VSCode で Thunder クライアントを使用する例です:



最後に、リダイレクト API を更新します。



app.get("/:code", async (c) => {
    const code = c.req.param("code");

    const link = await db
        .select()
        .from(shortener)
        .where(eq(shortener.code, code));

    if (link.length === 0) {
        return c.text("Invalid code");
    }

    return c.redirect(link[0].link);
});




次に、ブラウザで http://localhost:3000/{code} に移動すると、元のリンクにリダイレクトされます。

それでおしまい。 URL 短縮機能は、新しい言語の学習を始めるのに最適な方法です。その言語の人気のあるバックエンド フレームワークを使用し、その言語を使用してデータベースと通信する方法を学ぶことができます。

短縮ツールの QR コードの生成、分析用のリダイレクトの記録、カスタム ドメインなど、探索すべきことは他にもたくさんあります。これらについては、このチュートリアルでは説明しません。

私の作品を見るには、私の github をチェックしてください。私のプロジェクトはすべてオープンソースであり、誰でも無料で学び、貢献できます。

私の現在のスキルが難易度に合わないかも知れませんが、新しいアイデアも歓迎します。コメントでお気軽に共有してください。