Tech-In-Bytes

AWS Django PostgreSQL
Tech-In-Bytes

概要

Tech-In-Bytes は、ソフトウェア開発者や IT エンジニア向けのモダンな技術ブログプラットフォームです。読みやすさを重視した UI と、リッチな記事編集体験、そして AWS(EC2 / RDS / S3 / CloudFront)を活用した本番グレードのインフラ構成を備えています。

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

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

Django によるサーバーサイドレンダリングを採用しており、フロントエンドは Django テンプレートとプレーン JavaScript を中心とした構成です。

開発のこだわり

  • 設計・開発からAWSインフラ構築・運用まで、すべての工程を一人で担当
  • MFA・レートリミット・HSTS・HTMLサニタイズなど、セキュリティを重視した設計・実装
  • TinyMCE、S3、CloudFront を組み合わせた画像アップロード基盤を実装
  • AWS(EC2 / 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 ビュー経由での画像アップロード
  • Pillow を使ったサーバーサイドでの画像検証・リサイズ・再エンコード
  • メディアファイルを AWS S3 に保存し、CloudFront 経由で配信
  • ユーザー / 記事ごとの画像枚数・ストレージ使用量に対するクォータ管理

UX / UI

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

運用・デプロイ

  • AWS 本番用設定モジュール(production.py
  • EC2 上のデプロイ用スクリプト(Nginx、Gunicorn、バックアップ / リストア)
  • CloudFront 設定ドキュメントの整備

パフォーマンス最適化

  • CloudFront による静的ファイルおよびメディアの配信
  • 最適化されたキャッシュ設定によるレスポンス性能の向上

技術スタック

  • フロントエンド: Django テンプレート、CSS、プレーン JavaScript
  • バックエンド: Python 3、Django 5.2
  • データベース: PostgreSQL on AWS RDS
  • リッチテキストエディタ: TinyMCE
  • フォーム / HTML サニタイズ: Django フォーム、bleach
  • タグ機能: django-taggit
  • 画像処理: Pillow
  • ストレージ連携: django-storages + boto3(AWS S3)
  • Web サーバ: Gunicorn + Nginx on EC2
  • CDN / エッジ: AWS CloudFront
  • DNS / 証明書: AWS Route 53 + ACM

アーキテクチャ

CloudFront

  • サイト全体の HTTPS エンドポイント
  • ACM 証明書による SSL 終端
  • EC2(Nginx)へのリクエスト転送
  • /static/* / /media/* を S3 に振り分けるパスベースのキャッシュビヘイビア

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

  • Ubuntu 上で Nginx(80番ポート)+ Gunicorn(Unix ソケット)+ Django アプリを稼働
  • RDS とはプライベートネットワーク経由で接続
  • 注記: 本アプリはポートフォリオ用途のため、コスト最適化を優先し ALB および NAT Gateway は未使用です。実運用環境では、可用性・セキュリティ向上のためこれらの導入を想定しています。また、現構成では RDS をパブリックサブネットに配置していますが、実運用ではプライベートサブネットへの配置を前提とします。

RDS(PostgreSQL)

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

S3(Static & Media)

  • 1 つのバケットを論理的に分割して使用(static/media/ プレフィックスで分離)
  • メディアファイルはユーザーアップロード、静的ファイルは collectstatic により配置
  • CloudFront 経由でカスタムドメインから配信

Route 53 + ACM

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

スクリーンショット

ホームページ
ホームページ
記事の検索
記事の検索
記事の閲覧
記事の閲覧
記事の新規作成
記事の新規作成
画像アップロード
画像アップロード
コメント投稿
コメント投稿

デモ動画