Tech-In-Bytes

AWS Django PostgreSQL
Tech-In-Bytes

概要

ech‑In‑Bytes は、開発者・IT プロフェッショナル・テック系エンジニア向けのモダンなブログプラットフォームです。読みやすさを重視した UI と、リッチな記事編集体験、そして AWS(EC2 / RDS / S3 / CloudFront)上の本番運用を想定したインフラ構成を備えています。

Tech‑In‑Bytes は大きく 2 つの体験を提供します。

  • 読者向け: 記事一覧の閲覧、タグによる絞り込み、検索、いいね機能、SEO 対応 URL での快適な閲覧
  • 投稿者向け: TinyMCE を用いたリッチテキストエディタ、カバー画像や本文中の画像アップロード、アバター付きプロフィールなどを備えたブログ投稿・管理機能

Django によるサーバーサイドレンダリングを採用しており、フロントエンドは従来の HTML/CSS/JavaScript ベースです。本番環境は AWS 上(EC2 + Nginx + Gunicorn + RDS + S3 + CloudFront)で動作する構成になっています。

開発のこだわり

Django によるサーバーサイドレンダリングを採用しており、フロントエンドは従来の HTML/CSS/JavaScript ベースです。本番環境は AWS 上(EC2 + Nginx + Gunicorn + RDS + S3 + CloudFront)で動作する構成になっています。

工夫した点・学んだこと

本プロジェクトでは、要件定義・DB 設計・フロントエンド実装・AWS インフラ構築まで、すべての工程を単独で担当しました。

セキュリティ面では、MFA の導入や bleach による HTML サニタイズ、本番環境向けの HSTS・セキュア Cookie・レートリミット設定など、開発初期から意識的に取り組みました。単に動くものを作るだけでなく、実運用に耐えうるセキュリティ品質を目指した点が本プロジェクト最大の特徴です。

一方、TinyMCE と Django・S3 の連携には想定以上の時間がかかりました。特に、エディタ内でのインライン画像アップロードを S3 に直接保存しつつ CloudFront 経由で配信する仕組みの実装は、公式ドキュメントだけでは解決できない部分も多く、試行錯誤を重ねました。この経験を通じて、サードパーティライブラリの深い理解と、問題を粘り強く解決する力を身につけました。

機能一覧

  • 認証・セキュリティ
  • ユーザー登録 / ログイン / ログアウト
  • メールアドレス検証
  • 多要素認証(MFA)
  • パスワードリセット(メール送信)
  • 本番環境向けの強化設定(HSTS, セキュア Cookie, レートリミット など)

  • ブログ機能

  • ブログ記事の作成 / 閲覧 / 更新 / 削除(CRUD)
  • TinyMCE を利用したリッチテキストエディタ
  • 記事ごとのカバー画像 + 本文中のインライン画像
  • django-taggit によるタグ機能
  • 記事へのいいね / いいね解除
  • コメント機能
  • 検索機能 + SEO フレンドリーな URL

  • ユーザープロフィール

  • アバター画像付きプロフィールページ
  • 基本的なアカウント設定・管理

  • メディアパイプライン

  • Django のビュー(フォーム投稿 / TinyMCE 用アップロードエンドポイント)経由での画像アップロード
  • Pillow を使ったサーバーサイドでの画像検証・リサイズ・再エンコード
  • メディアファイルは AWS S3 に保存され、CloudFront 経由で配信
  • ユーザー / 記事ごとの画像枚数・使用ストレージ量に対するクォータ管理

  • UX / UI

  • カスタム CSS によるレスポンシブデザイン
  • トップページ、記事一覧、詳細ページ、いいねした記事一覧、投稿管理ページなど

  • 運用まわり

  • AWS 本番用設定モジュール(production.py
  • EC2 上のデプロイ用スクリプト(Nginx, Gunicorn, バックアップ / リストア)
  • EC2 + S3 の前段に置く CloudFront 設定用ドキュメント

技術スタック

  • バックエンド: Python 3, Django 5.2

  • データベース:

    • SQLite(ローカル開発)
    • PostgreSQL on AWS RDS(本番)
  • フロントエンド: Django テンプレート, CSS, プレーン JavaScript

  • フォーム / HTML サニタイズ

    • Django フォーム
    • TinyMCE 連携
    • bleach による HTML サニタイズと安全な抜粋処理
  • タグ機能: django-taggit

  • メディア・ストレージ

    • Pillow による画像処理
    • django-storages + boto3 を利用した AWS S3 連携
  • Web サーバ(本番): EC2 上の Gunicorn + Nginx

  • CDN / エッジ: AWS CloudFront(HTTPS 終端、キャッシュ、static / media のパスベースルーティング)

  • 設定 / 環境変数

    • ローカル開発では .env ファイル + python-dotenv
    • 本番 EC2 では /var/www/techinbytes/.env を systemd (EnvironmentFile) から読み込み

アーキテクチャ

AWS 上の高レベルな構成は以下の通りです。

  • CloudFront
  • サイト全体の HTTPS エンドポイント
  • ACM 証明書による SSL 終端
  • EC2(Nginx)の HTTP(80) にリクエストをフォワード
  • /static/* / /media/* を S3 に振り分けるパスベースビヘイビア

  • EC2(アプリケーションサーバ)

  • Ubuntu 上で以下を稼働:
    • Nginx(80 番ポート, CloudFront の背後)
    • Gunicorn(Unix ソケット)
    • Django アプリ(tech_bloggers
  • 設定値は /var/www/techinbytes/.env から取得
  • RDS とはプライベートネットワーク経由で接続
  • 実際の本番環境では設置するべきですが、本件はデモアプリのため、コスト削減目的で下記のインフラ装置を利用しておりません。
     - Aplication Load Balancer ($16 usd/月)

    • NAT Gateway for RDS ( $45 usd/月) 代わりに RDS がパブリックサブネットに設置してあります。
       注意:セキュリティの為、実際の本番環境ではRDSをプライベートサブネットに置くべきです。
  • RDS(PostgreSQL)

  • Django のメインデータベース
  • sslmode=require による SSL 接続を強制

  • S3(Static & Media)

  • 1 つのバケットを論理的に分割して利用:
    • static/USE_S3_STATIC=True の場合の静的ファイル)
    • media/(ユーザーアップロード)
  • django-storagesStaticStorage / MediaStorage 経由でアクセス
  • CloudFront(任意のカスタムドメイン)から配信

  • Route 53 + ACM

  • ドメインの A/ALIAS レコードを CloudFront ディストリビューションに向ける
  • ACM 証明書を CloudFront にアタッチし、HTTPS を提供

デモ動画