Cloudflare Workerで価格コムライクなリダイレクト（扉）ページを完全無料で作る

Cloudflare Workerで価格コムライクなリダイレクト（扉）ページを完全無料で作ってみたので、方法をまとめました。

公開日：2020年8月25日

作るもの

外部ページへリンクする際に、「ここから先はうちが運営していない、外部のページだよ」という警告を出すリダイレクトページ（扉ページ）です。価格コムやヤフオクとかで外部リンクをクリックすると出てくるアレですね。これをCloudflare Workerで作ります。

Cloudflare Workerで作るメリットとしては、

エッジ配信で超高速（100msとかで表示）
サーバーの移転に左右されずに配信できる
複数ドメインで使いまわせる

という点です。

速度の面はもちろんですが、個人的には「サーバーの移転に左右されない」「複数ドメインで使いまわせる」というのは大きなポイントです。

ビジネスで計測タグを仕込む際は、サイトリニューアルや先方のタグの変更で、全てのサイトの全てのシステムを変更する必要が出てくるため、Cloudflare Workerで一本化しておくと、メンテナンスが非常に楽になります。

流れ

リダイレクトページの動作の流れです。

(1) ページ内でリンクをクリック（リンク先は「/exit/?url=xxxx」）
↓
(2) Cloudflare Workerで扉ページを表示
↓
(3) Javascriptで自動転送

という流れです。

自ドメイン内での処理になるので、SEOを考慮するなら、リンクによって使い分けた方が良いでしょう。

実際に構築する

Cloudflare Workerの作業環境構築については、手前味噌で恐縮ですが、下記のページの「事前準備」を参考にしてみてください。

CloudFlare WorkersでAPI情報を秘匿するProxyを建てる

もしわかりにくかったら、ネットでもっと良い記事があると思うのでそちらをどうぞ。

Cloudflare Workerでの扉ページを作成

Workerの処理は全て「index.js」1ファイルで処理させます。

まずはリクエストを処理して、扉ページ表示するところを用意します。

// index.js
// リクエストを検知して
addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

// リクエストを処理します。
async function handleRequest(request) {
  const url = new URL(request.url)
  const redirectTo = getSearchParams(url.search);

  return new Response(html, {
    headers: {"content-type": "text/html;charset=UTF-8"}
  })
}

Cloudflare Workerの基本テンプレですね。

handleRequestが受け取る「request」変数は、GETパラメータを処理してくれないので、独自関数（getSearchParams）で分解します。

function getSearchParams(searchPara) {
	var params = {};
	var search = searchPara.substr(1);
	if (search === '') {
		return params;
	}
	search.split('&').forEach(str => {
		var arr = str.split('=');
		if (arr[0] !== '') {
			params[arr[0]] = arr[1] !== undefined ? decodeURIComponent(arr[1]) : '';
		}
	});
	return params;
}

Responseで返すhtml変数に、HTMLテンプレを設定します。

const html = `
<!doctype html>
<html lang="">
<head>
  <meta charset="utf-8">
  <title>リダイレクトします</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
<body>
<h1>リダイレクトします</h1>
<p><a id="redirectLink" href="XXX">XXX</a>へリダイレクトします。</p>
</body>
</html>
`

XXXの部分は変数・redirectToをテンプレート構文で仕込めばOKです。

<p><a id="redirectLink" href="${redirectTo.url}">${redirectTo.url}</a>へリダイレクトします。</p>

テンプレート構文については下記をどうぞ。

JavaScript (ES2015) 文字列中に変数展開できるテンプレート構文のメモ

HTMLテンプレはHTMLであればなんでもありなので、Google Analyticsなどの計測タグや広告リンクなどはここに仕込みます。

自分は、ここで計測タグが必要なリンクを判定して、必要な場合はリンクを書き換える感じで処理しています。

Cloudflare Worker KVなるものも出たらしいので、そちらも使うと複数のサイトでリダイレクトリンクの書き換えも出来ます。

Javascriptで自動転送を追加

HTMLページでのリダイレクトについては、やり方はいろいろですが、meta refreshはGoogle非推奨らしいので、素直にJavascriptでページ内のリンクをクリックさせます。

<script type="text/javascript">
const fn = function goto(){
  const link = document.getElementById("redirectLink");
  link.click();
}
setTimeout(fn, 2000);
</script>

こんな感じのを、HTMLテンプレに追加すればOKです。

Workerをテスト＆リリース

Workerができたら、

wrangler dev

でテストしてみましょう。

動作がOKだったら、

wrangler publish

でリリースします。

CloudflareのPageルールでWorkerを紐付ける

リリースしたWorkerはCloudflare Worker独自のエンドポイント（xxx.yyy.workers.dev）で動いています。

これはこのままで良いので、使用するサイトのドメインと連携させます。

Cloudflareにログインして、使用するサイトのドメインページに入ったら、上のメニューから「Workers」をクリックします。ここで、ルートごとにどのWorkerを紐づけるかを設定できます。

「ルートを追加」ボタンをクリックすると、

ルート（Cloudflareのマッチ文法で書く）
Worker（Worker名をプルダウンから選択）

の選択が出てくるので、入力します。

今回は、

xxx.com/exit/?url=yyyy

という形式なので、ルートは、

*xxx.com/exit/*

とすればOKです。

ルートを追加したら、本番で動くかをブラウザでURLにアクセスしてテストします。基本的には、ルートを追加したらすぐに反映されているはずです。

ルートとWorkerの連携は幾つでもできるので、違うドメインや違うルートでも同じWorkerが使い回せます。これが地味に便利です。

ページのリンクを書き換え

あとは、ページ内のリンクを書き換えます。

今回は、

xxx.com/exit/?url=yyyy

というルールなので、それに合わせてページ内のリンクを書き換えます。

これで価格コムライクなリダイレクト（扉）ページの完成です。

Cloudflare Workerで価格コムライクなリダイレクト（扉）ページを作る方法をみてきました。

制限は多いですが、Cloudflare Workerは使い方次第でかなり便利なサービスだと実感しました無料プランでは10万リクエスト/日の制限がありますが、十分な量と言えます。

今回のような扉ページで毎日10万もクリックされる規模のサイトだったら、有料プランも余裕で払えるでしょうしね。

Author

Koji Kadoma: Member of codit.work