每週 GitHub 專案：NewsNow - 優雅地閱讀即時趨勢新聞

*每週 GitHub 專案：NewsNow - 優雅地閱讀即時趨勢 *

專案介紹

本週，我們將推出NewsNow，一個新聞聚合平台，可讓您優雅地閱讀即時熱門新聞。 NewsNow快速聚合多個資料來源的即時新聞，提供流暢的閱讀體驗，幫助用戶輕鬆獲得最新的熱門資訊。本專案支援GitHub OAuth登錄，並使用Cloudflare D1資料庫管理和儲存資料。

在本指南中，我將引導您逐步完成在 Cloudflare Pages 上部署此開源專案的過程。您將學習如何設定 GitHub OAuth 登入、設定 Cloudflare D1 資料庫以及成功部署專案。

部署指南

1.準備工作

1.1 所需帳號

• GitHub 帳號：fork 與管理專案代碼。
• 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 Pages URL。
4. 註冊後，儲存客戶端ID和客戶端金鑰。

2.分叉 GitHub 專案

1. 前往 GitHub 上的原始專案頁面：NewsNow Project。
2. 點選右上角的Fork按鈕將專案fork到您的GitHub帳號。

3. Cloudflare 頁面部署

3.1 連接 GitHub

1. 登入您的 Cloudflare 帳戶。
2. 在 Cloudflare 儀表板中，前往左側選單上的 「工作人員和頁面」。
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 Pages URL 相符。

6.選配與擴充

6.1 自訂域

• 如果您有自己的域名，您可以在 Cloudflare Pages 中設定自訂域名。

6.2 擴充資料來源

• 根據需要編輯目錄shared/metadata、shared/sources和server/sources來修改或新增新的資料來源。

6.3 除錯與日誌

• 使用Cloudflare提供的偵錯和日誌工具來監控專案的效能。

以上是每週 GitHub 專案：NewsNow - 優雅地閱讀即時趨勢新聞的詳細內容。更多資訊請關注PHP中文網其他相關文章！