Cloudflare Workersを使ったドメインのリダイレクト方法

Tips
目次

概要

Cloudflare Workersを使って、サイトのドメイン移転後のリダイレクトを設定してみました。

何をしたいのか

最近、ブログのドメインを変更しました。その際に、ドメインを変更したことを分かりやすく示す目的で、旧ドメインへのアクセスを新ドメインに転送することにしました。

この転送、リダイレクトをする方法はいくつかあります。正攻法となるのは、サーバーなどにアクセスして、.htaccessなどを修正し、mod_rewriteなどを使う方法です。しかし、私としてはそのためにWebサーバーにアクセスしたり、.htaccessを保守したりするのは面倒でなりません。

そこで、今回は維持にかかるメンテナンスが簡単なCloudflare Workersを使うことにしました。

Cloudflare Workersは、Cloudflare社が提供するサービスで、Cloudflareが用意するCDN等のエッジサーバーへのアクセス時に特定の処理を行うことができます。一部制限はありますが無料で利用可能です。制限としては、1日10万件のアクセス以下かつ1回あたりのリクエストで10ミリ秒以下での処理というものがあります。

今回の利用では、旧ドメインへのアクセスから新ドメインへのアクセスにリダイレクトを行うということで、確実にリクエストの処理時間は10ミリ秒で終わるということで、採用しました。もしも、この制限で収まらない可能性がある場合は、月5ドルからのプランに加入することで、制限が緩和されます。

設定方法

Cloudflare Workersを使うには、Cloudflareのアカウントが必要です。あらかじめアカウントを作成しておきます。

アカウントを作成したら、ログイン後のページのメニューから「Workers」を選択します。その後、「Create a Service」から、実際にリダイレクトを行うためのWorkerを作成します。

848fa7872942322c822db2c01ecf6eaa.png

Workerを作成したら、リダイレクトのためのコードを記述します。コードの記述は、作成したWorkerの詳細から、「Quick edit」をクリックします。

image-1.png

そうすると、コードを記述するためのエディタが表示されるため、そこに次のようにコードを記述します。

export default {
  async fetch(request) {
    const base = "https://example.com";
    const statusCode = 301;

    const url = new URL(request.url);
    const { pathname, search } = url;

    const destinationURL = `${base}${pathname}${search}`;
    console.log(destinationURL);

    return Response.redirect(destinationURL, statusCode);
  },
};

リダイレクト先である新ドメインを3行目に記述します。ここでは例としてexample.comとしています。それぞれの環境に合わせて修正してください。

コードの記述が終わったら、「Save and Deploy」をクリックして保存します。

最後に、旧ドメインへアクセスがあった際に、今回作成したWorkerが起動するように設定します。設定は、Workerの詳細から「Settings」を選択し、「Add Custom Domain」を選択します。

image-2-1024x253.png

その後は指示に従って、旧ドメインを記述します。

これで、旧ドメインへのアクセス時に、新ドメインへリダイレクトされるようになりました。設定が反映されるまでに最大24時間かかるということですが、私の場合は1分もかからずに反映されたようでした。

さいごに

ちょっとしたことをするのに、このCloudflare Workerはとても便利だと思います。Workerの構文について、情報があまりないのは欠点ですが、無料で利用できるということで、とても満足しています。