くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

トップ > Cloudflare > Cloudflare R2に入門する

Cloudflare R2に入門する

Cloudflare CloudflareR2

画像扱う系のことがしたくて、Cloudflare R2に入門してみた(*´ω｀*)

R2はS3互換のため、aws-sdk-js-v3を使って操作するらしい

流れ

だいたいこんな感じ

インストール

まずはインストール

pnpm add @aws-sdk/client-s3

使い方

使い方はこんな感じ

import {
  HeadObjectCommand,
  PutObjectCommand,
  S3Client,
} from "@aws-sdk/client-s3";

const R2_ENDPOINT = "https://XXXXXXX.r2.cloudflarestorage.com";
const R2_ACCESS_KEY_ID = "...";
const R2_SERCRET_ACCESS_KEY = "...";
const R2_BUCKET_NAME = "my-bucket-name";

// S3クライアントの初期化
const s3Client = new S3Client({
  region: "auto",
  endpoint: R2_ENDPOINT,
  credentials: {
    accessKeyId: R2_ACCESS_KEY_ID,
    secretAccessKey: R2_SERCRET_ACCESS_KEY,
  },
});

// 書き込み
export async function writePngFileR2(body: Buffer, path: string) {
  await s3Client.send(new PutObjectCommand({
    Bucket: R2_BUCKET_NAME,
    Key: path,
    Body:body,
    // 指定しないと、全部application/octet-streamになる。。
    ContentType: "image/png",
  }));
}

// Headを使って存在確認
export async function existsFileR2(path: string): Promise<boolean> {
  try {
    await s3Client.send(new HeadObjectCommand({
      Bucket: R2_BUCKET_NAME,
      Key: path,
    }));
    return true;
  } catch (error: any) {
    // 存在しない場合、NoSuchKeyが投げられる
    return error?.name === "NoSuchKey";
  }
}

あとは、接続したドメイン＋パスでアクセスできる。

S3 APIでの各種操作

XxxCommandを使って操作するっぽい。

  • PutObjectCommand: ファイルの書き込み
  • HeadObjectCommand: メタ情報の取得
  • GetObjectCommand: ファイルの取得
  • DeleteObjectCommand: ファイルの削除
  • などなど

S3のすべてに互換性があるわけではなく、
対応状況は以下にまとまってる。

Content Type

PutObjectCommand時に、ContentTypeを指定しないと、
全部application/octet-streamになる。。

対応関係はこんな感じ

"png" : "image/png",
"jpeg": "image/jpeg",
"gif" : "image/gif",
"webp": "image/webp",
"svg" : "image/svg+xml",

以上!! 意外と簡単に使えた(*´ω｀*)

参考にしたサイト様