Cloudflare デプロイ中のRemixアプリのドメインと同様のドメインでR2のオブジェクトにアクセスする

## 概要

Cloudflareでmiriwo.workというドメインを使ってRemixのアプリケーションをデプロイしているとする。このmiriwo.workというドメインを使ってCloudflareのR2に設置した静的HTMLファイルをブラウザで開く方法をまとめる。

## 注意

本記事で掲載している確認用のリンクなどは時間経過とともにアクセスできなくなる可能性があります。（筆者がプライベートのCloudflareのリソースを閉じる可能性があるため）

## 情報

当該のドメインはお名前.comで取得後、AWSのRoute53で管理していた。その後CloudflareのDNSに移管した。
AWS Route53からCloudFlare DNSに移管したときの記事は下記。

https://qiita.com/miriwo/items/9f807c177962ea6fa304

デプロイしているRemixアプリケーションは下記で記事にしながら実装中。

https://qiita.com/miriwo/items/bde7f5ec4c7f1e9f34b1

下記はR2をカスタムドメインでパブリックバケットにするための設定だ。今回はこれとは違いRemixアプリケーションと同じmiriwo.workというドメインを使ってmiriwo.work/detail/index.htmlでアクセスできるようにする。

https://qiita.com/miriwo/items/737741ced9eb7453cf63

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を再アップロードしておく。（パブリックバケットが存在している事が条件）

https://qiita.com/miriwo/items/737741ced9eb7453cf63

- R2に設定されているカスタムドメインでオブジェクトに直接アクセスすると下記の様に表示されることを確認しておく

https://public.www.miriwo.work/index.html

![CleanShot 2024-07-14 at 09.35.13@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/8dacb4fb-fb74-7edd-de7e-e46700941597.png)

- この状態で下記にアクセスし、エラーが返ることを確認しておく。（まだ何も設定していないのでエラーが出ることは正常）

https://miriwo.work/detail/index.html

![CleanShot 2024-07-14 at 09.33.23@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/54dbd24e-1675-b0b0-8f58-23d371ba8ab8.png)

## 方法

新規でWorkersスクリプトを作成し、`https://miriwo.work/detail` にアクセスしたときにR2のオブジェクトにリダイレクトするように設定

1. 下記の設定で新規のWorkersスクリプトを作成
    - スクリプト名： redirect-static-file
1. 「コードを編集する」をクリック

    ![CleanShot 2024-07-14 at 09.43.02@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/82d3999a-a195-dad4-c3a1-bba9160e0eba.png)

1. コードを下記のように記載し「デプロイ」をクリック

    ```js
    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);
      },
    };
    ```

1. ただいま作成したWorkersのredirect-static-fileの設定画面に移動

    ![CleanShot 2024-07-14 at 09.55.40@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/47c279cc-e20f-66bb-abda-5ba8f0fed68c.png)

1. ルートに`miriwo.work/detail/*`と設定してルートを追加

    ![CleanShot 2024-07-14 at 10.01.31@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/01cc5d5c-ac2f-8e60-9a31-5b0706d43233.png)

下記にアクセスし、404のエラーは出ずindex.htmlの内容が表示されれば完了

https://miriwo.work/detail/index.html

筆者は下記のように出たので完了とした。

![CleanShot 2024-07-14 at 10.06.06@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/69198f20-7369-6e49-3d7a-c015bfea20de.png)