sumisonic notes

braindump.sumisonic.com

3 min read

tags :

braindump.sumisonic.com

org-mode表示Webサイト構成まとめ

プロジェクト概要

  • 目的: AWS Lightsail上のDropboxにあるorg-modeファイルをWebで表示
  • 主要機能: org-roamのバックリンク表示、グラフ可視化
  • アクセス制限: 個人専用（認証付き）

技術スタック

  • フロントエンド

    • フレームワーク: Next.js
    • 認証: NextAuth.js（パスワード認証）
    • グラフ可視化:
      • react-force-graph（2D/3D対応）
      • D3.js（force-directed layout）
    • UIライブラリ: Chakra UI推奨
    • 状態管理: React hooks

  • バックエンド

    • コンテナ: Docker
    • データベース: SQLite（org-roam.db）
    • Webサーバー: nginx（リバースプロキシ）
    • ランタイム: Node.js

システム構成

  • ディレクトリ構造（モノリポジトリ推奨）

    project-root/
├── frontend/          # Next.jsアプリケーション
│   ├── pages/
│   │   ├── api/
│   │   │   └── auth/[...nextauth].js
│   │   ├── auth/
│   │   │   └── signin.js
│   │   └── index.js
│   ├── components/
│   └── middleware.js
├── backend/           # Dockerizedバックエンド
│   ├── Dockerfile
│   └── src/
├── shared/            # 共通の型定義
├── docker-compose.yml
├── nginx.conf
└── .env.local

  • Docker構成

    version: '3.8'
services:
  app:
    build: .
    environment:
      - ACCESS_PASSWORD=${ACCESS_PASSWORD}
      - NEXTAUTH_SECRET=${NEXTAUTH_SECRET}
      - NEXTAUTH_URL=https://your-domain.com
    volumes:
      - ${ORG_ROAM_DB_PATH}:/data/org-roam.db:ro
      - ${ORG_FILES_PATH}:/data/org-files:ro
 
  nginx:
    image: nginx:alpine
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf
      - ./ssl:/etc/nginx/ssl

データベース構造（org-roam）

  • 主要テーブル

    1. nodes: ノードの基本情報
      • id, file, title, level, properties等
    2. links: ノード間のリンク
      • source, dest, type
    3. tags: ノードのタグ
    4. files: ファイル情報

  • バックリンク取得

    SELECT n.id, n.title, n.file
FROM links l
JOIN nodes n ON l.source = n.id
WHERE l.dest = :target_node_id

認証・セキュリティ

  • NextAuth.js設定

    • 認証方式: パスワード認証（環境変数で管理）
    • セッション: JWT、30日間有効
    • 保護対象:
      • すべてのページ
      • API Routes（/api/*）

  • セキュリティ対策

    1. *HTTPS必須*（Let’s Encrypt）
    2. *httpOnly Cookie*（XSS対策）
    3. *CSRF対策*（sameSite属性）
    4. *環境変数*でシークレット管理

グラフ可視化

  • org-roam-uiの技術構成

    • React + react-force-graph
    • D3.js force-directed layout
    • *WebSocket*でリアルタイム更新
    • *Canvas/WebGL*で高速描画

  • 実装のポイント

    1. データ変換: SQLite → JSON → グラフ構造
    2. パフォーマンス:
      • 視界外ノードの非描画
      • クラスタリング
      • Canvas描画
    3. インタラクション:
      • パン・ズーム
      • ノードドラッグ
      • クリックで詳細表示

モバイル対応

  • レスポンシブデザイン

    • Tailwind CSS使用
    • タッチ操作対応
    • モバイル用ナビゲーション

  • PWA対応（オプション）

    • オフライン機能
    • アプリケーションライクな体験

開発・デプロイ

  • 開発環境

    # 環境変数設定
cp .env.example .env.local
 
# 開発サーバー起動
docker-compose up -d
npm run dev

  • 本番環境（AWS Lightsail）

    1. SSL証明書取得（Let’s Encrypt）
    2. nginxでリバースプロキシ設定
    3. fail2banでセキュリティ強化

今後の拡張可能性

  • 全文検索機能
  • 時系列表示
  • エクスポート機能（静的サイト生成）

グラフビュー