theindex

TheIndex

TheIndex的前端，編輯面板和API。

入門

最簡單的方法是開始使用Docker Compose。您需要從github複製docker-compose.yml和example.env文件。重example.env為.env並根據需要調整環境變量。使用以下命令：

docker-compose up -d

您需要將<host-port>更改為您選擇的端口。網絡服務器不通過SSL/TLS確保，您有責任將反向代理放在此容器面前。當您第一次運行圖像時，請不要忘記將自己的Discord-ID設置在Env SETUP_WHITELIST_DISCORD_ID中以登錄和編輯。容器設置一次後，您可以從設置中刪除ENV變量。

資料庫

我們將MongoDB用作數據庫服務器。您可以通過例如：

注意：數據庫將開始空，您必須自己填寫數據。

docker run -d 
    --name mongo 
    -v ./db:/data/db 
    mongo

為了開發或測試目的，強烈建議使用Mongo-Exppress訪問，查看和編輯數據庫的當前狀態。如果您可以公開訪問它，請不要忘記使用登錄憑據確保它。

要簡單地旋轉蒙古表達碼頭容器，請運行：

docker run -d 
    --name mongo-express 
    -p 8081:8081 
    mongo-express

您還可以查看我們提供的docker-compose文件，以進行設置。

緩存DB

為了提高性能，我們使用REDIS緩存MongoDB結果。緩存在緩存可能中被自動填充。

您可以通過運行使用Docker創建一個新實例：

docker run -d 
    --name redis 
    redis

REDIS DB已經包含在示例docker-compose文件中

更新容器圖像

警告：請注意，我們沒有提供任何官方支持，並且每次更新都可能隨著破裂的變化而提供。在更新之前，請務必進行備份

要獲取最新版本的容器映像，您需要運行：

docker pull ghcr.io/snaacky/theindex:latest

之後，您需要停止並刪除當前的運行實例並重新啟動。

參數

這是可能的環境變量的集合，其默認值應在.env文件中設置：

範圍	功能	預設
NEXT_PUBLIC_SITE_NAME	您網站的名稱	"The Index"
NEXT_PUBLIC_DOMAIN	您的域或IP，刪除後斜線	"https://theindex.moe"
DATABASE_URL	看看MongoDB文檔	"mongodb://mongo:27017/index"
CACHE_URL	REDIS緩存數據庫的連接字符串	"redis://redis:6379"
CHROME_URL	WebSocket URL到運行的Chrome實例	"ws://chrome:3300"
AUDIT_WEBHOOK	webhook-url用於審核log，空白以禁用支持	""
AUTH_DISCORD_ID	Discord OAuth2客戶端ID	"your_discord_oauth_client_id"
AUTH_DISCORD_SECRET	Discord Oauth2客戶秘密	"your_discord_oauth_client_secret"
DISCORD_BOT_TOKEN	需要訪問機器人資源	"your_discord_bot_token"
SETUP_WHITELIST_DISCORD_ID	如果您需要幫助獲得ID，請查看本指南	"your_discord_id"

並且僅在您處於開發模式並調試數據庫時才需要以下ENV變量

範圍	功能	預設
ME_CONFIG_BASICAUTH_USERNAME	Mongo-express用戶名	“行政”
ME_CONFIG_BASICAUTH_PASSWORD	Mongo-Express密碼	“ super_secret”

如果要驗證docker-compose文件如何填充Envs，請使用docker-compose config

入門編碼

圍繞網絡應用程序設置

1. 入門並不是直接的。您需要在計算機上安裝了帶有Docker-Compose的最新版本的Docker。

2. 首先通過圖形Git客戶端（強烈建議）克隆回購或通過CLI通過

git clone https://github.com/snaacky/theindex

3. 將example.env文件複製到.env 。

如何填充.env

• 用http：// localhost替換NEXT_PUBLIC_DOMAIN和NEXTAUTH_URL http://localhost:3000
• 生成一個至少32個字符的隨機強字符串，並將其用於NEXTAUTH_SECRET 。您可以使用發電機，例如1Password或自己創建它。
• 更改DATABASE_URL ， CACHE_URL和CHROME_URL使用Localhost代替mongo ， redis和chrome ： mongodb://mongo:27017 > fost mongodb://localhost:27017
• 請訪問https://discord.com/developers >創建一個新應用程序 - >進入應用程序面板內的Auth2 >將CLIENT ID和CLIENT SECRET複製到.env文件中。
• 在Auth2 Redirects中的重定向並粘貼以下URL中，需要驗證您的Discord登錄http://localhost:3000/api/auth/callback/discord 。
• 登錄時，將SETUP_WHITELIST_DISCORD_ID填充您的Discord ID以具有管理帳戶。
• 再次生成另一個至少32個字符的隨機強弦，並將其用於MEILI_MASTER_KEY 。您可以使用發電機，例如1Password或自己創建它。
• 最後，如果您想更改Mongo-express的密碼，則可以使用最後兩個變量來做到這一點，儘管我們每個人在本地開發時都沒有人這樣做。

4. 將以下端口添加到docker-compose文件中的圖像：

服務	端口映射
mongo	27017:27017
redis	6379:6379
meili	7700:7700
chrome	3300:3000

例如， mongo的設置應該看起來與此相似：

 mongo :
  image : mongo
  container_name : index-db
  restart : unless-stopped
  ports :
    - ' 27017:27017 '
  volumes :
    - ./db:/data/db

5. 現在運行命令開始所有所需的後端進程

docker-compose up -d mongo redis meili chrome mongo-express

另外，您也可以只評論或刪除索引服務並運行命令

docker-compose up -d

Web服務

要開始在前端進行編碼，您需要確保正確安裝了最新版本的node.js。安裝所有必需的依賴項一次運行：

bun install

注意：我們決定堅持使用NPM而不是紗線來管理依賴關係。

現在，您應該有一個稱為node_modules的文件夾，其中包含我們需要的所有依賴項。我們將Next.js用作我們的React Web服務的框架。要測試Web服務，您將必須在後台運行DB服務器，並通過以下方式啟動前端：

bun run dev

編譯後，您可以在選擇的瀏覽器中打開http：// localhost：3000，並查看運行的Web應用程序。

當我們使用next.js時，前端支持熱裝加載，因此您可以在修改代碼時將頁面打開，並在瀏覽器中即時查看更改。

Docker圖像

要創建現成的Docker映像，只需運行：

docker build . -t index

現在，您擁有帶有標籤index的本地映像，其中包含可分發版本的代碼，現在可以運行。

自動格式

我們使用更漂亮的人來確保所有參與者的一致代碼樣式。您可以簡單地使用EG運行命令自動自動化所有內容

bunx prettier --write . 

Web應用程序的設計

ISR/SSR

在可能的情況下，我們使用ISR預先生成所有可公開訪問的頁面，以通過CDN或代理來緩存，同時使用SWR驗證和獲取新數據，請求我們自己的API。

API

我們在端點/api上提供每個API請求，可以在頁面 /API上查看相應的代碼。

• /api/auth用於nextAuth.js。
• /api/edit/...需要登錄的用戶，通常（至少）（至少）編輯器權限，並且用於修改或創建新內容。 _id關鍵字_new保留用於創建新內容。
• /api/delete/...需要登錄的用戶，通常（至少）（至少）編輯器權限，並且用於刪除內容。
• /api/[content]s是獲取特定內容的所有項目列表的公共端點。
• /api/[content]/...是獲取有關特定內容信息的公共端點。

頁面限制

每個頁面請求首先必須通過_app.ts，在應用基本佈局，如果頁面具有auth屬性，它還驗證了用戶是否可以訪問給定頁面。有效的auth屬性是：

• auth本身為null或typeof auth === "undefined" ，無限制。這似乎是一個公共頁面。
• requireLogin ，不是真正需要的，而是出於邏輯原因進行設置。用戶必須登錄。
• requireAdmin ，只有具有管理員權利的用戶才能訪問此頁面。
• requireEditor ，只有編輯器才能查看此頁面。

貢獻

始終歡迎拉起重新要求，但可能並非總是合併，因為它必須與我們的索引構想保持一致。如果您想要某個功能或有想法，可以始終在問題中打開功能請求，或在我們的#index中的不和諧中報告。如果還不錯，就與我們的想法保持一致，我們找到了一些時間，我們一定會實現您的請求功能（某個時候...）。

我們使用的東西

• Next.js為Web服務器
• 作為JS框架做出反應
• Bootstrap的樣式
• 字體很棒的圖標
• 我們將所有東西烘烤到Docker圖像中
• 在節點JS上運行
• 通過NextAuth.js的用戶批准
• MongoDB作為數據庫後端
• 重新作為緩存
• uppeteer創建網站的屏幕截圖
• 無瀏覽/鉻來運行我們的chrome實例
• 視圖中的反應用於檢查組件是否可見
• 最終用戶拖動組件的反應拖盤
• 對處理通知的反應
• 語言的ISO-639-3

最重要的是：

我們很棒的社區的幫助：3

技術債務

• 我們使用JS代替TS（目前正在遷移）
• 統一Editor - 視圖
• 統一DB插入和更新func(_id, dataObject)的格式，並且僅根據需要進行更新，GraphQl將是不錯的...
• 移動以add ， remove API，而不必將整個數組發送到更新列表 - > GraphQL？