在浏览器中运行自己的代码-compilebox安装试用

教程 恒一 59℃ 0评论

CompileBox 是一个开源软件, 用于构建多语言代码运行环境,可以实现在浏览器中运行任何编程代码而不用担心这些代码会损害你的服务器。实现原理是使用docker 启动一个容器来运行浏览器端提交的代码, 运行完后删除容器。

代码地址 https://github.com/shanhuhai/compilebox

安装方法

脚本安装

这个仓库比较老了, 所以会有一些坑,首先打开 Setup 目录, 如果能找到自己对应的版本安装脚本, 直接运行就行了,没有的话就需要手动安装,不过也简单。

安装脚本主要做了以下事情:

  1. 安装nodejs,安装的是 node 6.x版本
  2. 安装docker
  3. 用 Setup/Dockerfile 编译镜像(这个镜像用来创建运行代码所用的容器)

手动安装

我是用的Centos7,没有对应的安装脚本, 所以只能手动安装:

1.首先安装 nodejs

我安装的v14.18.1 版本,应该是node 6.x以上都可以

2.然后安装docker

这个比较简单,参考 yum 安装 docker

3.构建镜像

这一步是用 Tools/UpdateDocker.sh 构建镜像,他会使用 Tools/Dockerfile构建镜像, 如果构建成功这个镜像名称就叫做“virtual_machine”。

这个镜像要做的事情,就是安装各种编程语言的运行环境, 由于比较老了, 编译的时候各种错误。有兴趣的同学可以自己改着玩下, 把这个Dockerfile修复了。

我自己用了个取巧的办法, 到 Dockerhub 上找了个现成的, https://registry.hub.docker.com/r/ayanginet/compilebox

执行

docker pull ayanginet/compilebox

就可以安装到本地了。

但是安装完成后,镜像的名字不叫 “virtual_machine”, 需要修改下代码中的配置, 不然执行容器启动不了。

打开 /API/app.js, 找到55 行,将

var vm_name='virtual_machine'; 

修改为:

var vm_name='ayanginet/compilebox:init'; 

4.安装API目录

API目录下是一个nodejs项目, 使用了express 框架,启动之后就可以用浏览器访问了, 需要先用 npm install . 安装依赖。
安装完成后执行

node app.js

就可以启动项目了, 默认监听的端口是 8080。

5.Nignx代理访问

如果要使用域名访问,可以参考:

server {
    listen 80;
    server_name t.xxx.com;
    location / {
         proxy_set_header X_Real_IP $remote_addr;
        proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
         proxy_pass http://127.0.0.1:8080;
         proxy_redirect default;
     }

}

如果使用ip访问可以参考:

server {
    listen 80 default;
    location / {
         proxy_set_header X_Real_IP $remote_addr;
         proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
         proxy_set_header Host $http_host;
         proxy_pass http://127.0.0.1:8080;
         proxy_redirect default;
     }

}

注意proxy_pass代理用的地址,如果你的nginx 安装在容器中, 当前API项目装在宿主机,则代理地址不能用 127.0.0.1 , 因为这样会访问到容器上, 应该先测试用哪个ip在容器中能访问宿主机,然后修改成对应的ip。

我的nginx 是在容器中的,API跑在宿主机上, 代理地址是:

 proxy_pass http://192.168.48.1:8080;

6.安装完成后效果如下:

右边的输入框中编写代码 ,点击 compile 按钮,代码就会提交到服务器运行, 左边位置会出运行结果。

Language ID,是编程语言的代号,可以到 API/langs.js 下查看
目前支持这些编程语言(数组中第一个数字就是编程语言代号):

var LANGS = {
    "C#": [10, "text/x-csharp"],
    "C/C++": [7, "text/x-c++src"],
    "Clojure": [2, "text/x-clojure"],
    "Java": [8, "text/x-java"],
    "Go": [6, "text/x-go"],
    "Plain JavaScript": [4, "text/javascript"],
    "PHP": [3, "text/x-php"],
    "Python": [0, "text/x-python"],
    "Ruby": [1, "text/x-ruby"],
    "Scala": [5, "text/x-scala"],
    "VB.NET": [9, "text/x-vb"],
    "Bash": [11, "text/x-bash"],
    "Objective-C": [12,"text/x-objectivec"],
    "MySQL": [13,"text/x-sql"],
    "Perl": [14, "text/x-perl"],
    "Rust": [15, "text/rust"],
}

整个页面比较简陋,可以自己美化下使用。

转载请注明:大后端 » 在浏览器中运行自己的代码-compilebox安装试用

付费咨询
喜欢 (0)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址