概要
Cloudflareでmiriwo.workというドメインを使ってRemixのアプリケーションをデプロイしているとする。このmiriwo.workというドメインを使ってCloudflareのR2に設置した静的HTMLファイルをブラウザで開く方法をまとめる。
注意
本記事で掲載している確認用のリンクなどは時間経過とともにアクセスできなくなる可能性があります。（筆者がプライベートのCloudflareのリソースを閉じる可能性があるため）
情報
当該のドメインはお名前.comで取得後、AWSのRoute53で管理していた。その後CloudflareのDNSに移管した。
AWS Route53からCloudFlare DNSに移管したときの記事は下記。
デプロイしているRemixアプリケーションは下記で記事にしながら実装中。
下記はR2をカスタムドメインでパブリックバケットにするための設定だ。今回はこれとは違いRemixアプリケーションと同じmiriwo.workというドメインを使ってmiriwo.work/detail/index.htmlでアクセスできるようにする。
index.htmlは下記のような内容のものを利用する。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hello Cloudflare R2(Custom Origin Domain)</h1>
</body>
</html>
前提
- 下記で作成したバケットのindex.htmlを一旦削除して、今回の内容を記載したindex.htmlを再アップロードしておく。（パブリックバケットが存在している事が条件）
- R2に設定されているカスタムドメインでオブジェクトに直接アクセスすると下記の様に表示されることを確認しておく
- この状態で下記にアクセスし、エラーが返ることを確認しておく。（まだ何も設定していないのでエラーが出ることは正常）
方法
新規でWorkersスクリプトを作成し、https://miriwo.work/detail にアクセスしたときにR2のオブジェクトにリダイレクトするように設定
-
下記の設定で新規のWorkersスクリプトを作成
- スクリプト名： redirect-static-file
-
「コードを編集する」をクリック
-
コードを下記のように記載し「デプロイ」をクリック
export default { async fetch(request, env) { const url = new URL(request.url); // /detail/パスへのリクエストをR2バケットにリダイレクト if (url.pathname.startsWith('/detail/')) { const key = url.pathname.replace('/detail/', ''); const r2Url = `https://public.www.miriwo.work/${key}`; const r2Response = await fetch(r2Url); if (!r2Response.ok) { return new Response('Not Found', { status: 404 }); } const headers = new Headers(r2Response.headers); return new Response(r2Response.body, { headers, }); } // その他のリクエストはRemixアプリケーションにフォワード return env.ASSETS.fetch(request); }, }; -
ただいま作成したWorkersのredirect-static-fileの設定画面に移動
-
ルートに
miriwo.work/detail/*と設定してルートを追加
下記にアクセスし、404のエラーは出ずindex.htmlの内容が表示されれば完了
筆者は下記のように出たので完了とした。
