Hydro二開筆記 前端篇

Sonui發表於2024-07-17
筆記前端

Hydro是一個開源的線上評測系統，支援多種語言和評測方式，其良好的使用者體驗和豐富的功能使其成為一個優秀的評測系統。本文記錄了Hydro的二次開發筆記，主要是前端部分。

前置知識

  • react（JavaScript框架）

  • stylues（Nodejs的css處理器）

開發環境

  • Nodejs 16.14.2 hydro的workspace需要至少node16，而17會出現問題沒細研究，用16了
  • VSCode
  • Git
  • Mongodb
  • Linux 如果習慣win推薦使用WSL

然後安裝yarn及npx

npm install -g yarn
yarn global add npx
npm install -g pm2

*確保安裝過程中無錯誤後繼續下一步

資料庫

安裝

我使用的環境是Ubuntu20.4，安裝的版本為5.0，如果同需求可以到Install MongoDB Community Edition on Linux — MongoDB Manual 參考安裝方法

*接下來步驟均在root下執行

wget -qO - https://www.mongodb.org/static/pgp/server-5.0.asc | sudo apt-key add -  #新增證書
echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu focal/mongodb-org/5.0 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-5.0.list #新增mongodb安裝源
apt-get update
sudo apt-get install -y mongodb-org

啟動MongoDB

預設情況下 MongoDB 啟動後會初始化以下兩個目錄：

  • 資料儲存目錄：/var/lib/mongodb
  • 日誌檔案目錄：/var/log/mongodb

在啟動前可以先建立這兩個目錄並設定當前使用者有讀寫許可權：

sudo mkdir -p /var/lib/mongo
sudo mkdir -p /var/log/mongodb
sudo chown `whoami` /var/lib/mongo     # 設定許可權
sudo chown `whoami` /var/log/mongodb   # 設定許可權

接下來啟動 Mongodb 服務：

mongod --dbpath /var/lib/mongo --logpath /var/log/mongodb/mongod.log --fork

開啟 /var/log/mongodb/mongod.log 檔案看到以下資訊，說明啟動成功。

# tail -10f /var/log/mongodb/mongod.log
2020-07-09T12:20:17.391+0800 I  NETWORK  [listener] Listening on /tmp/mongodb-27017.sock
2020-07-09T12:20:17.392+0800 I  NETWORK  [listener] Listening on 127.0.0.1
2020-07-09T12:20:17.392+0800 I  NETWORK  [listener] waiting for connections on port 27017

拉取原始碼

git clone https://github.com/hydro-dev/Hydro.git /root/Hydro --recursive # 可以fork原倉庫後拉取到本地
cd /root/Hydro # 進入工作目錄
yarn # 安裝依賴包
yarn build:ui:production # 編譯前端

啟動專案

pm2 start packages/hydrooj/bin/hydrooj.js

看到狀態為綠色啟動成功以後，就可以透過 http://[::1]:8888 訪問

參考資料

開發環境部署 | Hydro

Linux 平臺安裝 MongoDB | 菜鳥教程 (runoob.com)

Install MongoDB Community Edition on Linux — MongoDB Manual

相關文章