当前位置：首页 > news >正文

C++在线开发环境搭建（WEBIDE）

news 2026/2/8 11:57:31

C++在线开发环境搭建

一、环境说明
- 1.1 系统基础环境说明
- 1.1 docker-ce社区版安装
二、codeserver构建
- 2.1 构建codeserver环境的docker容器
- 2.2 构建docker镜像
- 2.3 运行docker
- 2.4 运行展示
三、构建codeserver中的c++开发环境
- 3.1 插件下载
- 3.2 插件安装
四、其他知识
- 4.2 code-server配置config.yml
- - 4.2.1 常用配置选项
  - 4.2.2 示例配置文件
  - 4.2.3 使用 `--config` 启动
- 4.1 交叉编译配置环境变量
- 4.3 CMAKE tools 启动参数传递

本文讲解在docker环境中构建codeserver服务器。搭建基于CMakeLists.txt的C++环境搭建。其中包括codeserver配置相关说明。Dockerfile的讲解等内容。开发者可以使用这个关键在线开发C++程序。

一、环境说明

1.1 系统基础环境说明

宿主机系统环境：ubuntu-24-server版本
系统镜像下载地址：
http://mirrors.163.com/ubuntu-releases/24.04.1/ubuntu-24.04.1-live-server-amd64.iso
docker社区版本

1.1 docker-ce社区版安装

安装必要的软件包以允许apt通过HTTPS使用仓库：

sudo apt update
sudo apt-get install apt-transport-https ca-certificates curl software-properties-common -y

添加Docker的官方GPG密钥：

curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -

添加Docker的APT仓库：

sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"

安装最新版本的Docker CE（社区版）：

sudo apt update
sudo apt-get install docker-ce -y

验证Docker是否安装成功并运行：

sudo systemctl status docker

在这里插入图片描述

二、codeserver构建

2.1 构建codeserver环境的docker容器

新建Dockerfile文件内容如下:

from centos:latest
# 一、配置centos源环境
RUN cd /etc/yum.repos.d/ ; mkdir bak; mv *.repo /etc/yum.repos.d/bak
COPY aliyum.repo /etc/yum.repos.d/
# 二、安装code-server
ADD code-server-4.92.2.tar /opt/install/
RUN yum install -y curl automake make gcc gcc-c++ cmake unzip wget bzip2 libtool perl file diffutils bzip2-devel zlib-devel gdb && yum clean all
WORKDIR /opt/install/code-server-4.92.2/
COPY rpm/code-server-4.92.2-amd64.rpm /root/.cache/code-server/
RUN bash -x install.sh
# 三、安装code-server关于C++在线开发的插件
COPY install /opt/install
RUN code-server --install-extension /opt/install/MS-CEINTL.vscode-language-pack-zh-hans-1.92.2024081409.vsix 
RUN code-server --install-extension /opt/install/ms-vscode.cmake-tools-1.20.6.vsix 
RUN code-server --install-extension /opt/install/ms-vscode.cpptools-1.22.3@linux-x64.vsix 
RUN code-server --install-extension /opt/install/twxs.cmake-0.0.17.vsix
RUN mkdir -p /root/workspace
EXPOSE 8080
CMD ["sh","-c" ,"code-server -w /root/workspace"]

镜像的构建一共分为三个步骤。

第一步：配置centos的源环境，为了方便使用yum在线安装必须的相关环境。
aliyum.repo的文件内容如下：

# CentOS-Base.repo
#
# The mirror system uses the connecting IP address of the client and the
# update status of each mirror to pick mirrors that are updated to and
# geographically close to the client.  You should use this for CentOS updates
# unless you are manually picking other mirrors.
#
# If the mirrorlist= does not work for you, as a fall back you can try the 
# remarked out baseurl= line instead.
#
#[base]
name=CentOS-$releasever - Base - mirrors.aliyun.com
#failovermethod=priority
baseurl=http://mirrors.aliyun.com/centos/$releasever/BaseOS/$basearch/os/http://mirrors.aliyuncs.com/centos/$releasever/BaseOS/$basearch/os/http://mirrors.cloud.aliyuncs.com/centos/$releasever/BaseOS/$basearch/os/
gpgcheck=1
gpgkey=http://mirrors.aliyun.com/centos/RPM-GPG-KEY-CentOS-Official#additional packages that may be useful
[extras]
name=CentOS-$releasever - Extras - mirrors.aliyun.com
#failovermethod=priority
baseurl=http://mirrors.aliyun.com/centos/$releasever/extras/$basearch/os/http://mirrors.aliyuncs.com/centos/$releasever/extras/$basearch/os/http://mirrors.cloud.aliyuncs.com/centos/$releasever/extras/$basearch/os/
gpgcheck=1
gpgkey=http://mirrors.aliyun.com/centos/RPM-GPG-KEY-CentOS-Official#additional packages that extend functionality of existing packages
[centosplus]
name=CentOS-$releasever - Plus - mirrors.aliyun.com
#failovermethod=priority
baseurl=http://mirrors.aliyun.com/centos/$releasever/centosplus/$basearch/os/http://mirrors.aliyuncs.com/centos/$releasever/centosplus/$basearch/os/http://mirrors.cloud.aliyuncs.com/centos/$releasever/centosplus/$basearch/os/
gpgcheck=1
enabled=0
gpgkey=http://mirrors.aliyun.com/centos/RPM-GPG-KEY-CentOS-Official[PowerTools]
name=CentOS-$releasever - PowerTools - mirrors.aliyun.com
#failovermethod=priority
baseurl=http://mirrors.aliyun.com/centos/$releasever/PowerTools/$basearch/os/http://mirrors.aliyuncs.com/centos/$releasever/PowerTools/$basearch/os/http://mirrors.cloud.aliyuncs.com/centos/$releasever/PowerTools/$basearch/os/
gpgcheck=1
enabled=0
gpgkey=http://mirrors.aliyun.com/centos/RPM-GPG-KEY-CentOS-Official[AppStream]
name=CentOS-$releasever - AppStream - mirrors.aliyun.com
#failovermethod=priority
baseurl=http://mirrors.aliyun.com/centos/$releasever/AppStream/$basearch/os/http://mirrors.aliyuncs.com/centos/$releasever/AppStream/$basearch/os/http://mirrors.cloud.aliyuncs.com/centos/$releasever/AppStream/$basearch/os/
gpgcheck=1
gpgkey=http://mirrors.aliyun.com/centos/RPM-GPG-KEY-CentOS-Official

第二步：安装code-server由于code-server安装需要下载rpm包，我提前下载在code-server安装的时候就不需要在下载了。
下载地址：https://github.com/coder/code-server/releases
下载：code-server-4.92.2-amd64.rpm和code-server-4.92.2-linux-amd64.tar.gz

在这里插入图片描述

第三步：安装关于C++开发的常用插件，这里的开发环境主要是针对CMakeLists.txt的环境。并且使用默认系统的研发环境进行研发，如果使用其他的版本的G++和gcc需要自己更新版本。
插件下载请第三章，
安装以下插件。
在这里插入图片描述
第四步：配置环境。

2.2 构建docker镜像

docker build -t code-server:0.1 .

2.3 运行docker

说明–privileged参数在使用gdb调试的时候使用，否则会报错。
-v 映射开发空间，是因为开发的时候如果主机重启，开发的内容会清空，所以这两个参数一定需要设置。
code-server的密码是通过环境变量PASSWORD设置的。所以在启动docker时候我们可以设置PASSWORD的值作为进入code-server服务的密码。

docker run -d -p 8080:8080 -v [宿主机地址]:/root/workspace -E PASSWROD=123456 --privileged code-server:0.1

注意有一些版本的code-server的绑定的端口以及绑定地址参数会不同，因此需要自己注意看看文档。

2.4 运行展示

在地址栏中输入http://xxxx.xxx.xxx.xxx:8080 输入登录密码就可以使用codeserver了。
在这里插入图片描述

三、构建codeserver中的c++开发环境

3.1 插件下载

vscode插件市场地址
https://marketplace.visualstudio.com/vscode

在这里插入图片描述

Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hans
C/C++
https://marketplace.visualstudio.com/items?itemName=ms-vscode.cpptools
cmake
https://marketplace.visualstudio.com/items?itemName=twxs.cmake
cmake tools
https://marketplace.visualstudio.com/items?itemName=ms-vscode.cmake-tools

3.2 插件安装

codeserver的插件安装命令如下

 code-server --install-extension codelldb-x86_64-linux.vsix

四、其他知识

4.2 code-server配置config.yml

code-server 的 --config 选项允许你指定一个配置文件（通常是 config.yml），用于自定义 code-server 的各种行为。以下是 config.yml 配置文件的常用选项和说明：

4.2.1 常用配置选项

bind-addr: 指定 code-server 监听的地址和端口。
```
bind-addr: 0.0.0.0:8080
```
- 0.0.0.0 表示监听所有网络接口，可以改为特定的 IP 地址。
- 8080 是端口号，你可以根据需要更改。
auth: 配置访问的认证方式。
```
auth: password
```
- password: 使用密码认证。
- none: 不使用认证（不建议在生产环境中使用）。
password: 在使用密码认证时，设置访问密码。
```
password: mypassword
```

cert 和 cert-key: 配置 SSL/TLS 证书，用于 HTTPS 连接。

cert: /path/to/your/cert.pem
cert-key: /path/to/your/key.pem

disable-telemetry: 禁用 code-server 的遥测数据收集。
```
disable-telemetry: true
```
disable-update-check: 禁用自动更新检查。
```
disable-update-check: true
```
proxy-domain: 配置代理域名，用于反向代理设置。
```
proxy-domain: my.domain.com
```
working-directory: 指定启动时的工作目录。
```
working-directory: /path/to/directory
```

4.2.2 示例配置文件

以下是一个完整的 config.yml 示例：

bind-addr: 0.0.0.0:8080
auth: password
password: mypassword
cert: /path/to/your/cert.pem
cert-key: /path/to/your/key.pem
disable-telemetry: true
disable-update-check: true
working-directory: /home/user/projects

4.2.3 使用 `--config` 启动

启动 code-server 时使用 --config 选项指定配置文件：

code-server --config /path/to/config.yml

通过这个配置文件，你可以灵活地控制 code-server 的行为，包括监听地址、认证方式、证书配置等。

4.1 交叉编译配置环境变量

CROSS_COMPILE = arm-linux-
AS = $(CROSS_COMPILE)as
LD = $(CROSS_COMPILE)ld
CC = $(CROSS_COMPILE)gcc
CPP = $(CC) -E
AR = $(CROSS_COMPILE)ar
NM = $(CROSS_COMPILE)nm

/etc/sysconfig/docker

4.3 CMAKE tools 启动参数传递

在~/.local/share/code-server/User/setting.json
中设置

{ 
........	"cmake.debugConfig":{"args":["参数"]}
......
}

C++在线开发环境搭建

一、环境说明

1.1 系统基础环境说明

1.1 docker-ce社区版安装

二、codeserver构建

2.1 构建codeserver环境的docker容器

2.2 构建docker镜像

2.3 运行docker

2.4 运行展示

三、构建codeserver中的c++开发环境

3.1 插件下载

3.2 插件安装

四、其他知识

4.2 code-server配置config.yml

4.2.1 常用配置选项

4.2.2 示例配置文件

4.2.3 使用 --config 启动

4.1 交叉编译配置环境变量

4.3 CMAKE tools 启动参数传递

相关文章：

4.2.3 使用 `--config` 启动