Cloudflare Pagesで動くシンプルな短縮URLシステムを作ってみました

こんにちは、あいぶらりです。

最近、私が運営しているサイトたちにGAを導入しました。URLに解析用のパラメータを付与し、これで完成！と思っていたのですが…ふとTwitterのプロフィール欄を見てみると、ポートフォリオサイトへのリンクテキストにパラメータが見えてしまうのが気になりました。

ゴチャッと見えるパラメータの見栄えが悪い…ならばということで短縮URLシステムを導入することにしました。

短縮URLといえば、「既存のサービスを利用していたら、ある日サービスが終了してしまい差し替えに苦労する」というのがあるあるだと思います。なので、短縮URLサービスを利用するのではなく、自分で作ってみることにしました。

今回の目標は、シンプル機能で簡単、無料…です。

できたもの

で、できたのがこちらです。

GitHub - aibrarymch/cloudflare-pages-redirects: Cloudflareで短縮URLリダイレクトを行うためのシンプルなテンプレートです。

Cloudflareで短縮URLリダイレクトを行うためのシンプルなテンプレートです。. Contribute to aibrarymch/cloudflare-pages-redirects development by creating an account on GitHub.

https://github.com/aibrarymch/cloudflare-pages-redirects

まず、想定しているデプロイ先はタイトルにもある通り、Cloudflare Pagesです。これはCloudflareが提供する静的サイトホスティングサービスで、Functions機能を利用することで、ちょっとしたバックエンド的な処理ができたりします。

今回はそんなPagesのリダイレクト機能を使用しています。Pagesのリダイレクト機能は _redirects というファイルにリダイレクトのルールを記述することで設定が反映されます。そこで本プロジェクトでは、設定用ファイルにリダイレクト設定を書くことで、 _redirects の形式に合わせて出力する…というものになっています。

そう、 _redirects に直接書ける人であれば、このプロジェクトは不要なのです。

そんなことは置いといて、こんな便利なCloudflare…無料でも膨大な量のリクエストを処理できるので、個人開発者にはとてもありがたいサービスです。いつもありがとうございます。

使い方

先程も書いたとおり、使い方も非常に簡単にしていて、リダイレクト元となる文字列とリダイレクト先のURLを redirects.json の redirects に記述するだけです。

{
  "meta": {
    "defaultStatusCode": 301,
    "rootRedirect": "https://to.example.com/"
  },
  "redirects": [
    {
      "from": "blog",
      "to": "https://to.example.com/blog",
      "description": "Blog top page"
    },
    // ...
  ]
}

例えば上記のように記述して、https://from.example.com/ でデプロイしている場合、 https://from.example.com/blog にアクセスすることで、https://to.example.com へリダイレクトされます。

デプロイ方法も、GitHubかGitLabに作ったリポジトリをCloudflare Pagesに接続してあげるだけなのでお手軽です。

おわりに

その昔、短縮URLの仕組みを作ろうとしたことがあり、そのときは「管理画面を用意して…中間ページを用意して…解析用に使用された回数と時間を保持して…」なんて最大値から考えてしまい、結局作るのを諦めてしまいました。

今回は「自分しか使わない」という前提で、必要最低限の機能だけに絞って作ったことで、無事形になりました。

中身はCloudflareの機能を使っているだけですが…よかったら使ってみてください。

これからも風呂敷を広げすぎないように生きて行きたいと思います。