🦀 Rust × Next.js × AWS × Terraform Tech Blog

Rust をバックエンド、Next.js 16（TypeScript）をフロントエンドに使い、AWS × Terraform でインフラも含めて作る個人テックブログ用モノレポです。

Rust 公式ドキュメントを超初心者向けに噛み砕く記事や普段の開発で得た知見や学習内容を書きながら、アプリケーションとインフラの両方を学ぶことを目的としています。

---

目標 フルスタック開発の習得 インフラ自動化の実践 技術記事の執筆

進捗 フロントエンド構築 バックエンド API 開発 AWS インフラ構築

技術選定理由 Rust: パフォーマンス & 安全性 Next.js: モダンな React 開発 AWS: スケーラブルなクラウド

---

ドキュメント目次

詳細ドキュメントは各ディレクトリのREADMEをご覧ください

ディレクトリ	内容	ドキュメント
Frontend Next.js 16 + TypeScript	App Router 設計 Tailwind CSS 構成 API 連携方法 開発環境構築	Frontend README
Backend Rust + Axum + SQLx	レイヤードアーキテクチャ データベース設計 セキュリティ設計 API 仕様	Backend README
Infrastructure AWS + Terraform	Terraform 構成 AWS リソース設計 環境分離戦略 デプロイ手順	Infrastructure README
Packages 共通ライブラリ	UI コンポーネント ユーティリティ関数 型定義・スキーマ 使用方法	各パッケージのREADME（予定）

---

技術スタック

Frontend	Backend	Infrastructure
App Router 構成 コンポーネント駆動開発 自動テスト & Lint	非同期処理 型安全な DB アクセス レイヤードアーキテクチャ	Infrastructure as Code コンテナオーケストレーション マネージドサービス活用

---

アーキテクチャ概要

graph TB
    subgraph "🌐 Frontend"
        A[Next.js 16<br/>App Router]
        B[Tailwind CSS<br/>shadcn/ui]
        C[TypeScript<br/>React]
    end

    subgraph "⚡ Backend"
        D[Rust<br/>Axum]
        E[SQLx<br/>PostgreSQL]
        F[Tokio<br/>Async Runtime]
    end

    subgraph "☁️ AWS Infrastructure"
        G[ECS Fargate<br/>App Runner]
        H[RDS/Aurora<br/>PostgreSQL]
        I[ALB<br/>CloudFront]
    end

    A --> D
    D --> E
    G --> H
    D --> G

    style A fill:#61dafb
    style D fill:#ce422b
    style G fill:#ff9900

Loading

ディレクトリ構成

🔍 プロジェクト全体構造

blog/
├── 📱 apps/
│   ├── 🌐 frontend/      # Next.js 16 + TS + Tailwind + shadcn + Jest + Husky
│   └── ⚡ backend/       # Rust + Tokio + Axum + SQLx
├── 📦 packages/
│   ├── 🎨 ui/            # 共通 UI コンポーネント（TS/React）
│   ├── 🛠️ utils/         # フロント用ユーティリティ（TS）
│   └── 📋 schema/        # API レスポンスなどの型・スキーマ（TS）
├── 🏗️ infra/
│   └── terraform/
│       ├── 🧪 staging/   # ステージング環境用の AWS リソース定義
│       └── 🚀 prod/      # 本番環境用の AWS リソース定義
├── 🐳 docker-compose.yml # ローカル開発用（frontend + backend + local Postgres）
├── 📝 .env.example       # ルート共通の環境変数テンプレ
├── 🚫 .gitignore
└── 📖 README.md

---

Frontend Architecture

Next.js 16 + TypeScript + Tailwind CSS

📁 Frontend ディレクトリ構造

apps/frontend/
├── 📱 app/
│   └── (blog)/
│       ├── 🎨 layout.tsx
│       ├── 📄 page.tsx          # 記事一覧
│       └── [slug]/
│           └── 📖 page.tsx      # 記事詳細
├── 🧩 components/
│   ├── 🏗️ layout/
│   └── 📝 blog/
├── 📚 lib/
│   ├── 🔌 api-client/           # Rust backend API 用の HTTP クライアント
│   └── 🔐 auth/                 # 認証・セッションロジック（必要に応じて）
├── 🧪 tests/
│   ├── unit/
│   └── e2e/
├── 🖼️ public/
├── 🎨 styles/
│   └── globals.css           # Tailwind エントリ
├── ⚙️ tailwind.config.ts
├── 📦 postcss.config.mjs
├── 🧪 jest.config.ts
├── ⚙️ next.config.mjs
├── 📋 package.json
└── 📄 tsconfig.json

🎯 App Router 構成 app/(blog)/ でブログ機能を整理 URL とコードの両方を最適化 ファイルベースルーティング

🎨 UI/UX Tailwind CSS でユーティリティファースト shadcn/ui で一貫性のあるデザイン レスポンシブ対応

🧪 品質保証 Jest + React Testing Library Husky で pre-commit チェック TypeScript による型安全性

---

Backend Architecture

Rust + Axum + SQLx + PostgreSQL

🦀 Backend ディレクトリ構造

apps/backend/
├── 📦 src/
│   ├── 🚀 main.rs
│   ├── 🌐 api/               # ルーティング & ハンドラ（REST / JSON）
│   │   ├── mod.rs
│   │   ├── 📝 posts.rs       # /posts, /posts/{id}
│   │   └── 💚 health.rs      # /health
│   ├── 🏛️ domain/            # ドメインロジック（HTTP/DB 非依存）
│   │   ├── mod.rs
│   │   └── 📄 post.rs        # Post エンティティ
│   ├── 🏗️ infrastructure/    # DB・外部サービス
│   │   ├── mod.rs
│   │   └── 🗄️ db.rs          # SQLx + PostgreSQL
│   └── 🔒 security/          # セキュリティ関連（ヘッダ・認証など）
│       ├── mod.rs
│       ├── 🛡️ headers.rs
│       └── 🔐 auth.rs
└── 📋 Cargo.toml

🌐 API Layer Axum でルーティング JSON レスポンス エラーハンドリング OpenAPI 対応

🏛️ Domain Layer ビジネスロジック エンティティ定義 HTTP/DB 非依存 テスタブル設計

Infrastructure SQLx で型安全な DB アクセス PostgreSQL 連携 マイグレーション管理 コネクションプール

🔒 Security セキュリティヘッダ 認証・認可 CORS 設定 レート制限

🚀 デプロイ先: AWS ECS Fargate / App Runner でコンテナとして動作

---

packages

packages/
├── ui/
│   ├── src/components/
│   │   ├── Button.tsx
│   │   ├── Badge.tsx
│   │   ├── CodeBlock.tsx
│   │   └── Layout.tsx
│   ├── package.json
│   └── tsconfig.json
├── utils/
│   ├── src/
│   │   ├── date.ts        # 日付整形など
│   │   ├── slug.ts
│   │   └── markdown.ts
│   ├── package.json
│   └── tsconfig.json
└── schema/
    ├── src/
    │   ├── post.ts        # Post の型 / Zod スキーマ
    │   └── index.ts
    ├── package.json
    └── tsconfig.json

フロントエンド間で共通利用する UI / ユーティリティ / スキーマをここにまとめる。

---

infra/terraform

infra/terraform/
├── staging/
│   ├── main.tf
│   ├── variables.tf
│   └── outputs.tf
└── prod/
    ├── main.tf
    ├── variables.tf
    └── outputs.tf

Terraform を使って、VPC / ECS / ALB / RDS などの AWS リソースをコードとして管理。

ステージングと本番でディレクトリを分けておき、ワークスペースや変数で環境差分を吸収する構成にする。

---

ローカル開発フロー

開発環境セットアップ

1️⃣ 依存関係インストール	2️⃣ 環境変数設定	3️⃣ 開発サーバ起動
# フロントエンド cd apps/frontend npm install # バックエンド cd apps/backend cargo build	# 環境変数テンプレをコピー cp .env.example .env # 各アプリ固有の設定 cp apps/frontend/.env.example \ apps/frontend/.env.local cp apps/backend/.env.example \ apps/backend/.env.local	# Docker でローカル DB 起動 docker compose up -d # フロントエンド開発サーバ cd apps/frontend && npm run dev # バックエンド開発サーバ cd apps/backend && cargo run

Frontend: http://localhost:3000
Backend: http://localhost:8000
🗄️ Database: localhost:5432

---

AWS インフラストラクチャ

Infrastructure as Code with Terraform

Staging Environment	Production Environment
cd infra/terraform/staging terraform init terraform plan terraform apply リソース構成 ECS Fargate (開発用) RDS (小規模インスタンス) ALB + CloudFront S3 (静的アセット)	cd infra/terraform/prod terraform init terraform plan terraform apply リソース構成 ECS Fargate (本番用) Aurora Serverless v2 ALB + CloudFront + WAF S3 + CloudFront

graph LR
    subgraph "🌐 Frontend"
        A[Next.js App]
    end

    subgraph "☁️ AWS"
        B[CloudFront]
        C[ALB]
        D[ECS Fargate]
        E[RDS/Aurora]
        F[S3]
    end

    A --> B
    B --> C
    C --> D
    D --> E
    B --> F

    style B fill:#ff9900
    style D fill:#ff9900
    style E fill:#527fff

Loading

📝 学習ログ: 各インフラ構成の構築過程は技術ブログ記事として記録し、学習内容を共有予定

---

プロジェクトの特徴

Modern Rust 最新の Rust エコシステムを活用した 高性能・安全なバックエンド開発

Next.js 16 App Router を使った モダンなフロントエンド開発

AWS Native クラウドネイティブな スケーラブルなインフラ構築

Learning by Building 実装しながら学ぶ 技術ブログとしての記録

---

この README について

「Rust × Next.js × AWS × Terraform でテックブログを作るモノレポ」の全体像とアーキテクチャの意図をまとめたものです。

実装と学習の進捗に合わせて随時アップデートしていきます。