runcode

在线代码运行编辑器

语言支持度

• C++ 11

• C

• Java

• Rust lts

• Nodejs lts

• Go lts

• C# lts

• Python3

• php

代码格式化支持

• C++

• C

• Java

• Nodejs

开发

前置条件

nodejs >= 18.20.4

包管理工具 pnpm 安装

npm install pnpm -g

server

• koa + typescript + dockerode

1. 构建镜像

前置条件, 安装了 docker, docker 需要设置端口 为 2375

防火墙跟服务器安全组不要开放 2375 端口, 以免造成严重的安全问题, 详情参考 issues/24,

在 centos 7 端口修改方法: 在配置文件里 ExecStart=/usr/bin/dockerd 这串后面加上 -H tcp://0.0.0.0:2375 , 然后重启 docker 我的配置文件在 /usr/lib/systemd/system/docker.service 这个路径 配置文件示例

未构建的镜像, 在编辑器里 run 代码时会报镜像 404, 所以开发过程中无需全部构建, 构建需要的语言环境即可

• 构建 C++ 镜像

    cd server/src/docker/cpp/11.5
    docker build -t cpp:11.5 .
  
    cd server/src/docker/cpp/14.2
    docker build -t cpp:14.2 .

• 构建 rust 镜像

    cd server/src/docker/rust/1.83.0
    docker build -t rust:1.83.0 .

• 构建 python 镜像

    cd server/src/docker/python/3.9.18
    docker build -t python:3.9.18 .
  
    cd server/src/docker/python/2.7.18
    docker build -t python:2.7.18 .

• 构建 go 镜像

    cd server/src/docker/go/1.23
    docker build -t go:1.23 .
  
    cd server/src/docker/go/1.20
    docker build -t go:1.20 .
  
    cd server/src/docker/go/1.18
    docker build -t go:1.18 .

• 构建 nodejs 镜像

    cd server/src/docker/nodejs/22
    docker build -t nodejs:22 .
  
    cd server/src/docker/nodejs/20
    docker build -t nodejs:20 .
  
    cd server/src/docker/nodejs/18
    docker build -t nodejs:18 .
  
    cd server/src/docker/nodejs/16
    docker build -t nodejs:16 .

• 构建 java 镜像

    cd server/src/docker/java/20
    docker build -t java:20 .
  
    cd server/src/docker/java/17
    docker build -t java:17 .
  
    cd server/src/docker/java/11
    docker build -t java:11 .
  
    cd server/src/docker/java/8
    docker build -t java:8 .

• 构建 C# 镜像

    cd server/src/docker/dotnet/6.12
    docker build -t dotnet:6.12 .

• 构建 php 镜像

    cd server/src/docker/php/8.4
    docker build -t php:8.4 .
  
    cd server/src/docker/php/7.4
    docker build -t php:7.4 .

2. 安装依赖

   cd server
   pnpm i

3. 启动

   pnpm dev

client

• vite + react + typescript + antd

• UI

  tailwindcss, 原子化 css, 在个人项目里使用优势很大, 节省时间、代码

  且都支持按需引入, 体积更小

• 状态管理

  mobx、mobx-react-lite、mobx-persist-store

• 编辑器使用 monaco-editor

  高亮、输入提示、部分语言代码格式化、多主题

  引入 clang-format wasm 模块实现 C/C++/Java 语言的代码格式化

1. 安装依赖

   cd client
   pnpm i

2. 编译 tailwindcss

   # 启动后另开终端启动服务
   pnpm build:tailwind:watch

3. 启动服务

   # 起开发环境,需要起 server
   pnpm dev
   # 起生产环境
   pnpm prod

部署

---

server

1. 服务端环境

• nodejs
• pm2
• docker
• pnpm

2. 编译

进入 server 目录

cd server
pnpm i
pnpm build

3. 启动服务

pnpm deploy

client

进入 client 目录

1. 安装依赖

pnpm i

2. 构建

pnpm build

3. 使用 nginx 代理静态资源, 构建好的静态资源在 dist 目录下

主要是 html 文件, 其他静态资源部署到我的 cdn 上了

commit 规范

• feat：新功能（feature）
• fix：修补 bug
• docs：文档（documentation），只改动了文档部分
• style： 格式（不影响代码运行的变动），例如去掉空格、改变缩进
• refactor：重构（即不是新增功能，也不是修改 bug 的代码变动）
• test：添加测试或者修改现有测试
• chore：构建过程或辅助工具的变动
• perf：提高性能的改动
• ci：自动化流程配置修改、与 CI（持续集成服务）有关的改动
• revert：回滚到上一个版本，执行 git revert 打印的 message