前回の記事では、PostgreSQLの組み込み全文検索機能を使用して、フォーラムで投稿を検索できるようにしました。
次に、投稿への画像アップロードサポートを追加することで、サイトの機能をさらに強化していきます。
画像アップロードのプロセスは次のとおりです。
- ユーザーが画像ファイルを選択して送信します。
- FastAPIがデータを受信した後、S3のような専用オブジェクトストレージサービスに画像ファイルを転送します。
なぜサーバーに直接保存しないのか？
これは便利ですが、いくつかの問題があります。
- 画像の永続ストレージを維持する必要があります。これは、アプリケーションをデプロイするたびに画像ファイルが失われないようにすることを意味します。
- サーバーから画像を配信すると、サーバーの高価な帯域幅とコンピューティングリソースが消費されます。オブジェクトストレージでこれを処理するとサーバーのコンピューティングリソースは使用されず、帯域幅ははるかに安価です。
そのため、S3のような外部オブジェクトストレージサービスを使用する必要があります。
ステップ1：S3ストレージバケットの準備
S3互換のストレージサービスが必要です。以下から選択できます。
- Leapcell。Leapcellは、Webサイトの構築、データベースのデプロイを可能にするオールインワンのバックエンドサービスを提供するプラットフォームであり、S3互換のオブジェクトストレージも含まれています。
- Amazon S3（AWS公式サービス）
- S3互換とマークされている限り、他のクラウドプロバイダー。
次に、例としてLeapcellを使用します。
Leapcellのメインインターフェイスにログインし、「オブジェクトストレージの作成」をクリックします。
名前を入力してオブジェクトストレージを作成します。
オブジェクトストレージの詳細ページで、接続に使用するパラメータであるエンドポイント、アクセスキーID、シークレットアクセスキーを確認できます。これらは後でバックエンド構成で使用します。
インターフェイスは非常に便利なUIも提供しており、ブラウザで直接ファイルをアップロードおよび管理できます。
ステップ2：依存関係のインストール
公式AWS Python SDKであり、すべてのS3プロトコルサービスと完全互換のboto3を使用します。
ステップ3：構成の追加
すべてのオブジェクトストレージ構成を一元管理するために、プロジェクトのルートディレクトリにconfig.pyを作成します。
config.py
ステップ4：S3アップロードユーティリティの作成
ロジックを明確にするために、ファイルアップロードを処理するためだけの新しいファイルs3_utils.pyを作成します。
s3_utils.py
ステップ5：データベースモデルの更新
アップロードされた画像のURLを保存するために、postsテーブルにフィールドを追加する必要があります。
models.pyを開き、Postモデルを変更します。
models.py (Postモデルの更新)
データベーステーブル構造も更新する必要があります。対応するSQLステートメントは次のとおりです。
Leapcellを使用してデータベースが作成された場合、
これらのSQLステートメントは、Webベースの操作パネルで直接実行できます。
ステップ6：バックエンドルートのリファクタリング
次に、main.pyのcreate_postルートを変更して、ファイルアップロードを受け付けるようにしましょう。
main.py (create_postルートの更新)
主な変更点は次のとおりです。
create_postパラメータにimage: Optional[UploadFile] = File(None)が含まれるようになりました。imageパラメータのコンテンツ（await image.read()）を読み込み、s3_utils.upload_file_to_s3を呼び出して画像をオブジェクトストレージにアップロードします。- 最後に、
models.Postオブジェクトを作成するときに、前のステップから返されたimage_urlをデータベースに保存します。
ステップ7：フロントエンドテンプレートの更新
最後に、ファイルアップロードフィールドを追加し、画像を表示するためにフロントエンドページを更新する必要があります。
templates/posts.html (更新)
templates/post_detail.html (更新)
実行と検証
uvicornサーバーを再起動します。
http://127.0.0.1:8000にアクセスします。
「Create New Post」フォームにファイル選択ボタンが表示されます。
新しい投稿を作成し、画像を追加してみてください。送信後、投稿した画像が表示されます。
結論
オブジェクトストレージを使用して、フォーラムに画像アップロード機能を追加することに成功しました。
現在、すべての投稿が同じページに集中しています。フォーラムのコンテンツが増えるにつれて、これは非常に乱雑になります。
次の記事では、フォーラムに**カテゴリ（サブフォーラム）**を追加し、投稿をさまざまなトピックで整理できるようにすることで、フォーラムをより構造化されたものにします。
Xでフォローする：@LeapcellJapan
関連記事：
