月額0円でRSSリーダーを運用する：CloudflareとSupabaseで作るサーバーレスアーキテクチャ

┌─────────────────────────────────────────────────────────────────┐
│                         クライアント                              │
├─────────────────────────────────────────────────────────────────┤
│  ┌─────────────┐              ┌─────────────────────────────┐   │
│  │   Web App   │              │        Mobile App           │   │
│  │  (React)    │              │    (React Native/Expo)      │   │
│  └──────┬──────┘              └──────────────┬──────────────┘   │
└─────────┼────────────────────────────────────┼──────────────────┘
          │                                    │
          │         HTTPS API Calls            │
          ▼                                    ▼
┌─────────────────────────────────────────────────────────────────┐
│                    CLOUDFLARE EDGE                               │
├─────────────────────────────────────────────────────────────────┤
│  ┌───────────────────────────────────────────────────────────┐  │
│  │                   Cloudflare Pages                        │  │
│  │   ┌───────────────────┐    ┌───────────────────────────┐  │  │
│  │   │  Static Assets    │    │     Pages Functions       │  │  │
│  │   │  (React Bundle)   │    │     (API Endpoints)       │  │  │
│  │   └───────────────────┘    └─────────────┬─────────────┘  │  │
│  └──────────────────────────────────────────┼────────────────┘  │
└─────────────────────────────────────────────┼───────────────────┘
                                              │
                 ┌────────────────────────────┼────────────────┐
                 │                            │                │
                 │    SQL Queries             │  Fetch RSS XML │
                 ▼                            ▼                │
┌────────────────────────────────┐    ┌─────────────────────────┐
│         SUPABASE               │    │    External RSS Feeds   │
│  ┌──────────────────────────┐  │    │                         │
│  │      PostgreSQL          │  │    │  • ニュースサイト        │
│  │  ┌────────────────────┐  │  │    │  • ブログ               │
│  │  │ users, feeds,      │  │  │    │  • ポッドキャスト        │
│  │  │ articles, favorites│  │  │    │  • その他RSS/Atom       │
│  │  └────────────────────┘  │  │    │                         │
│  └──────────────────────────┘  │    └─────────────────────────┘
│  ┌──────────────────────────┐  │
│  │    Supabase Auth         │  │
│  │  (JWT Authentication)    │  │
│  └──────────────────────────┘  │
└────────────────────────────────┘

functions/
├── api/
│   ├── auth/
│   │   ├── login.ts      # POST /api/auth/login
│   │   ├── register.ts   # POST /api/auth/register
│   │   └── refresh.ts    # POST /api/auth/refresh
│   ├── feeds/
│   │   ├── index.ts      # GET/POST /api/feeds
│   │   └── [id].ts       # DELETE/PATCH /api/feeds/:id
│   ├── articles/
│   │   ├── index.ts      # GET /api/articles
│   │   └── [id]/
│   │       ├── read.ts   # POST /api/articles/:id/read
│   │       └── favorite.ts # POST/DELETE
│   ├── refresh.ts        # POST /api/refresh (新着記事取得)
│   └── article-content.ts # GET /api/article-content (リーダーモード)
├── lib/
│   ├── auth.ts           # JWT検証ミドルウェア
│   └── supabase.ts       # データベースクライアント
└── _middleware.ts        # CORSヘッダー

export async function onRequestPost(context: any): Promise<Response> {
  // 1. 認証を検証
  const authResult = await requireAuth(request, env);

  // 2. ユーザーのフィードをデータベースから取得
  const { data: feeds } = await supabase
    .from('feeds')
    .select('*')
    .eq('user_id', uid);

  // 3. 各RSSフィードを直接取得
  for (const feed of feeds) {
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), 10000);

    const rssResponse = await fetch(feed.url, {
      signal: controller.signal,
      headers: { 'User-Agent': 'FeedOwn/1.0 (RSS Reader)' },
    });
    clearTimeout(timeoutId);

    const xmlText = await rssResponse.text();

    // 4. RSS/Atom/RDF XMLをパース
    const parsedFeed = await parseRssXml(xmlText);

    // 5. 新着記事を保存（重複排除付き）
    await storeArticles(uid, feed.id, parsedFeed.items);
  }

  return Response.json({ success: true, stats });
}

-- ユーザー（Supabase Authで管理、プロファイルで拡張）
CREATE TABLE user_profiles (
  user_id UUID PRIMARY KEY REFERENCES auth.users(id),
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- RSSフィード
CREATE TABLE feeds (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
  url TEXT NOT NULL,
  title TEXT,
  favicon_url TEXT,
  added_at TIMESTAMPTZ DEFAULT NOW(),
  last_fetched_at TIMESTAMPTZ,
  UNIQUE(user_id, url)
);

-- 記事（7日後に自動削除するTTL付き）
CREATE TABLE articles (
  id TEXT PRIMARY KEY,  -- feed_id + guid のSHA256ハッシュ
  user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
  feed_id UUID REFERENCES feeds(id) ON DELETE CASCADE,
  title TEXT NOT NULL,
  url TEXT NOT NULL,
  description TEXT,
  published_at TIMESTAMPTZ,
  expires_at TIMESTAMPTZ,  -- 7日後に自動削除
  image_url TEXT
);

-- 既読状態とお気に入り
CREATE TABLE read_articles (
  user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
  article_id TEXT,
  read_at TIMESTAMPTZ DEFAULT NOW(),
  PRIMARY KEY (user_id, article_id)
);

CREATE TABLE favorites (
  user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
  article_id TEXT PRIMARY KEY,
  title TEXT,
  url TEXT,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- 例：feedsテーブルのポリシー
CREATE POLICY "Users can only see their own feeds"
  ON feeds FOR SELECT
  USING (auth.uid() = user_id);

CREATE POLICY "Users can only insert their own feeds"
  ON feeds FOR INSERT
  WITH CHECK (auth.uid() = user_id);

apps/mobile/
├── src/
│   ├── contexts/
│   │   ├── UserContext.js    # 認証状態
│   │   ├── FeedsContext.js   # フィード + 記事状態
│   │   └── ThemeContext.js   # ダークモード
│   ├── scenes/
│   │   ├── home/Home.js      # 記事一覧
│   │   ├── article/ArticleDetail.js
│   │   ├── feeds/Feeds.js    # フィード管理
│   │   └── profile/Profile.js # 設定
│   └── utils/
│       └── api.js            # 自動リフレッシュ付きAPIクライアント

class ApiClient {
  async request(endpoint, options = {}, isRetry = false) {
    const token = await getAuthToken();
    const response = await fetch(`${baseUrl}${endpoint}`, {
      ...options,
      headers: { 'Authorization': `Bearer ${token}` }
    });

    // 401かつリトライ中でなければ、トークンをリフレッシュ
    if (response.status === 401 && !isRetry) {
      const newToken = await this.refreshToken();
      if (newToken) {
        return this.request(endpoint, options, true);  // リトライ
      }
    }

    return response;
  }

  async refreshToken() {
    const refreshToken = await getRefreshToken();
    const response = await fetch(`${baseUrl}/api/auth/refresh`, {
      method: 'POST',
      body: JSON.stringify({ refreshToken })
    });
    const { token, refreshToken: newRefresh } = await response.json();
    await saveAuthToken(token);
    await saveRefreshToken(newRefresh);
    return token;
  }
}

// functions/api/article-content.ts
import { parseHTML } from 'linkedom';
import { Readability } from '@mozilla/readability';

export async function onRequestGet(context: any): Promise<Response> {
  const url = new URL(context.request.url).searchParams.get('url');

  // 記事のHTMLを取得
  const response = await fetch(url);
  const html = await response.text();

  // linkedomでパース（jsdomはWorkersで動作しない）
  const { document } = parseHTML(html);

  // MozillaのReadabilityで記事を抽出
  const reader = new Readability(document);
  const article = reader.parse();

  return Response.json({
    title: article.title,
    content: article.content,      // クリーンなHTML
    textContent: article.textContent,
    byline: article.byline,
    siteName: article.siteName
  });
}

async function parseRssXml(xmlText: string) {
  const isAtom = xmlText.includes('xmlns="http://www.w3.org/2005/Atom"');
  const isRdf = xmlText.includes('<rdf:RDF') ||
                xmlText.includes('xmlns="http://purl.org/rss/1.0/"');

  if (isAtom) {
    return parseAtomFeed(xmlText);
  } else if (isRdf) {
    return parseRdfFeed(xmlText);  // itemがchannelの外にある！
  } else {
    return parseRss2Feed(xmlText);
  }
}

# ビルドとデプロイ
npm run build --workspace=apps/web
npx wrangler pages deploy apps/web/dist --project-name feedown