近期在给实习学习的高一学子上信息技术课教授C语言,为了能够直观的演示,于是我使用了tool.lu的在线运行代码工具,体验尚可但是偶尔会无法链接评测端,就有点影响上课,于是打算自己搭建一个在线运行代码的平台。

于是我就想到了学校oj之前使用的judge0,体验很不错。与tool.lu相比则多了输入功能。

judge0

judge0 ,The most advanced open-source online code execution system in the world.

judge0是一款可以部署的健壮且可扩展的开源在线代码执行系统,支持60+种编程语言,并且安装方式也非常的简单。

judge0的api服务和ide都是开源免费的,而widget则是收费的,我们可以直接使用judge0官方提供的服务,当然我们也可以自行搭建。

Judge0 Wallpaper

开源地址

官方网站:https://judge0.com

开源前端ide: judge0/ide

开源版后端judge0 api:judge0/judge0

官方ide demo:https://ide.judge0.com/

安装judge0 IDE

首先安装前端页面 judge0 ide

服务器用的是宝塔面板那么将更加简单

cd /www/wwwroot/
git clone https://github.com/judge0/ide.git judge0ide

然后直接新建站点,PHP版本设置为纯静态,然后选择judge0ide目录即可。做好域名解析之后,配置一下ssl,这个时候访问域名就可以直接使用了,不过默认使用的是judge0官方的api服务,免费版每天只有一百次的运行次数限制,所以我们可以自行搭建评测api,也就是judge0本体。

image-20211102191455305

image-20211102192919346

安装judge0 CE api服务

首先安装docker和docker-compose

docker可以直接在软件商店安装docker管理器,然后使用下方的命令来安装docker-compose,这条命令会自动进行安装,等待安装成功即可。

sudo curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

然后验证一下docker和docker-compose是否安装成功

docker -v
docker-compose -v

image-20211102191903598

如果遇到docker-compose 报下方的错误:

-bash: /usr/local/bin/docker-compose: Permission denied

那么,使用以下命令给他赋以权限:

chmod +x /usr/local/bin/docker-compose

然后开始安装,还是在wwwroot目录

cd /www/wwwroot/
wget https://github.com/judge0/judge0/releases/download/v1.13.0/judge0-v1.13.0.zip
unzip judge0-v1.13.0.zip
cd judge0-v1.13.0
docker-compose up -d db redis
sleep 10s
docker-compose up -d
sleep 5s

image-20211102192052892

image-20211102192118194

等待安装成功,安装成功会自动运行,然后我们看一下服务是否正常。

docker ps -a

image-20211102192340522

这个时候judge0的api服务就已经运行在2358端口了

配置域名反代api服务

这一步主要是为了在https下能够正常的进行评测

创建一个网站,PHP版本选择静态,然后解析好域名并配置好ssl

然后点击反向代理,对2358端口进行反代。

image-20211102192635893

修改ide调用的api服务

/www/wwwroot/judge0ide/js目录下有一个ide.js文件

我们打开他,修改第一行的api地址,默认的是judge0官方的api,修改之后保持,就可以访问前台进行食用了。

image-20211102193210322

速度优化

judge0 ide默认使用的是unpkg还有cloudflare的公共库,那速度可想而知,大家可以替换为国内的镜像服务,打开速度会更上一个层次,这里我把head中修改过的内容放在下方,大家可以根据这个进行修改,其余的内容按自己的想法来修改就好啦!当然,记得底部保留版权,开源不易,请大家支持。

    <script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

    <script src="https://cdn.staticfile.org/golden-layout/1.5.9/goldenlayout.min.js" integrity="sha256-NhJAZDfGgv4PiB+GVlSrPdh3uc75XXYSM4su8hgTchI=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/golden-layout/1.5.9/css/goldenlayout-base.css" integrity="sha256-oIDR18yKFZtfjCJfDsJYpTBv1S9QmxYopeqw2dO96xM=" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/golden-layout/1.5.9/css/goldenlayout-dark-theme.css" integrity="sha256-ygw8PvSDJJUGLf6Q9KIQsYR3mOmiQNlDaxMLDOx9xL0=" crossorigin="anonymous" />

    <script>
        var require = {
            paths: {
                "vs": "https://cdn.staticfile.org/monaco-editor/0.23.0/min/vs",
                "monaco-vim": "https:[email protected]/dist/monaco-vim",
                "monaco-emacs": "https:[email protected]/dist/monaco-emacs"
            }
        };
    </script>
    <script src="https://cdn.staticfile.org/monaco-editor/0.23.0/min/vs/loader.js"></script>
    <script src="https://cdn.staticfile.org/monaco-editor/0.23.0/min/vs/editor/editor.main.nls.js"></script>
    <script src="https://cdn.staticfile.org/monaco-editor/0.23.0/min/vs/editor/editor.main.js"></script>

    <link rel="stylesheet" href="https://cdn.staticfile.org/semantic-ui/2.4.1/semantic.min.css" integrity="sha256-9mbkOfVho3ZPXfM7W8sV2SndrGDuh7wuyLjtsWeTI1Q=" crossorigin="anonymous" />
    <script src="https://cdn.staticfile.org/semantic-ui/2.4.1/semantic.min.js" integrity="sha256-t8GepnyPmw9t+foMh3mKNvcorqNHamSKtKRxxpUEgFI=" crossorigin="anonymous"></script>

    <!--<link href="https://fonts.geekzu.org/css?family=Exo+2" rel="stylesheet">-->

    <script type="text/javascript" src="third_party/download.js"></script>

    <script type="text/javascript" src="js/ide.js"></script>

    <link type="text/css" rel="stylesheet" href="css/ide.css">

    <title>KZ IDE - Online code editor</title>
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
    <link rel="icon" href="./favicon.ico" type="image/x-icon">

    <!--<script async src="https://www.googletagmanager.com/gtag/js?id=G-RHNJ50BJ2F"></script>-->
    <script>
        // window.dataLayer = window.dataLayer || [];
        // function gtag(){dataLayer.push(arguments);}
        // gtag('js', new Date());
        // gtag('config', 'G-RHNJ50BJ2F');
    </script>

    <!--<script type="text/javascript">window.$crisp=[];window.CRISP_WEBSITE_ID="ee4621ff-c682-44ac-8cfa-1835beddb98a";(function(){d=document;s=d.createElement("script");s.src="https://client.crisp.chat/l.js";s.async=1;d.getElementsByTagName("head")[0].appendChild(s);})();</script>-->
Office365 微信公众号
最后修改:2021 年 11 月 03 日 08 : 23 AM
如果您觉得我的文章有帮助,请随意赞赏!