Open SuzukiTakamasa opened 6 months ago
メモ:Next.jsアプリケーションからr2 workerインスタンスを経由してR2にアクセスするようにする
S3 APIで画像にアクセスできるようにする
以下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));
});
認証ヘッダについては要確認
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); });