Remix on Cloudflare WorkersからCloudflare R2を使う

$ npm install -g wrangler
$ wrangler login

$ wrangler whoami

$ wrangler r2 bucket create remix-r2-example
⛅️ wrangler 2.0.5
-------------------
Creating bucket remix-r2-example.
Created bucket remix-r2-example.

$ wrangler r2 bucket list                   
[
  {
    "name": "remix-r2-example",
    "creation_date": "2022-05-14T10:19:15.075Z"
  }
]

$ npx create-remix@latest --template himorishige/remix-cloudflare-workers-boilerplate

name = "remix-cloudflare-workers"
main = "./build/index.js"
compatibility_date = "2022-04-05"

account_id = ""
workers_dev = true

[site]
bucket = "./public"

[build]
command = "npm run build"

[[r2_buckets]]
binding = "MY_BUCKET"
bucket_name = "remix-r2-example"

$ npm run deploy

export {};

// cloudflare/workers-types
// https://github.com/cloudflare/workers-types#using-bindings
declare global {
  const MY_BUCKET: R2Bucket;
}

import { json } from '@remix-run/cloudflare';
import type { LoaderFunction } from '@remix-run/cloudflare';
import { useLoaderData } from '@remix-run/react';

export const loader: LoaderFunction = async () => {
  // MY_BUCKETというグローバルの値にアクセスする
  const list = await MY_BUCKET.list();

  if (!list) return null;

  return json(list);
};

export default function Index() {
  const data = useLoaderData();

  return (
    <div>
      <h1>Welcome to Remix</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

$ npm run deploy

$ npm install @ssttevee/cfw-formdata-polyfill @cfworker/uuid

import { json } from '@remix-run/cloudflare';
import type { LoaderFunction, ActionFunction } from '@remix-run/cloudflare';
import {
  Form,
  useActionData,
  useLoaderData,
  useTransition,
} from '@remix-run/react';
// import parseFormData from '@ssttevee/cfw-formdata-polyfill/ponyfill';
import { useEffect, useRef } from 'react';
import invariant from 'tiny-invariant';
import { uuid } from '@cfworker/uuid';

export const action: ActionFunction = async ({ request }) => {
  // polyfillを使ってFormDataをパースする（Remix v1.5.1より不要）
  // const form = await parseFormData.call(request);

  // Remix v1.5.1からunstable_parseMultipartFormDataがWorkersでも利用できるようになったため
  const uploadHandler = unstable_createMemoryUploadHandler({
    maxPartSize: 1024 * 1024 * 10,
  }); // default 3000000B(3MB)

  const form = await unstable_parseMultipartFormData(request, uploadHandler);
  // ここまで

  const file = form.get('file') as Blob;
  invariant(file, 'File is required');

  // ファイル名をuuidに変換、拡張子はいったんmime-typeから流用
  const fileName = `${uuid()}.${file.type.split('/')[1]}`;

  // R2バケットへファイルをアップロード
  const response = await MY_BUCKET.put(fileName, await file.arrayBuffer(), {
    httpMetadata: {
      contentType: file.type,
    },
  });

  return json(
    { message: `Put ${fileName} successfully!`, object: response },
    { status: 200 },
  );
};

export const loader: LoaderFunction = async () => {
  // バケットの一覧を取得
  const list = await MY_BUCKET.list();

  if (!list) return null;

  return json(list);
};

export default function Index() {
  const data = useLoaderData();
  const actionData = useActionData<{ message: string; object: R2Object }>();

  // useTransitionを使いアップロードの状態を取得
  const transition = useTransition();
  const isUploading = !!transition.submission;
  const formRef = useRef<HTMLFormElement>(null);

  // アップロード後にファイル選択をクリアする
  useEffect(() => {
    if (!isUploading) {
      formRef.current?.reset();
    }
  }, [isUploading]);

  return (
    <div>
      <h1>Welcome to Remix</h1>
      <div>
        <Form replace method="post" encType="multipart/form-data" ref={formRef}>
          <input type="file" name="file" accept="image/*" />
          <button type="submit" disabled={isUploading}>
            Upload
          </button>
        </Form>
      </div>
      {actionData && (
        <>
          <p>{actionData.message}</p>
          <p>{actionData && JSON.stringify(actionData.object, null, 2)}</p>
        </>
      )}
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

$ npm run deploy

import type { LoaderFunction } from '@remix-run/cloudflare';
import { json } from '@remix-run/cloudflare';
import invariant from 'tiny-invariant';

export const loader: LoaderFunction = async ({ params }) => {
  // URLパラメーターを取得
  const key = params.key;
  invariant(key, 'Key is required');

  // URLパラメーターをKeyにR2オブジェクトを取得
  const object = await MY_BUCKET.get(key);

  if (object === null) {
    return json({ message: 'Object not found' }, { status: 404 });
  }

  // R2オブジェクトのメタデータからheaderを生成
  const headers: HeadersInit = new Headers();
  object.writeHttpMetadata(headers);
  headers.set('etag', object.etag);

  // オブジェクトを返す
  return new Response(object.body, { headers });
}

$ npm run deploy

import type { LoaderFunction } from '@remix-run/cloudflare';
import { json } from '@remix-run/cloudflare';
import { Link, useLoaderData } from '@remix-run/react';

export const loader: LoaderFunction = async () => {
  // バケットのオブジェクト一覧を取得
  const objects = await MY_BUCKET.list();

  if (!objects) return null;

  return json(objects);
};

export default function () {
  const { objects } = useLoaderData<{ objects: R2Object[] }>();

  return (
    <div>
      <h1>R2 Bucket List</h1>
      <ul>
        {objects.map((object) => (
          <li key={object.key}>
            <p style={{ width: '320px' }}>
              <Link
                to={`/images/${object.key}`}
                target="_blank"
                rel="noreferrer"
              >
                <img
                  src={`/images/${object.key}`}
                  alt=""
                  style={{ width: '100%', height: 'auto' }}
                />
              </Link>
            </p>
          </li>
        ))}
      </ul>
    </div>
  );
}

$ npm run deploy