用於建置、管理和測試 Magic: the Gathering 立方體的開源 Web 應用程式。
如果您有興趣為 Cube Cobra 做出貢獻,請閱讀該專案的貢獻指南。
您需要安裝 NodeJS、Redis 和您喜歡的 IDE(我推薦 VSCode)。您可以在這裡找到必要的資源:
節點20
NodeJS:https://nodejs.org/en/download/
Redis伺服器:
brew install redis
apt-get install redis
安裝redis後,啟動伺服器。在 Mac 上,執行此操作的捷徑是brew services start redis
。您可以使用brew services list
查看狀態。
Localstack 提供執行 CubeCobra 所需的 AWS 服務的本機模擬,包括 S3、DynamoDB 和 Cloudwatch。
您可以遵循 localstack 網站的安裝指南。建議的設定包括在 Docker 容器中執行 localstack,這也需要 Docker Desktop。
brew install localstack/tap/localstack-cli
curl
指令安裝 localstack 後,您可以使用 CLI 在背景啟動伺服器: localstack start --detached
。您可以使用localstack status
查看狀態。
VSCode(強烈推薦,但不是必要):https://code.visualstudio.com/ VSCode 的 ESLint 擴充:https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint VSCode 的 Prettier 擴充:https ://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
VSCode(具有 ESLint 和 Prettier 擴充功能)是建議的環境。使用此設定時,請確保您選擇的工作空間是您複製的根資料夾,這將確保 ESLint 外掛程式可以與我們的 linting 規則配合使用。 Prettier 會自動將標準格式套用至您的程式碼。使用這些插件將使遵守 linting 和程式碼格式化規則變得更加容易。
對於第一次設置,您需要運行:
yarn install && yarn build
yarn setup:local
這將:
如果您使用的是 Windows,則需要將 bash 設定為腳本 shell:
您需要確保已在某處安裝了bash
並執行以下命令[用您的bash
路徑取代下面的路徑]。
yarn config set script-shell " C: \ Program Files \ git \ bin \ bash.exe "
然後你可以像這樣啟動程式:
yarn start:dev
該腳本將:
現在您可以打開瀏覽器並透過以下方式連接到應用程式:http://localhost:8080。
(儘管節點在日誌中顯示它正在連接埠 5000 上運行,但您應該使用連接埠 8080 進行連線。)
只要來源檔案發生更改,Nodemon 就會重新啟動應用程式。
在本機存取應用程式後,您將需要使用導覽列上的「Resister」連結建立一個新的使用者帳戶。
環境變數是從.env
檔填充的。沒有簽入.env
文件,因此安裝腳本將.env_EXAMPLE
複製到.env
並使用一些預設值來支援 LocalStack 支援的 CubeCobra。
如果需要,您可以針對真實的 AWS 資源而不是 LocalStack 執行 Cube Cobra 的本機執行個體。使用您的 AWS 帳戶設定 S3、DynamoDB 和 Cloudwatch 後,您可以將憑證插入.env
檔案中。
以下是如何填寫環境變數的表格:
|變數名稱 |描述 |必需的? | | ---------------------- | -------------------------------------------------- -------------------------------------------------- ---- | ---------| ---| | AWS_ACCESS_KEY_ID | AWS_ACCESS_KEY_ID您帳戶的 AWS 存取金鑰。 |是的 | | AWS_ENDPOINT | AWS_ENDPOINT用於 AWS 的基本端點。用於指向 localstack 而不是託管的 AWS。 | | | AWS_LOG_GROUP | AWS_LOG_GROUP | AWS_LOG_GROUP要使用的 AWS CloudWatch 日誌組的名稱。 |是的 | | AWS_LOG_STREAM | AWS_LOG_STREAM | AWS_LOG_STREAM要使用的 AWS CloudWatch 日誌流的名稱。 | | | AWS_區域 |要使用的 AWS 區域(預設值:us-east-2)。 |是的 | | AWS_SECRET_ACCESS_KEY | AWS_SECRET_ACCESS_KEY |您帳號的 AWS 秘密存取金鑰。 |是的 | | CUBECOBRA_版本 | Cube Cobra 的版本。 | | |數據桶 |要使用的 AWS S3 儲存桶的名稱。您需要在您的帳戶中建立此儲存桶。 |是的 | |域名 |伺服器的網域名稱。用於外部重定向,例如電子郵件。 |是的 | | DOWNTIME_ACTIVE | 停機時間站點是否處於停機模式。 | | | DYNAMO_PREFIX | DYNAMO_PREFIX |用於 DynamoDB 表的前綴。您可以將此保留為預設值 |是的 | | EMAIL_CONFIG_PASSWORD |用於傳送電子郵件的電子郵件帳號的密碼。 | | | EMAIL_CONFIG_USERNAME |用於發送電子郵件的電子郵件帳戶的使用者名稱。 | | |環境|運行 Cube Cobra 的環境。是的 | | | NITROPAY_ENABLED | NITROPAY_ENABLED |是否啟用我們的廣告提供者 NitroPay。 | | | NODE_ENV |運行 Cube Cobra 的環境。是的 | | PATREON_CLIENT_ID | | Patreon OAuth 應用程式的用戶端 ID。 | | | PATREON_CLIENT_秘密 | Patreon OAuth 應用程式的用戶端金鑰。 | | | PATREON_HOOK_秘密 | Patreon webhook 的秘密。 | | | PATREON_重定向 | Patreon OAuth 應用程式的重定向 URL。 | | |港口|運行 Cube Cobra 的連接埠。 |是的 | | REDIS_HOST | REDIS_主機Redis 伺服器的 URL。 |是的 | | REDIS_SETUP | REDIS_SETUP |是否設置 Redis 伺服器 - Redis 需要此設置,但 Elasticache 不需要。 | | |秘密 |用於加密的秘密短語。您可以保留預設值。 |是的 | |會話秘密 |用於會話加密的秘密短語。您可以保留預設值。 |是的 | |會議|會話 cookie 的名稱。您可以保留預設值。 |是的 | | TCG_PLAYER_PRIVATE_KEY | TCGPlayer API 的私鑰。 | | | TCG_PLAYER_PUBLIC_KEY | TCG_PLAYER_PUBLIC_KEY | TCGPlayer API 的公鑰。 | | | CACHE_ENABLED | 快取啟用是否啟用快取。 | | |自動縮放群組 |運行此實例的自動伸縮組的名稱,用於分散式快取。 | | |快取_秘密 |分散式快取的秘密。 | |
在初始設定腳本中, yarn update-cards
用於建立卡片定義。執行此腳本將從 scryfall 中提取最新資料。
如果你想要卡片分析,可以執行以下腳本:
yarn update-all
這將依次:
Express 4 提供了一個簡約的 Web 框架,支援 PugJS 3 的範本渲染和基於 JSON 的 API 端點的定義。 HTML 範本主要用於渲染一個最小頁面,以便 React 透過從伺服器注入的初始 props 來引導自身。
我們將所有卡片定義保存在大型預處理文件中,以便生產中的節點只需要下載和載入文件,並在準備好時可以從 S3 取得最新文件。我們這樣做是因為從記憶體中讀取資料比在需要卡片資料時向其他服務發出請求要快得多。
外部進程負責更新卡片定義並上傳到 S3。該流程還負責更新卡片分析和資料匯出。
我們使用redis來進行多人選秀的並發控制。所有 redis 操作都在multiplayerDrafting.js
中處理
Express 伺服器的每個實例每晚使用 node-schedule 執行一項作業,以從 s3 更新記憶體中的 carddb。
Bash 腳本 ( jobs/definition
) 在 AWS 上定期執行,以執行每小時、每天和每週的作業。
卡片過濾器被定義為可供前端和後端使用。 Nearley 是一個 NodeJS 解析器工具包,用於產生定義可應用於卡片資料庫的過濾器的程式碼。
TypeScript 5.5 正在逐步推出,以以 PropTypes 取代普通 JS 元件的使用。
元件由 Reactstrap 9 提供,該元件由使用 SCSS 的 [Bootstrap v5.1][boostrap] 提供支援。
元件通常直接使用引導類別來實現附加樣式,但也可以使用公共 CSS 檔案中定義的全域類別名稱。