codyhara.netの構築記録 / Building codyhara.net

🌐 This post is available in Japanese and English / この記事は日本語と英語で書かれています

このサイト「codyhara.net」の構築過程と技術構成について記録します。モダンな静的サイト生成からAWSでのセキュアな公開まで、実際に使用した技術スタックと設定方法を詳しく解説します。

🚀 技術スタック

フロントエンド

• Astro - 静的サイトジェネレーター
• TypeScript - 型安全な開発
• Markdown - ブログ記事の執筆

インフラストラクチャ（AWS）

• S3 - 静的ファイルホスティング（プライベートバケット）
• CloudFront - CDN・SSL終端・キャッシュ
• Route 53 - DNS管理
• Certificate Manager (ACM) - SSL証明書管理
• CloudFront Functions - URLリライト処理

🏗️ アーキテクチャ構成

Internet
    ↓ HTTPS
Route 53 (DNS)
    ↓
CloudFront (CDN + SSL)
    ↓ OAC (Origin Access Control)
S3 Bucket (Private)

セキュリティ設計

• プライベートS3バケット: 直接アクセス不可
• OAC (Origin Access Control): CloudFrontからのみアクセス許可
• HTTPS強制: 全通信の暗号化
• DNS over HTTPS: Route 53での安全な名前解決

💡 技術的な課題と解決策

1. ディレクトリインデックスの問題

課題: /blogにアクセスしても/blog/index.htmlが表示されない

解決策: CloudFront FunctionsでのURLリライト

function handler(event) {
    var request = event.request;
    var uri = request.uri;
    
    if (uri === '/blog') {
        request.uri = '/blog/index.html';
    }
    else if (uri === '/about') {
        request.uri = '/about/index.html';
    }
    
    return request;
}

2. DNS反映の最適化

課題: ドメイン移管後のDNS反映待ち

解決策:

• Route 53への完全移管
• DNSキャッシュクリアの実行
• 段階的な反映確認

🔧 開発・運用フロー

ローカル開発

npm run dev    # 開発サーバー起動
npm run build  # 本番ビルド

デプロイ（現在は手動）

npm run build
# S3へのファイルアップロード
# CloudFrontキャッシュクリア（必要時）

今後の改善予定

• GitHub Actions: 自動CI/CDパイプライン
• プレビュー環境: ブランチベースのプレビュー
• パフォーマンス監視: Core Web Vitalsの測定

---

Building codyhara.net - High-Performance Blog with Astro and AWS

🌐 English Section / 英語セクション

This post documents the construction process and technical architecture of “codyhara.net”. I’ll detail the technology stack and configuration methods used, from modern static site generation to secure deployment on AWS.

🚀 Technology Stack

Frontend

• Astro - Static Site Generator
• TypeScript - Type-safe development
• Markdown - Blog post authoring

Infrastructure (AWS)

• S3 - Static file hosting (private bucket)
• CloudFront - CDN, SSL termination, caching
• Route 53 - DNS management
• Certificate Manager (ACM) - SSL certificate management
• CloudFront Functions - URL rewrite processing

🏗️ Architecture Design

Internet
    ↓ HTTPS
Route 53 (DNS)
    ↓
CloudFront (CDN + SSL)
    ↓ OAC (Origin Access Control)
S3 Bucket (Private)

Security Design

• Private S3 Bucket: No direct access allowed
• OAC (Origin Access Control): Access only from CloudFront
• HTTPS Enforcement: All communications encrypted
• DNS over HTTPS: Secure name resolution via Route 53

💡 Technical Challenges and Solutions

1. Directory Index Issue

Challenge: /blog doesn’t display /blog/index.html

Solution: URL rewriting with CloudFront Functions

function handler(event) {
    var request = event.request;
    var uri = request.uri;
    
    if (uri === '/blog') {
        request.uri = '/blog/index.html';
    }
    else if (uri === '/about') {
        request.uri = '/about/index.html';
    }
    
    return request;
}

2. DNS Propagation Optimization

Challenge: Waiting for DNS propagation after domain migration

Solution:

• Complete migration to Route 53
• DNS cache clearing execution
• Staged propagation verification

🔧 Development & Operations Flow

Local Development

npm run dev    # Start development server
npm run build  # Production build

Deployment (Currently Manual)

npm run build
# Upload files to S3
# Clear CloudFront cache (when needed)

Future Improvements

• GitHub Actions: Automated CI/CD pipeline
• Preview Environment: Branch-based previews
• Performance Monitoring: Core Web Vitals measurement