Skip to content
Concrnt Square

S3互換オブジェクトストレージの設定

オブジェクトストレージってなに？

Concrntに画像を投稿すると、その画像ファイルはどこかのサーバーに保存される必要があります。
このとき「どこに保存するか」を自分で指定できる機能が、オブジェクトストレージの設定です。

設定しない場合は、参加しているConcrntサーバーに画像が保存されます。
設定する場合は、自分で契約したクラウドストレージサービス（例: Cloudflare R2）に保存されます。

自分のストレージに保存することで、以下のようなメリットがあります。

  • 画像データを自分の管理下に置ける
  • ストレージ容量を自分でコントロールできる
  • Concrntのサーバーに依存せずにファイルを保持できる

また、参加しているサーバーがメディア投稿に対応していない場合でも、この設定を行うことで画像や動画を投稿できるようになります。
サーバー側の制限に関係なく、自分のストレージを使ってメディア投稿が可能になります。

S3互換ストレージとは？

「S3」とはAmazon Web Servicesが提供するクラウドストレージの仕組みの名前です。
この仕組みに対応（互換）したサービスであれば、AWSに限らず同じ設定方法で使えます。

Concrntでは以下のようなサービスが利用できます。S3互換APIを持つサービスであれば、ここに挙げていないものでも利用できる可能性があります。

サービス特徴
Cloudflare R2おすすめ。ストレージ10GBまで無料、転送費用が永久に0ドル。個人利用に最適（このドキュメントでの設定例はR2を使用）
Amazon S3クラウドストレージの元祖。信頼性が高いが設定が複雑
Google Cloud StorageGCPのオブジェクトストレージ。S3互換APIあり
Azure Blob StorageAzureのオブジェクトストレージ。S3互換APIあり
MinIO自分のサーバーに構築できる自己ホスト型

Concrntでは、画像などのメディアファイルをS3互換のオブジェクトストレージに保存することができます。
CloudFlare R2などのS3互換サービスを利用することで、ファイルを自身の管理下に置くことができます。

設定画面の場所

https://concrnt.world/settings/storage

設定項目

項目説明
endpointS3互換ストレージのAPIエンドポイントURL
accessKeyIdアクセスキーID
secretAccessKeyシークレットアクセスキー
bucketNameバケット名
publicUrlアップロードしたファイルへの公開アクセスURL（ベース）
forcePathStyleパス形式でバケットにアクセスするか否か

Cloudflare R2での設定例

前提

  • Cloudflare R2でバケットを作成済み
  • バケットにカスタムドメインを設定済み（例: media.example.com）
    • R2ダッシュボードの バケット → 設定 → カスタムドメイン から設定してください
    • パブリック開発URLは使用しないでください。 本番環境での使用は推奨されておらず、予告なく無効化される可能性があります
  • パブリックアクセスが有効になっている

カスタムドメインの仕組み

R2のS3 APIエンドポイント（https://<アカウントID>.r2.cloudflarestorage.com/<バケット名>）は、
ファイルのアップロード・削除などのオブジェクト操作を行うためのAPIです。
メディアファイルの取得・表示用URLとしては使用しません。

メディアを外部に公開するには、カスタムドメインの設定が必要です。
R2ダッシュボードでバケットにカスタムドメインを設定すると、そのドメイン経由でファイルを配信できるようになります。

S3 API（オブジェクト操作用）: https://<アカウントID>.r2.cloudflarestorage.com/<バケット名>
メディア配信用:               https://<カスタムドメイン>/ファイル名

publicUrl にはこのカスタムドメインのURLを設定します。

設定方法は3つのパターンがあります。用途に応じて選択してください。

パターンA: バケット直下に保存する（シンプル構成）

ファイルをバケットのルート直下に保存する構成です。1つのバケットをConcrnt専用で使う場合に向いています。

項目設定値備考
endpointhttps://<アカウントID>.r2.cloudflarestorage.com末尾にバケット名を含めない
accessKeyIdR2のアクセスキーID
secretAccessKeyR2のシークレットアクセスキー
bucketNameバケット名（例: media）バケット名として機能する
publicUrlhttps://media.example.comhttps:// を必ず含める
forcePathStyleオフ

パターンB: サブフォルダに保存する（複数用途でバケットを共用する場合）

ファイルをバケット内のサブフォルダに分けて保存する構成です。
1つのバケットを複数の用途で共用したい場合に向いています。

このパターンでは endpoint にバケット名を含め、bucketName にサブフォルダ名を指定 することで、
bucketName がサブフォルダとして機能します。

forcePathStyle をオンにすると、S3クライアントはエンドポイントのURLに bucketName をパスとして追加します。
そのため、endpointにすでにバケット名が含まれている状態で bucketName にサブフォルダ名を指定すると、
最終的なURLは …/<バケット名>/<サブフォルダ名>/ファイル名 という構造になり、サブフォルダとして機能します。

項目設定値備考
endpointhttps://<アカウントID>.r2.cloudflarestorage.com/<バケット名>末尾にバケット名を含める
accessKeyIdR2のアクセスキーID
secretAccessKeyR2のシークレットアクセスキー
bucketNameサブフォルダ名（例: concrnt）サブフォルダとして機能する
publicUrlhttps://media.example.com/concrntサブフォルダ名まで含める
forcePathStyleオンパターンBではオンが必須

この設定の場合、ファイルは バケット/concrnt/ファイル名 に保存されます。

パターンC: forcePathStyleオフのままサブフォルダに保存する（将来的に安全な構成）

パターンBと同様にサブフォルダに保存しますが、forcePathStyleをオフのまま実現するテクニックです。
AWS S3本家でPath Styleが将来廃止されることを考慮した、より安全な構成です。

endpointとpublicUrlにサブフォルダ名を含め、bucketNameには通常通りバケット名を指定します。

項目設定値備考
endpointhttps://<アカウントID>.r2.cloudflarestorage.com/<サブフォルダ名>末尾にサブフォルダ名を含める
accessKeyIdR2のアクセスキーID
secretAccessKeyR2のシークレットアクセスキー
bucketNameバケット名（例: bucket）通常通りバケット名を指定
publicUrlhttps://media.example.com/<サブフォルダ名>サブフォルダ名まで含める
forcePathStyleオフ

この設定の場合、実際にアップロードされた時のエンドポイント構文は以下のようになります。

https://<アカウントID>.r2.cloudflarestorage.com/<バケット名>/<サブフォルダ名>/ファイル名

CORS設定

どのパターンでも、R2ダッシュボードの バケット → 設定 → CORS Policy に以下のJSONを貼り付けてください。

[{
    "AllowedOrigins": ["*"],
    "AllowedMethods": ["GET", "POST", "PUT", "DELETE"],
    "AllowedHeaders": ["*"]
}]

特定のドメインからのみアクセスを許可したい場合は AllowedOrigins を絞ることを推奨します。

[{
    "AllowedOrigins": ["https://concrnt.world"],
    "AllowedMethods": ["GET", "POST", "PUT", "DELETE"],
    "AllowedHeaders": ["*"]
}]

注意事項

publicUrlには「https://」スキームを必ず含める

Concrntは画像表示にHyperproxyを経由する仕組みになっています。
Hyperproxyは publicUrl の値をそのままURLとして解釈するため、
スキーム（https://）が含まれていないと 400 Bad Request エラーになります。

# ❌ 動かない
media.example.com


# ✅ 正しい
https://media.example.com

Hyperproxyの仕組み

ConcrntはアップロードされたファイルをHyperproxy経由で表示します。

ブラウザ
  ↓
https://<concrntサーバー>/image/x/<publicUrl>/<ファイル名>
  ↓ (Hyperproxyが代理取得)
https://<publicUrl>/<ファイル名>
  ↓
オブジェクトストレージ

publicUrl に設定した値がそのままHyperproxyの取得先URLのベースになります。

forcePathStyleについて

forcePathStyle はS3クライアントがバケットにアクセスする際のURL形式を切り替えるオプションです。

forcePathStyleアクセスURL形式
オフ（Virtual Hosted Style）https://エンドポイント/ファイル名
オン（Path Style）https://エンドポイント/bucketName/ファイル名

パターンAではカスタムドメインがすでにバケットに直接紐付いているためオフ、
パターンBではendpointにバケット名を含めた上でbucketNameをサブフォルダとして機能させるためオンにします。
パターンCではforcePathStyleをオフのままendpointとpublicUrlにサブフォルダ名を含めることで、サブフォルダ分けを実現します。

なお、AWS S3本家ではPath Style（forcePathStyle）は将来的に廃止方向のため、
可能であればパターンAまたはパターンC（forcePathStyleオフ）の構成を推奨します。

とりあえず使いたい人向け：Cloudflare R2 かんたんセットアップ

難しいことは後回し！まずは使えるようにしたい方向けに、Cloudflare R2を使った一番シンプルな設定手順を説明します。

ステップ1：Cloudflareアカウントを作る

Cloudflare にアクセスしてアカウントを作成してください。
無料プランで問題ありません。

ステップ2：R2のバケットを作る

  1. Cloudflareダッシュボードの左メニューから R2 オブジェクトストレージ を開く
  2. バケットを作成する をクリック
  3. バケット名を決めて作成する（例: my-concrnt-media）

ステップ3：公開URLを用意する

アップロードしたファイルを外部から閲覧できるようにするためのURLが必要です。
方法は以下の2つから選んでください。

方法A：カスタムドメインを設定する（推奨）

Cloudflareで管理しているドメインをR2バケットに紐付けることで、安定した公開URLが得られます。

  1. 作成したバケットを開き、設定 タブをクリック
  2. カスタムドメイン の項目で ドメインを接続する をクリック
  3. 使用するドメインを入力する（例: media.example.com）

ドメインを持っていない場合は Cloudflare Registrar などで取得できます。年間数百円程度から購入できます。

方法B：R2のパブリック開発URLを使う（非推奨・ドメインなしで手軽）

R2が提供する r2.dev のURLをそのまま使う方法です。ドメインがなくても使えます。

  1. 作成したバケットを開き、設定 タブをクリック
  2. R2.dev サブドメイン の項目で パブリックアクセスを許可する を有効にする
  3. 表示されたURL（https://pub-xxxx.r2.dev の形式）をメモしておく

ステップ4：APIトークンを発行する

  1. Cloudflareダッシュボードの左メニューから R2 オブジェクトストレージ を開く
  2. 右上の APIの管理 をクリック
  3. APIトークンを作成する をクリック
  4. 権限は オブジェクトの読み取りと書き込み を選び、対象バケットを指定して作成
  5. 表示された アクセスキーID と シークレットアクセスキー をメモしておく（シークレットアクセスキーはこの画面でしか確認できません）

ステップ5：Concrntに設定を入力する

設定画面 を開き、以下のように入力してください。

項目入力する値
endpointhttps://<アカウントID>.r2.cloudflarestorage.com（R2の概要ページに記載）
accessKeyIdステップ4でメモしたアクセスキーID
secretAccessKeyステップ4でメモしたシークレットアクセスキー
bucketNameステップ2で決めたバケット名（例: my-concrnt-media）
publicUrlhttps:// + ステップ3で設定したカスタムドメイン（例: https://media.example.com）
forcePathStyleオフ

ステップ6：CORS設定をする

R2ダッシュボードでバケットを開き、設定 → CORS Policy に以下を貼り付けて保存してください。

[{
    "AllowedOrigins": ["https://concrnt.world"],
    "AllowedMethods": ["GET", "POST", "PUT", "DELETE"],
    "AllowedHeaders": ["*"]
}]

以上で設定完了です！Concrntで画像を投稿してみてください。

このページは @TomXV が作成しました。