在线编辑器web-ide

oorzc2023年6月21日大约 3 分钟

docker pull linuxserver/code-server

 docker run -itd \
  --name=code-server \
  -e PUID=1000 \
  -e PGID=1000 \
  -e TZ=Asia/Shanghai \
  -e PROXY_DOMAIN=code-{{port}}.t.oorzc.cn \
  -v /www/wwwtest:/www/wwwtest  \
  -e DEFAULT_WORKSPACE=/www/wwwtest  \
  -v /www/code/code-server/config:/config  \
  -p 30001:8443 \
  --restart unless-stopped \
  linuxserver/code-server:latest



docker run -itd \
	--log debug \
  --name=code-server \
  -e PUID=1000 \
  -e PGID=1000 \
  -e TZ=Asia/Shanghai \
  -e PASSWORD=xxx `#访问密码`\
  -e SUDO_PASSWORD=xxx `#命令执行密码`\
  -e PROXY_DOMAIN=code-{{port}}.oorzc.cn  `#代理域名`\
  #-e VSCODE_PROXY_URI=https://code-{{port}}.oorzc.cn
  -v /www/wwwroot:/home/project `#配置映射目录` \
  -v /www/wwwtest:/home/projectest `#配置映射目录` \
  -e DEFAULT_WORKSPACE=/home/project `#初始化工作目录` \
  -v /www/code/code-server/config:/config `#所有配置目录` \
  -p 9527:8443 \
  --restart unless-stopped \
  linuxserver/code-server:latest

进入容器

#查看容器系统   
cat /proc/version 

#进入容器
sudo apt-get update

sudo dpkg-reconfigure dash #然后选择no
ls -l /bin/sh
#若得到结果/bin/sh -> dash，则说明shell的解释器为dash
#若得到结果/bin/sh -> bash，则说明成功更改shell的解释器为bash

source ~/.bashrc

#安装工具
sudo apt install vim
sudo apt remove wget
sudo apt remove curl
sudo apt install wget
sudo apt install curl

#安装ifconfig
apt-get install net-tools


#安装nvm
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.6/install.sh | bash  
echo 'export NVM_DIR="$HOME/.nvm"' >> ~/.bashrc  
echo '[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm' >> ~/.bashrc  
source ~/.bashrc  

#安装 node nrm yarn

npm 安装

node v14以上

npm i -g code-server

启动

code-server

独立版本安装

https://github.com/coder/code-server/releases

tar -xzvf ./<您所下载的独立版本的文件>
./<解压后的路径>/bin/code-server

#创建软连接
ln -s /<解压后的路径>/bin/code-server /usr/local/bin/code-server
例：
ln -s /www/server/code-server/bin/code-server /usr/local/bin/code-server
# 可直接使用 
code-server
# 配置code自动启动
chkconfig --add code-server  
chkconfig code-server on
# 查看开机自动启动列表
chkconfig --list

#让code-server在后台启动
screen -S code-server

#查看所有的screen：
screen -ls

#恢复某个screen，指令为screen -r screen名
#删除screen的指令为：screen -X -S 25149 quit
#再次screen -ls，就发现screen被删除了

修改配置
vim ~/.config/code-server/config.yaml

bind-addr: 127.0.0.1:8080
auth: password/none #none 无需密码
password: xxx
cert: false

nginx代理

#泛解析代理域名 如 3000.code.my.cn
location / {
  proxy_pass http://127.0.0.1:9527;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection upgrade;
  proxy_set_header Accept-Encoding gzip;
  proxy_set_header Origin https://$host;
  proxy_set_header Host $host;
  proxy_set_header X-Forwarded-For $remote_addr;

  proxy_set_header X-Scheme $scheme;
  proxy_set_header X-Forwarded-Scheme $scheme;
  proxy_set_header X-Forwarded-Proto $scheme;
  proxy_set_header Accept-Encoding gzip;

  # WebSocket support (nginx 1.4)
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection "upgrade";
}

server
{
    listen 80;
    server_name code.oorzc.cn;
    index index.php index.html index.htm default.php default.htm default.html;
    root /www/wwwroot/code.my.cn;

    location /{
      # switch off logging
      access_log off;
      
      auth_basic "Authorization";
      auth_basic_user_file /www/server/pass/code.oorzc.cn/xx.pass;
      
      # redirect all HTTP traffic to localhost:9092
      proxy_pass http://localhost:8099;
      proxy_set_header Host $host; # $http_host
      proxy_set_header Remote_Addr $remote_addr;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header X-Scheme $scheme;
      proxy_set_header X-Forwarded-Scheme $scheme;
      proxy_set_header X-Forwarded-Proto $scheme;
      proxy_set_header Accept-Encoding gzip;
      
      # WebSocket support (nginx 1.4)
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
    }

}

更新docker

直接在容器内命令行运行，然后重启容器即可

curl -fsSL https://code-server.dev/install.sh | sh

预览网页

安装Open URL和Live Server (Five Server)插件

theia-ide

https://github.com/eclipse-theia/theia

https://github.com/theia-ide/theia-apps

#下载镜像
docker pull oorzc/theia:latest 

#运行容器 
#/www/code/theia/config:/home/theia/.theia #用户配置目录
#/www/wwwroot:/home/project:cached #映射服务器项目目录
docker run -itd --init --name code-ide \
  --user=root \
  -p 8927:3000 \
  -p 9301-9309:3001-3009 \
  -p 8180-8188:8080-8088 \
  -v /www/code/theia/config:/home/theia/.theia \
  -v /www/wwwroot:/home/project:cached \
  -v /www/wwwtest:/home/projectest:cached \
  -e TZ=Asia/Shanghai \
  oorzc/theia

安全的版本

https://github.com/theia-ide/theia-apps/blob/master/theia-https-docker/README.md

docker pull oorzc/theia-https:latest

#在这种情况下，我们将禁用 https，但保留令牌身份验证。此外，我们正在侦听端口 8099
#usecookies 将token放cookie中 sessiontimeout过期时间以秒为单位
docker run -itd --init --name code-ide2 \
	--user=root \
	--rm -it -p 8099:8099 \
	-v $(pwd)/.theia:/home/theia/.theia \
  -v $(pwd):/home/project:cached \
	-e server=:8099 \
	-e secure=0 \
	-e token=xxx \
	-e usecookies=true \
	-e sessiontimeout=7200 \
	oorzc/theia-https:latest

#打开 https://ip地址:10443，输入 token 便可打开 Web IDE

在线编辑器web-ide

在线编辑器web-ide

code-server

数据默认存储地址

docker安装

npm 安装

独立版本安装

nginx代理

更新docker

预览网页

theia-ide

安全的版本