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

C++在线开发环境搭建

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

shell 复制代码

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

添加Docker的官方GPG密钥：

shell 复制代码

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

添加Docker的APT仓库：

shell 复制代码

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

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

shell 复制代码

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

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

shell 复制代码

sudo systemctl status docker

二、codeserver构建

2.1 构建codeserver环境的docker容器

新建Dockerfile文件内容如下:

shell 复制代码

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的插件安装命令如下

shell 复制代码

 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 监听的地址和端口。
yaml 复制代码
```
bind-addr: 0.0.0.0:8080
```
- 0.0.0.0 表示监听所有网络接口，可以改为特定的 IP 地址。
- 8080 是端口号，你可以根据需要更改。
auth: 配置访问的认证方式。
yaml 复制代码
```
auth: password
```
- password: 使用密码认证。
- none: 不使用认证（不建议在生产环境中使用）。
password: 在使用密码认证时，设置访问密码。
yaml 复制代码
```
password: mypassword
```
cert 和 cert-key: 配置 SSL/TLS 证书，用于 HTTPS 连接。
yaml 复制代码
```
cert: /path/to/your/cert.pem
cert-key: /path/to/your/key.pem
```
disable-telemetry : 禁用 code-server 的遥测数据收集。
yaml 复制代码
```
disable-telemetry: true
```
disable-update-check: 禁用自动更新检查。
yaml 复制代码
```
disable-update-check: true
```
proxy-domain: 配置代理域名，用于反向代理设置。
yaml 复制代码
```
proxy-domain: my.domain.com
```
working-directory: 指定启动时的工作目录。
yaml 复制代码
```
working-directory: /path/to/directory
```

4.2.2 示例配置文件

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

yaml 复制代码

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 选项指定配置文件：

bash 复制代码

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

中设置

json 复制代码

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

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

C++在线开发环境搭建

一、环境说明

1.1 系统基础环境说明

1.1 docker-ce社区版安装

二、codeserver构建

2.1 构建codeserver环境的docker容器

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.

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` 启动