週刊 GitHub プロジェクト: NewsNow - リアルタイムのトレンド ニュースをエレガントに読む

*週刊 GitHub プロジェクト: NewsNow - リアルタイム トレンドをエレガントに読む *

プロジェクトの紹介

今週は、リアルタイムのトレンドニュースをエレガントに読むことができるニュース集約プラットフォームであるNewsNowをご紹介します。 NewsNow は、複数のデータ ソースからリアルタイム ニュースを迅速に集約し、ユーザーが最新のトレンド情報に簡単にアクセスできるスムーズな読書エクスペリエンスを提供します。このプロジェクトは GitHub OAuth ログインをサポートし、Cloudflare D1 データベースを使用してデータを管理および保存します。

このガイドでは、このオープンソース プロジェクトを Cloudflare ページ にデプロイするプロセスを段階的に説明します。 GitHub OAuth ログインを設定し、Cloudflare D1 データベースを構成し、プロジェクトを正常にデプロイする方法を学びます。

導入ガイド

1.準備

1.1 必要なアカウント

• GitHub アカウント: プロジェクト コードをフォークして管理します。
• Cloudflare アカウント: プロジェクトをデプロイしてホストします。

1.2 GitHub OAuth アプリケーションのセットアップ

GitHub ログインを有効にするには、GitHub 上に OAuth アプリケーションを作成する必要があります。

1. GitHub にログインし、開発者設定に移動します。
2. OAuth アプリ を選択し、新しい OAuth アプリ をクリックします。
3. アプリケーションの詳細を入力します:
   • アプリケーション名: NewsNow (または任意の名前)。
   • ホームページ URL: ここでは、フォークされた GitHub リポジトリの URL (例: https://github.com/your-username/newsnow) を使用します。これは後でデプロイされた URL に変更できます。
   • 認可コールバック URL: https://your-cloudflare-pages-url/api/auth/callback の形式を使用し、デプロイ後に your-cloudflare-pages-url を Cloudflare ページの URL に置き換えます。
4. 登録後、クライアント ID と クライアント シークレット を保存します。

2. GitHub プロジェクトをフォークする

1. GitHub の元のプロジェクト ページ: NewsNow プロジェクトに移動します。
2. 右上の フォーク ボタンをクリックして、プロジェクトを GitHub アカウントにフォークします。

3. Cloudflare ページの展開

3.1 GitHub に接続する

1. Cloudflare アカウントにログインします。
2. Cloudflare ダッシュボードで、左側のメニューの 「Workers & Pages」 に移動します。
3. 「プロジェクトの作成」 をクリックし、「Git に接続」 を選択します。
4. Cloudflare に GitHub アカウントへのアクセスを許可し、フォークした newsnow リポジトリを選択します。

3.2 Cloudflare Pages プロジェクトを構成する

1. newsnow リポジトリを選択し、ビルド設定ページに進みます。
2. ビルドパラメータを設定します。
   • フレームワーク プリセット: [なし] を選択します。
   • ビルド コマンド: pnpm install && pnpm build と入力します。
   • ビルド出力ディレクトリ: dist を入力します。

3.3 環境変数を設定する

1. ビルド設定ページで、「環境変数 (詳細)」 をクリックします。
2. 次の環境変数を追加します。
   • G_CLIENT_ID: GitHub OAuth アプリケーションのクライアント ID。
   • G_CLIENT_SECRET: GitHub OAuth アプリケーションのクライアント シークレット。
   • JWT_SECRET: G_CLIENT_SECRET と同じ値を使用することをお勧めします。
   • INIT_TABLE: 最初のデプロイメントでデータベースを初期化する場合は true に設定します。

4. Cloudflare D1 データベースを作成します

4.1 データベースを作成する

1. Cloudflare ダッシュボードで、「ワーカーとページ」 -> に移動します。 「D1 SQL データベース」.
2. 「データベースの作成」 をクリックし、名前 (例: newsnow_db) を入力します。
3. データベース ID と データベース名 をメモします。

4.2 wrangler.toml ファイルを構成する

1. GitHub リポジトリで、プロジェクトのルート ディレクトリにある wrangler.toml ファイルを作成または編集します。
2. 次の設定を wrangler.toml ファイルに追加します。

   name = "newsnow-project"  # Your project name
   type = "javascript"

   [[d1_databases]]
   binding = "NEWSNOW_DB"
   database_name = "your_database_name"  # Replace with your created database name
   database_id = "your_database_id"      # Replace with your created database ID

1. 変更を GitHub にコミットします。

4.3 プロジェクトを再デプロイする

1. Cloudflare Pages プロジェクトページに戻ります。
2. プロジェクトを再デプロイするには、「デプロイ」 ボタンをクリックします。

5.導入の検証

5.1 プロジェクトにアクセスします

1. 展開が完了するまで待ちます。
2. Cloudflare Pages が提供する URL にアクセスして、ページが正しく読み込まれることを確認します。

5.2 データベースの初期化設定を調整する

1. プロジェクトが正常にデプロイされ、データが正しく読み込まれている場合は、Cloudflare Pages プロジェクト設定に戻ります。
2. 将来のデプロイメントでデータベースが再初期化されないように、INIT_TABLE 環境変数を true から false に変更します。

5.3 GitHub OAuth ログインをテストする

1. GitHub アカウントでログインしてみます。
2. ログインが失敗した場合は、GitHub OAuth 設定の 認可コールバック URL が Cloudflare ページの URL と一致するかどうかを確認してください。

6.オプションの構成と拡張機能

6.1 カスタムドメイン

• 独自のドメインをお持ちの場合は、Cloudflare Pages でカスタム ドメインを設定できます。

6.2 データソースを拡張する

• 必要に応じて、shared/metadata、shared/sources、server/sources ディレクトリを編集して、新しいデータ ソースを変更または追加します。

6.3 デバッグとログ

• Cloudflare が提供するデバッグ ツールとログ ツールを使用して、プロジェクトのパフォーマンスを監視します。

以上が週刊 GitHub プロジェクト: NewsNow - リアルタイムのトレンド ニュースをエレガントに読むの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。