【Cloudflare Workers 】特定のページでリダイレクトする【Page Rulesと併用】の絵文字

【Cloudflare Workers 】特定のページでリダイレクトする【Page Rulesと併用】

2022-05-13

2022-05-13

はじめに

こんにちは、ブログ移転してなんとかやってるこふです。

Cloudflare Pages でホスティング(デプロイ)したサイトから強制的に別のサイトへリダイレクトさせます。

設定のやり方

Cloudflare Workers は CDN 上で動くので、そこで動かすプログラムを書きます。そのプログラムでは、特定の URL と一致したら遷移する、という方法を取ります。

Cloudflare の UI(画面)は頻繁に変わり、URL も変わることが多いため、使い方は公式ページでご覧ください。

const redirectHttpCode = 301 const redirectMap = new Map([ ['/blog/path-hoge', 'https://blog.cohu.dev/path-hoge'], // 必要に応じて書く ]) addEventListener('fetch', (event) => { event.respondWith(handleRequest(event.request)) }) async function handleRequest(request) { const url = new URL(request.url) const { pathname } = url const targetUrl = redirectMap.get(pathname) if (targetUrl) { return Response.redirect(targetUrl, redirectHttpCode) } return fetch(request) }

自分のサイトはページ数が少なく、愚直にパスをマップで書きました。ページ数が多い場合は、正規表現を使って Boolean を求め、リダイレクトさせれば OK です。

なぜこのやり方?

ページルールが使えなかったからです。元々、以下の記事で書いたのですが、example.com からwww.example.comにリダイレクトさせています。

おそらく、ページルールは同時に 2 つ動かすことができないのでは?と感じました。

そのため、ページルールで遷移したのちに、Workers で遷移するという手段を思いついた次第です。

リダイレクトの確認

https://wheregoes.com/trace/20222569712/からリダイレクトを確認します。

このサイトは複数回のリダイレクトも表示してくれて非常に便利ですよ。

さいごに

以上、Cloudflare Workers で強制的にリダイレクトさせる方法でした。

あまりにもページ数が多いサイトや、PV 数が多いサイトでは無料で行うことは困難な可能性があります。そのため、作って半年くらいの個人サイトで使うのが便利だと感じました。



アバター

こふ

情報通信を専攻している大学生です。大学(研究)・趣味・アルバイトでプログラムを書いています。ITツール・サービス・文章を創作することが好きです。

ぼくについて

共有する