無料のカスタムドメイン URL 短縮サービス (Cloudflare Workers を使用)

この投稿では、皆さんにシェアしたいと思います Cloudflare Workersを使用して独自のカスタムドメインURL短縮サービスを作成する方法新たなツールを追加したいと考えている Web 開発者、高額な費用をかけずにリンクをブランド化したいビジネスオーナー、または Web テクノロジーをいじくり回すのが好きな人など、このステップバイステップガイドはあらゆる人に役立ちます。

ウェブ開発者であり技術愛好家である私は、インターネットをより効率的でユーザーフレンドリーにするちょっとしたことに常に興味を抱いてきました。ある日、同僚と非常に長くて扱いにくい URL を共有していたとき、リンクを短縮するシンプルでパーソナライズされた方法が欲しいと思いました。もちろん、URL 短縮サービスは数多くありますが、私はもっと「自分らしい」もの、つまりカスタマイズして制御できるものを求めていました。

そこで、Cloudflare Workersを使って独自のカスタムURL短縮サービスを作成するというアイデアを思いつきました。それはまるで、Web テクノロジーの広大な海に隠された宝物を見つけたような気分でした。URL を短縮できるだけでなく、自分のドメイン名を使って無料で短縮できるのです。この発見の興奮は、初めて Web サイトを展開したときの、自信と無限の可能性に駆られたときの興奮を思い出させました。

この発見をさらに興奮させたのは、カスタムドメインでブランド化された短縮リンクを作成するための Bit.ly や TinyURL などの人気サービスに代わる、素晴らしい無料の代替手段となる可能性があることに気づいたことです。多くの企業や個人がこの種の機能に多額のお金を払っていますが、ここでは 1 円も費やすことなく同じ結果を達成する方法を紹介します。

ステップ 1: ドメイン名を登録する (短いドメインを使用する)

カスタム URL 短縮サービスを作成する最初のステップは、ドメイン名を登録することです。これはブランド化された短縮リンクの基礎となるため、慎重に選択してください。

最適なドメインを選択するためのヒントをいくつか紹介します。

短くしてください: URL 短縮ツールの目的は、簡潔なリンクを作成することです。可能であれば、3 ～ 5 文字のドメイン名を探してください。略語、頭字語、またはキャッチーな単語でもかまいません。
思い出深いものにする: 覚えやすく入力しやすいものを選択してください。これにより、短縮リンクを自分や他のユーザーが使いやすくなります。
ブランドを考える: これをビジネスまたは個人のブランドに使用する場合は、ドメインを既存のブランドアイデンティティと一致させるようにしてください。
空室をチェック: 短くてキャッチーなドメインの需要が高まっています。最初の選択肢が利用できない場合は、創造性を発揮するか、.io、.co、.me などの代替トップレベルドメイン (TLD) を検討する必要があるかもしれません。
TLDについて考える: .com は人気がありますが、他の TLD も避けないでください。.link や .click などは、URL 短縮サービスに特に適している場合があります。

インスピレーションを与えるいくつかの例を次に示します。

abc.link
go.io
シュルツ
翻訳

ドメインを選択したら、ドメイン登録業者から購入する必要があります。一般的なオプションは次のとおりです。

Namecheap
GoDaddyは
CloudFlare (推奨 – Cloudflare Workers を使用するので非常に便利です)

覚えておいてください。ドメインには費用がかかりますが、これは 1 年に 1 回の購入であり、Cloudflare Workers を使用すると、URL 短縮機能の残りの設定は無料になります。

プロのヒント: 購入を確定する前に、ドメインがスパムや悪意のあるアクティビティに関連付けられていないことを確認してください。ドメインツールや Wayback Machine などのツールを使用して、その履歴を確認できます。

新しいドメインが手に入ったら、次のステップであるドメイン用の Cloudflare の設定に進む準備が整います。これについては次のセクションで説明します。

ステップ2: ドメインのDNSレコードを設定する

ドメインを取得したら、DNS 構成を設定します。この手順は、新しく登録したドメインで Cloudflare Workers が正しく機能することを保証するために重要です。

プロセスを順を追って見ていきましょう。

1. Cloudflareにドメインを追加する

まだ行っていない場合は、無料のCloudflareアカウントを作成する.
Cloudflare ダッシュボードで、「サイトの追加」をクリックし、ドメイン名を入力します。
Cloudflare は既存の DNS レコードをスキャンします。見つかったレコードはすべて削除します (ただし、ドメインを電子メールやその他の重要なサービスにも使用している場合は、それらを保持します)。

2. ネームサーバーを更新する（ドメインがCloudflareに登録されている場合はこの手順を無視してください）

Cloudflare はネームサーバーのセットを提供します。
ドメインレジストラの Web サイトにアクセスし、既存のネームサーバーを Cloudflare が提供するネームサーバーに置き換えます。
この手順が世界中に伝播するまでに最大 24 時間かかる場合があります。

3. DNSレコードを設定する

Cloudflare DNS 設定に、2 つの新しい A レコードが追加されます。
以下を追加してください。

タイプ： A
お名前： @
内容： 192.0.2.1
TTL： 自動応答オプション
プロキシステータス: プロキシ済み (オレンジ色の雲 - 非常に重要)

タイプ： A
お名前： WWW
内容： 192.0.2.1
TTL： 自動応答オプション
プロキシステータス: プロキシ済み (オレンジ色の雲 - 非常に重要)

この 192.0.2.1 IP は特別な「ダミー」アドレスです。ドキュメント作成とテスト用に予約されており、私たちのニーズにぴったりです。

4. Cloudflareプロキシを有効にする

DNS レコードのプロキシステータス (オレンジ色のクラウドアイコン) が有効になっていることを確認します。
これにより、Cloudflare はトラフィックをプロキシできるようになり、Cloudflare Workers が機能するために必要になります。

5. 構成の確認

ネームサーバーの変更が反映されると、Cloudflare はドメインを「アクティブ」として表示します。
これは Cloudflare ダッシュボードで確認できます。

ここで重要な点は、ドメインを実際の Web ホスティングに指定していないことです。 192.0.2.1アドレスは単なるプレースホルダーです次に設定する予定の Cloudflare Worker が、ドメインへのすべてのリクエストをインターセプトし、URL 短縮ロジックを処理します。

プロのヒント: この設定では、Web ホスティングの料金を支払ったり管理したりする必要はありません。Cloudflare Workers が面倒な作業をすべて処理するため、このソリューションは無料であるだけでなく、非常に軽量でメンテナンスも簡単です。

DNS が適切に設定されたら、URL 短縮を処理するように Cloudflare Worker を設定するという、興味深い部分に進む準備が整います。

ステップ3: Cloudflareワーカーの作成

Cloudflare でドメインが設定されたので、リダイレクトを処理する Worker を作成します。Cloudflare Worker は、最適なパフォーマンスを得るためにユーザーに近いエッジでコードを実行できるサーバーレス実行環境を提供します。

1. Cloudflareワーカーを作成する

ワーカーセクションへのアクセス:
- Cloudflareダッシュボードにログインします。
- サイドバーから「ワーカー」セクションに移動します。
- これが最初のワーカーである場合は「サービスの作成」をクリックし、既存のワーカーがある場合は「ワーカーの作成」をクリックします。
ワーカーの名前を入力してください:
- 「bulk-redirects-handler」など、ワーカーのわかりやすい名前を選択します。
- 「サービスを作成」をクリックしてエディターに進みます。
ワーカースクリプトの作成:
- エディターで、デフォルトのコードをリダイレクトハンドラースクリプトに置き換えます。

デフォルトのエクスポート{
  非同期フェッチ(リクエスト) {
    const リダイレクトマップ = 新しいマップ([
      ["google"、"https://www.google.com?subId1=google"],
      ["bing", "https://www.bing.com?subId1=bing"],
      // 必要に応じてここにリダイレクトを追加します
    ]）;

    const url = 新しい URL(request.url);
    console.log("完全なURL:", url.toString());
    console.log("ホスト名:", url.hostname);
    console.log("パス名:", url.pathname);

    path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
    
    url.hostname.includes('workers.dev') の場合
      パス = url.pathname.toLowerCase().replace(/^\//, '').split('/')[1] || '';
    }
    
    console.log("処理されたパス:", path);
    
    定数 location = redirectMap.get(path);
    console.log("リダイレクト場所:", location);

// 永続的なリダイレクトの場合は 301 に変更します
    if (場所) {
      Response.redirect(location, 302) を返します。
    }
    
    // リクエストがマップにない場合は、404 または優先フォールバックを返します
    新しいレスポンスを返します(`見つかりません: ${path}`, { ステータス: 404 });
  },
};

スクリプトの理解:
- を定義します。 リダイレクトマップ これには、短いパスとそれに対応する完全な URL が含まれています。

      ["google"、"https://www.google.com?subId1=google"],

yourshorturl.com/google -> https://www にリダイレクトします。google.com?subId1=google

      ["bing", "https://www.bing.com?subId1=bing"],

yourshorturl.com/bing は -> https://www.bing.com?subId1=bing にリダイレクトされます

スクリプトは、受信したリクエストを処理し、パスを抽出し、定義されたリダイレクトのいずれかと一致するかどうかを確認します。
一致が見つかった場合は、対応する URL に 302 (一時リダイレクト) を返します。
一致するものが見つからない場合は、404 Not Found 応答を返します。
ワーカーのテスト:
- Cloudflare ダッシュボードの「クイック編集」機能を使用して、Worker に変更を加え、テストします。
- 提供されている HTTP テストツールを使用してリクエストをシミュレートし、ワーカーがどのように応答するかを確認できます。
ワーカーのデプロイ:
- テストに満足したら、「保存してデプロイ」をクリックしてワーカーを公開します。
ワーカールートの設定:

デプロイ後、ワーカーの「トリガー」タブに移動します。
ドメインに一致するルートを追加します。 *recommends.link/*.
これにより、ドメインへのすべてのリクエストがこのワーカーによって処理されるようになります。
セットアップの確認:
- いくつかのリダイレクトパスにアクセスしてみてください（例： https://recommends.link/url-shortener-guide) を実行して、期待どおりに動作していることを確認します。
- Cloudflare ダッシュボードの Workers ログをチェックしてコンソール出力を確認し、パスが正しく処理されていることを確認します。

ステップ4: さらなるカスタマイズ（オプション）

Cloudflare KV による動的リダイレクト

リダイレクトシステムをより柔軟かつ管理しやすいものにするために、リダイレクトを保存するために Cloudflare KV (Key-Value) ストレージを使用できます。

KV 名前空間を作成します。

Cloudflare ダッシュボードで、「Workers」>「KV」に移動します。「Create namespace」をクリックして名前を付けます (例: 「REDIRECT_MAP」)。

KV 名前空間をワーカーにバインドします。

ワーカーの設定に移動します。「KV 名前空間バインディング」で、新しいバインディングを追加します。KV 名前空間を選択し、変数名 (例: REDIRECTS) を付けます。

KV を使用するように Worker スクリプトを変更します。

   デフォルトのエクスポート{
     非同期フェッチ(リクエスト、env) {
       const url = 新しい URL(request.url);
       const path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
       
       const location = env.REDIRECTS.get(path); を待機します。
       
       if (場所) {
         Response.redirect(location, 301) を返します。
       }
       
       新しいレスポンスを返します(`見つかりません: ${path}`, { ステータス: 404 });
     },
   };

Worker コードを変更せずに KV ストアを変更することで、リダイレクトを追加、更新、または削除できるようになりました。

パラメータ化されたリダイレクト

リダイレクトで動的パラメータを許可します。

   デフォルトのエクスポート{
     非同期フェッチ(リクエスト、env) {
       const url = 新しい URL(request.url);
       const [path, ...params] = url.pathname.toLowerCase().replace(/^\//, '').split('/');
       
       location = env.REDIRECTS.get(path); を待機します。
       
       if (場所) {
         // プレースホルダーを実際のパラメータに置き換えます
         params.forEach((param, インデックス) => {
           場所 = location.replace(`{${index}}`, パラメータ);
         }）;
         Response.redirect(location, 301) を返します。
       }
       
       新しいレスポンスを返します(`見つかりません: ${path}`, { ステータス: 404 });
     },
   };

この設定では、「product」のようなKVエントリを「https://mystore.com/item/{0}/details」として使用できます。 yourshortlink.com/product/12345.

クリックトラッキングと分析

リダイレクトイベントをログに記録して基本的な分析を実装します。

   デフォルトのエクスポート{
     非同期フェッチ(リクエスト、env) {
       const url = 新しい URL(request.url);
       const path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
       
       const location = env.REDIRECTS.get(path); を待機します。
       
       if (場所) {
         // リダイレクトイベントをログに記録する
         env.REDIRECTS.put(`${path}_clicks`, (parseInt(env.REDIRECTS.get(`${path}_clicks`) || '0') + 1).toString() を待ちます);
         Response.redirect(location, 301) を返します。
       }
       
       新しいレスポンスを返します(`見つかりません: ${path}`, { ステータス: 404 });
     },
   };

カスタムエラーページ

プレーンテキストの 404 応答の代わりに、カスタム HTML ページを返します。

   const notFoundPage = `
   
   
   
     
     
     リンクが見つかりません
     
       本文 { フォントファミリー: Arial、sans-serif; テキスト配置: center; パディング上部: 50px; }
     
   
   
     おっと！リンクが見つかりません
     探している短縮リンクは存在しません。
   
   
   `;

   // フェッチ関数内:
   新しいレスポンスを返す(notFoundPage, { 
     ステータス: 404、
     ヘッダー: { 'Content-Type': 'text/html' }
   }）;

帯域制限

不正使用を防ぐために基本的なレート制限を実装します。

   デフォルトのエクスポート{
     非同期フェッチ(リクエスト、env) {
       const ip = request.headers.get('CF-接続IP');
       定数rateLimitKey = `ratelimit:${ip}`;
       const currentRequests = parseInt(env.REDIRECTS.get(rateLimitKey) || '0' を待機します);
       
       if (currentRequests > 100) { // 100分あたりXNUMXリクエストの制限
         新しいレスポンスを返します('レート制限を超えました'、{ ステータス: 429 });
       }
       
       env.REDIRECTS.put(rateLimitKey, (currentRequests + 1).toString(), {expirationTtl: 60}) を待機します。
       
       // 残りのリダイレクトロジックをここに記述します
     },
   };

A / Bテスト

リダイレクトに簡単な A/B テストを実装します。

   デフォルトのエクスポート{
     非同期フェッチ(リクエスト、env) {
       const url = 新しい URL(request.url);
       const path = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
       
       const locationA = env.REDIRECTS.get(`${path}_A`);
       const locationB = env.REDIRECTS.get(`${path}_B`) を待機します。
       
       if (場所A && 場所B) {
         const location = Math.random() < 0.5 ? locationA : locationB;
         Response.redirect(location, 301) を返します。
       }
       
       // A/B テストが設定されていない場合は通常のリダイレクトにフォールバックします
       const location = env.REDIRECTS.get(path); を待機します。
       if (場所) {
         Response.redirect(location, 301) を返します。
       }
       
       新しいレスポンスを返します(`見つかりません: ${path}`, { ステータス: 404 });
     },
   };

これらのカスタマイズと拡張により、一括リダイレクトシステムに重要な機能が追加され、柔軟性、強力さ、情報量が向上します。これらの各機能は、特定のニーズとユースケースに基づいてさらに改良および拡張できます。

概要: Cloudflare Workers でカスタムリンク短縮機能を作成する

このブログ投稿では、Cloudflare Workers を使用して強力で柔軟なカスタム URL 短縮機能を作成する方法について説明しました。このソリューションは、大規模な短縮リンクを作成するための無料かつ効率的なアプローチを提供します。

TL; DR：

Cloudflare Workers は、グローバルな分散と低レイテンシーを備えたカスタムリダイレクトロジックを実装するためのサーバーレスプラットフォームを提供します。
カスタムドメインを Worker に接続するには、適切な DNS 構成と Worker ルートの設定が重要です。
シンプルな JavaScript ベースのワーカーは、複雑なリダイレクトシナリオを効率的に処理できます。
Cloudflare の Key-Value (KV) ストレージを活用すると、動的で管理しやすいリダイレクトマップを作成できます。
パラメータ化されたリダイレクト、クリックトラッキング、カスタムエラーページ、レート制限、A/B テストなどの高度な機能を Worker エコシステム内に実装できます。
このシステムは従来のシステムに比べて大きな利点がある。リダイレクト方法パフォーマンスの向上、管理の容易化、柔軟性の強化などが含まれます。

私たちが構築したソリューションには、いくつかの利点があります。

スケーラビリティ: パフォーマンスを低下させることなく、何百万ものリダイレクトを処理します。
柔軟性: コアロジックを変更せずに、リダイレクトを簡単に追加、変更、または削除できます。
性能: Cloudflare のグローバルネットワークを活用して、世界中で高速リダイレクトを実現します。
カスタマイズ: 分析や A/B テストなどの高度な機能が可能になります。
費用対効果: サーバーレスアーキテクチャを活用し、ホスティングコストを削減できる可能性があります。
無料の代替品 Bit.lyやあなたのカスタムドメインでブランド化された短縮リンクを作成します。

Cloudflare Worker ベースのリダイレクトシステムのパワーと柔軟性を理解したので、次はそれを実際に実行してみましょう。

まだお持ちでない場合は、Cloudflare アカウントにサインアップして、Workers プラットフォームに慣れてください。
独自のブランドの短縮リンクまたは一括リダイレクトにこのシステムを実装します。
これまでに説明した高度な機能を試して、システムを特定のニーズに合わせてカスタマイズしてください。
下のコメントセクションで、あなたの経験を共有したり、質問したりしてください。あなたの洞察は、コミュニティ内の他のユーザーの役に立つかもしれません。
より高度なユースケースやカスタム実装については、Cloudflare Workers の専門家またはコンサルティングサービスに問い合わせることを検討してください。

好奇心を持ち続け、学び続け、Cloudflare Workers などのツールを使って可能性の限界を押し広げることをためらわないでください。

ステップ 1: ドメイン名を登録する (短いドメインを使用する)

ステップ2: ドメインのDNSレコードを設定する

ステップ3: Cloudflareワーカーの作成

ステップ4: さらなるカスタマイズ（オプション）

Cloudflare KV による動的リダイレクト

パラメータ化されたリダイレクト

クリックトラッキングと分析

カスタムエラーページ

帯域制限

A / Bテスト

概要: Cloudflare Workers でカスタムリンク短縮機能を作成する

著者について

マット・アールグレン

ページ

訪問者のお気に入り

ツールとリソース

無料のカスタムドメイン URL 短縮サービスを作成する (Cloudflare Workers を使用)

ステップ 1: ドメイン名を登録する (短いドメインを使用する)

ステップ2: ドメインのDNSレコードを設定する

ステップ3: Cloudflareワーカーの作成

ステップ4: さらなるカスタマイズ（オプション）

Cloudflare KV による動的リダイレクト

パラメータ化されたリダイレクト

クリックトラッキングと分析

カスタムエラーページ

帯域制限

A / Bテスト

概要: Cloudflare Workers でカスタムリンク短縮機能を作成する

関連記事

著者について

マット・アールグレン

ページ

訪問者のお気に入り

ツールとリソース