Runcode - 开源在线代码运行编辑器

本文介绍 Runcode，一个开源的在线代码运行编辑器。该项目基于 Docker 容器化技术，支持在浏览器中编写和运行多种编程语言代码，包括 C、C++、Java、Python、Go、Rust、Node.js、C# 和 PHP 等。截至目前，该项目在 GitHub 上已获得 349 stars，是一个功能完善且实用的开发工具。

项目简介

Runcode 是一个基于 Web 的在线代码编辑器，由开发者 xjq7 创建并维护。它允许用户在浏览器中直接编写、编辑和运行代码，无需在本地安装任何开发环境。项目采用前后端分离架构，前端使用 React + TypeScript 构建，后端基于 Koa 框架，通过 Docker 容器实现代码的安全执行。

在线演示地址：https://r.xjq.icu

核心特性

• 多语言支持：支持 C、C++、Go、Node.js、Rust、Java、Python、C#、PHP 等多种编程语言
• 代码格式化：支持 C/C++/Java/Node.js 代码的自动格式化
• 安全沙箱：基于 Docker 容器隔离执行环境，确保代码运行安全
• ** Monaco 编辑器**：使用 VS Code 同款编辑器内核，支持语法高亮、代码提示、多主题
• WebAssembly 支持：引入 clang-format WASM 模块实现 C/C++/Java 代码格式化
• 响应式设计：基于 Tailwind CSS 的原子化 CSS 方案，界面简洁高效

技术栈

后端 (Server)

• Koa - Node.js Web 框架
• TypeScript - 类型安全的 JavaScript 超集
• Dockerode - Docker 远程 API 的 Node.js 客户端
• Docker - 容器化代码执行环境

前端 (Client)

• Vite - 现代前端构建工具
• React 18 - 用户界面库
• TypeScript - 类型系统
• Ant Design - UI 组件库
• Tailwind CSS - 原子化 CSS 框架
• Monaco Editor - 代码编辑器（VS Code 同款）
• MobX - 状态管理

安装指南

前置要求

• Node.js >= 16
• pnpm >= 8（推荐）
• Docker（需配置端口 2375）

克隆项目

git clone https://github.com/xjq7/runcode.git
cd runcode

后端部署

1. 安装依赖

cd server
pnpm i

2. 构建 Docker 镜像

根据需要的语言构建对应的镜像：

# C++ 11/14
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 2/3
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 .

# Node.js
cd server/src/docker/nodejs/22
docker build -t nodejs:22 .

# Java
cd server/src/docker/java/20
docker build -t java:20 .

# 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 .

3. 配置 Docker 连接

编辑 server/src/config/docker.ts，根据系统选择连接方式：

// Windows/Linux - 通过端口连接
const config: DockerOptions = {
  host: '127.0.0.1',
  port: '2375',
  protocol: 'http',
};

// Mac/Linux - 通过 socket 连接
const config: DockerOptions = {
  socketPath: '/var/run/docker.sock',
};

4. 启动服务

pnpm dev

前端部署

1. 安装依赖

cd client
pnpm i

2. 编译 Tailwind CSS（开发模式需另开终端）

pnpm build:tailwind:watch

3. 启动开发服务器

# 开发环境
pnpm dev

# 生产环境
pnpm prod

使用示例

在线使用

访问 https://r.xjq.icu，选择编程语言，编写代码后点击运行即可。

本地开发示例

启动前后端服务后，打开浏览器访问前端地址（默认 http://localhost:5173）：

1. 在左侧语言选择器中选择目标语言（如 Python）
2. 在编辑器中编写代码
3. 点击「运行」按钮
4. 在右侧输出面板查看执行结果

生产部署

服务端部署

cd server
pnpm i
pnpm build
pnpm run deploy  # 使用 pm2 启动，端口 39005

客户端部署

cd client
pnpm i
pnpm build

构建后的静态资源位于 dist 目录，使用 Nginx 代理即可。

安全注意事项

⚠️ 重要：Docker 远程访问端口 2375 存在安全风险，请勿在防火墙和服务器安全组中开放该端口，以免造成严重的安全问题。建议仅在本地开发环境使用端口连接方式，生产环境使用 socket 连接。

项目链接

• GitHub 仓库：https://github.com/xjq7/runcode
• 在线演示：https://r.xjq.icu
• 开源协议：GPL-2.0

总结

Runcode 是一个功能完善的在线代码运行环境，适合用于编程教学、代码面试、快速原型验证等场景。其基于 Docker 的架构设计确保了代码执行的安全性，而 Monaco Editor 的集成则提供了接近本地 IDE 的编码体验。对于需要在线代码执行功能的开发者来说，这是一个值得参考和使用的开源项目。