Wikiに画像アップロード機能を追加する

[SuzukiTakamasa]

• [x] Cloudflare R2バケットを新規作成する
• [x] Wiki作成時に画像アップロードフォームとボタンを配置する
• [x] ボタン押下で画像アップロードAPIを実行する(worker-rs側でR2に画像バイナリをPUTするAPIを叩く) https://www.postman.com/cloudflare-r2/workspace/cloudflare-r2/request/20913290-d4104b0b-4007-4cee-8c78-9be27819a611?tab=body
• [ ] wiki/create APIにimage_urlのパラメータを追加(このパラメータに画像の参照先URIを渡す)
• [ ] D1のwikisテーブルのスキーマを変更する(image_urlカラムを追加する)
• [ ] アップロードした画像については、画像ファイル名をアップロードフォームの下に表示し、削除ボタン押下で削除できるようにする(削除用のエンドポイントもCloudflare Workerに生やす)

[SuzukiTakamasa]

メモ：Next.jsアプリケーションからr2 workerインスタンスを経由してR2にアクセスするようにする

[SuzukiTakamasa]

S3 APIで画像にアクセスできるようにする

[SuzukiTakamasa]

以下GPT4oの回答

import { R2_BUCKET_NAME, R2_ACCOUNT_ID, R2_ACCESS_KEY_ID, R2_SECRET_ACCESS_KEY } from 'env';

// R2バケットへのアクセス設定
const BUCKET_NAME = R2_BUCKET_NAME;
const ACCOUNT_ID = R2_ACCOUNT_ID;
const ACCESS_KEY_ID = R2_ACCESS_KEY_ID;
const SECRET_ACCESS_KEY = R2_SECRET_ACCESS_KEY;

async function fetchR2Image(filename: string): Promise<Response> {
    const r2RequestUrl = `https://${ACCOUNT_ID}.r2.cloudflarestorage.com/${BUCKET_NAME}/${filename}`;

    const headers = new Headers();
    headers.set('Authorization', `Basic ${btoa(`${ACCESS_KEY_ID}:${SECRET_ACCESS_KEY}`)}`);

    const r2Response = await fetch(r2RequestUrl, { headers });

    if (!r2Response.ok) {
        return new Response('Image not found', { status: r2Response.status });
    }

    const imageData = await r2Response.arrayBuffer();
    const mimeType = r2Response.headers.get('Content-Type') || 'application/octet-stream';

    return new Response(imageData, {
        status: 200,
        headers: {
            'Content-Type': mimeType,
        }
    });
}

addEventListener('fetch', event => {
    const url = new URL(event.request.url);
    // URLのパスからファイル名を取得
    const filename = url.pathname.slice(1);

    event.respondWith(fetchR2Image(filename));
});

[SuzukiTakamasa]

認証ヘッダについては要確認

[SuzukiTakamasa]

Cloudflare R2は、Amazon S3と似たオブジェクトストレージサービスです。R2バケットに対してプライベートアクセスを設定し、画像ファイルを取得する方法について以下で説明します。

前提条件 Cloudflareアカウントがあること R2バケットが作成され、そこに画像ファイルがアップロードされていること 手順 ステップ 1: API トークンの取得 まず、Cloudflare APIを利用してバケットにアクセスするためのAPIトークンを取得します。

Cloudflareダッシュボードにログインします。 「My Profile」に移動し、「API Tokens」をクリックします。 「Create Token」をクリックし、適切な権限を持つカスタムトークンを作成します。 トークンには以下の権限が必要です：

Account: R2 Storage - Read Account: R2 Storage - Write また、特定のアカウントとバケットに権限を制限することもできます。

ステップ 2: R2バケットの設定 R2バケットの設定で、オブジェクトがプライベートであることを確認します。

CloudflareダッシュボードでR2サービスを開きます。 対象のバケットを選択します。 バケットの「設定」タブに移動し、アクセスコントロールを設定します。 ステップ 3: 画像ファイルを取得するスクリプト 次に、プライベートバケットから画像ファイルを取得するためのスクリプトを作成します。

以下はNode.jsを使用した例です。

JavaScript

const fetch = require('node-fetch');

// クラウドフレアAPIエンドポイントと認証情報 const R2_ACCOUNT_ID = 'your-account-id'; const R2_BUCKET_NAME = 'your-bucket-name'; const OBJECT_KEY = 'path/to/your/image.jpg'; // 取得したい画像ファイルのパス const CF_API_TOKEN = 'your-api-token';

// 画像ファイルを取得する関数 async function getImageFromR2() { const url = https://${R2_ACCOUNT_ID}.r2.cloudflarestorage.com/${R2_BUCKET_NAME}/${OBJECT_KEY};

const response = await fetch(url, {
    method: 'GET',
    headers: {
        'Authorization': `Bearer ${CF_API_TOKEN}`
    }
});

if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
}

const imageBuffer = await response.buffer();
return imageBuffer;

}

// 使用例 getImageFromR2() .then(imageBuffer => { console.log('Image fetched successfully'); // 画像バッファをファイルシステムに保存する、あるいは他の処理を行います。 }) .catch(error => { console.error('Error fetching image:', error); });