QDUOJ二次开发记录（前端、后端）

QDUOJ二次开发记录（前端、后端）

一、开始前

QDUOJ是青岛大学开源的Online Judge系统，目前在Github上有3.8K个Star（截止至20.4.24）,具有界面美观、部署简单(采用Docker一键部署)、功能完善等优点，是开源OJ中比较知名的一个系统。本文基于QDUOJ，对前端和后端进行二次开发，记录过程中遇到的问题和解决方法。

二、准备

1、安装Docker、Docker-Compose（针对Ubuntu系统，其他系统请自行百度）

在国内安装Docker、Docker-Compose经常会因为网络原因出现错误，所以这里我们采用国内镜像进行安装

# 安装Docker
# 卸载原有Docker，并清除原Docker的镜像,网络,存储卷等文件
sudo apt-get remove docker docker-engine
rm -fr /var/lib/docker/

# 国内用户使用脚本一键安装: 
sudo curl -sSL https://get.daocloud.io/docker | sh  

# 安装Docker-Compose
curl -L https://get.daocloud.io/docker/compose/releases/download/1.29.1/docker-compose-`uname -s`-`uname -m` > /usr/local/bin/docker-compose
chmod +x /usr/local/bin/docker-compose
# 如果安装遇到遇到Permission denied的问题，执行
# sudo -i
# 再重新执行上述安装命令

# 如果运行Docker命令时，报错Got permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.sock: Get http://%2Fvar%2Frun%2Fdocker.sock/v1.24/containers/json?all=1: dial unix /var/run/docker.sock: connect: permission denied
# 执行以下命令
sudo groupadd docker     #添加docker用户组
sudo gpasswd -a $USER docker     #将登陆用户加入到docker用户组中
newgrp docker     #更新用户组
docker ps    #测试docker命令是否可以使用sudo正常使用

安装完成后，使用以下命令验证

docker -v
docker-compose -v

（可选）配置Docker国内镜像（解决Docker下载镜像慢的问题）

curl -sSL https://get.daocloud.io/daotools/set_mirror.sh | sh -s http://f1361db2.m.daocloud.io
# 重启Docker服务
sudo systemctl restart docker.service

2、Clone相关Git仓库

务必注意先Fork仓库，再Clone仓库到本地

国内用户访问Github太慢，可以先把仓库导入到自己的Gitee中，再Clone

Clone以下仓库到本地

# 后端
OnlineJudge
# 前端
OnlineJudgeFE

3、创建Python环境并安装依赖

首先，我们需要有一套python的环境，这里推荐使用Anaconda3（因为可以比较方便的切换环境）。可以选择安装Miniconda3或者Anaconda3（区别只是前者一开始没有集成的python包，体积比较小）。

下载Miniconda3，因为从官网下载的速度较慢，所以我们选择从清华的镜像站进行下载。(这里选择的是64位的版本，如果是32位系统，请自行选择32位的Miniconda3)

wget https://mirrors.tuna.tsinghua.edu.cn/anaconda/miniconda/Miniconda3-latest-Linux-x86_64.sh

安装Miniconda3，全部默认选项即可。（一路按Enter和输入yes）

注意在询问是否初始化环境变量的时候一定要选yes

bash ./Miniconda3-latest-Linux-x86_64.sh 

更新环境变量

source ~/.bashrc

Miniconda3好像更新完环境变量之后就会自动切换到base环境，如果没有，则执行以下命令

conda activate base

启动完成之后，如果用户名的前面多了一个(base)则说明切换环境成功。

因为外网的访问速度比较慢，所以我们这里先把pip和Anaconda的下载源修改为清华源（清华的镜像站，目前唯一可用的Anaconda下载源的镜像站）。此步可跳过（只不过下载包的时候会比较慢）。

(a).换pip源

执行如下命令

pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple/
pip config set install.trusted-host pypi.tuna.tsinghua.edu.cn

(b).换Anaconda源

执行如下命令

conda config --set show_channel_urls yes
conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/main
conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free
conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/r

创建新的虚拟环境并安装依赖

conda create -n oj python=3.7
conda activate oj

cd OnlineJudge/deploy/
pip install --no-cache-dir -r requirements.txt 

4、安装NVM

nvm是一个可以切换管理NodeJS版本的软件

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
# 验证是否安装成功
nvm -v

三、创建redis、postgres服务

因为我们只需要修改前端、后端，Judge Server等是不需要修改的，所以我们可以通过修改docker-compose.yml，一键部署运行OJ所需要的Judge Server、redis服务、postgres数据库。

在OnlineJudge文件夹下新建redis-postgres.yml，添加如下内容

在.dockerignore加入data_dev

version: "3"
services:

  oj-redis:
    image: redis:4.0-alpine
    container_name: oj-redis
    restart: always
    volumes:
      - ./data_dev/redis:/data
# 暴露redis服务端口
    ports:
      - "0.0.0.0:6380:6379"
  
  oj-postgres:
    image: postgres:10-alpine
    container_name: oj-postgres
    restart: always
    volumes:
      - ./data_dev/postgres:/var/lib/postgresql/data
    environment:
      - POSTGRES_DB=onlinejudge
      - POSTGRES_USER=onlinejudge
      - POSTGRES_PASSWORD=onlinejudge
# 暴露postgres端口
    ports:
      - "0.0.0.0:5435:5432"

启动服务

cd OnlineJudge
docker-compose -f redis-postgres.yml up -d

四、初始化数据库并启动后端服务

注意环境变量TOKEN的设置

cd OnlineJudge
# 修改成你自己的TOKEN
export JUDGE_SERVER_TOKEN=TOKEN
echo `cat /dev/urandom | head -1 | md5sum | head -c 32` > data/config/secret.key
python manage.py migrate
python manage.py inituser --username root --password rootroot --action create_super_admin
python manage.py runserver

五、运行judge-server服务

在OnlineJudge文件夹下新建judge-server.yml，添加如下内容

注意修改TOKEN为之前运行后端时设置的内容

version: "3"
services:

  judge-server:
    image: registry.cn-hangzhou.aliyuncs.com/onlinejudge/judge_server
    container_name: judge-server
    restart: always
    read_only: true
    cap_drop:
      - SETPCAP
      - MKNOD
      - NET_BIND_SERVICE
      - SYS_CHROOT
      - SETFCAP
      - FSETID
    tmpfs:
      - /tmp
    volumes:
      - ./data_dev/backend/test_case:/test_case:ro
      - ./data_dev/judge_server/log:/log
      - ./data_dev/judge_server/run:/judger
    environment:
# 修改SERVICE_URL
      - SERVICE_URL=http://127.0.0.1:8080
# 修改BACKEND_URL
      - BACKEND_URL=http://127.0.0.1:8000/api/judge_server_heartbeat/
# TOKEN和运行后端时设置的TOKEN相同
      - TOKEN=TOKEN
      # - judger_debug=1
    network_mode: "host"

启动服务（注意一定要加-p参数给项目命名）

cd OnlineJudge
docker-compose -f judge-server.yml -p judge-server up -d

六、运行前端服务

1、准备

安装NodeJS V8.12.0

nvm install v8.12.0
nvm use 8.12.0
# 验证
node -v
npm -v

# 更换国内源
npm config set registry https://registry.npm.taobao.org

2、安装依赖

cd OnlineJudgeFE/
npm install

3、启动前端服务

按照官网教程启动服务

# we use webpack DllReference to decrease the build time,
# this command only needs execute once unless you upgrade the package in build/webpack.dll.conf.js
export NODE_ENV=development 
npm run build:dll

# the dev-server will set proxy table to your backend
export TARGET=http://127.0.0.1:8000

# 注意不能与已有服务冲突，包括但不限于 6380 5435 8000 8080
export PORT=8088

# serve with hot reload at localhost:PORT
npm run dev

七、二次开发

至此开发环境已经配置完毕，使用你喜欢的IDE开始coding吧。