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

プロジェクトの紹介

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

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

導(dǎo)入ガイド

1.準(zhǔn)備

1.1 必要なアカウント

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

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

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

1. GitHub にログインし、開発者設(shè)定に移動します。
2. OAuth アプリ を選択し、新しい OAuth アプリ をクリックします。
3. アプリケーションの詳細(xì)を入力します:
   • アプリケーション名: NewsNow (または任意の名前)。
   • ホームページ URL: ここでは、フォークされた GitHub リポジトリの URL (例: https://github.com/your-username/newsnow) を使用します。これは後でデプロイされた URL に変更できます。
   • 認(rèn)可コールバック 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 ダッシュボードで、左側(cè)のメニューの 「Workers & Pages」 に移動します。
3. 「プロジェクトの作成」 をクリックし、「Git に接続」 を選択します。
4. Cloudflare に GitHub アカウントへのアクセスを許可し、フォークした newsnow リポジトリを選択します。

3.2 Cloudflare Pages プロジェクトを構(gòu)成する

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

3.3 環(huán)境変數(shù)を設(shè)定する

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

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

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

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

4.2 wrangler.toml ファイルを構(gòu)成する

1. GitHub リポジトリで、プロジェクトのルート ディレクトリにある wrangler.toml ファイルを作成または編集します。
2. 次の設(shè)定を 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.導(dǎo)入の検証

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

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

5.2 データベースの初期化設(shè)定を調(diào)整する

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

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

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

6.オプションの構(gòu)成と拡張機(jī)能

6.1 カスタムドメイン

• 獨(dú)自のドメインをお持ちの場合は、Cloudflare Pages でカスタム ドメインを設(shè)定できます。

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

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

6.3 デバッグとログ

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

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