使用Docker搭建自己的云端编辑器Theia

记得去年差不多临近双十一电商购物狂欢节我的阿里云又迎来了一次服务到期，蓦然回首我已经使用阿里云6年，使用阿里云6年从新用户变老用户期间差不多贡献了小一万元。蹭着腾讯云双十一新用户的福利我顺利的迁移到了腾讯云并完成了相关备案手续，目前手里这台腾讯云服务器相对于之前的阿里云服务器那简直叫鸟枪换炮有了足够我折腾的富余空间。最近趁着工作日忙中偷闲的间隙把Docker环境搭好顺便把Theia云端编辑器也给安装上，其实我一直有一个痛点就是不太愿意在本地电脑安装PHP环境，毕竟我这台Mac Book Pro磁盘大小堪忧。有了Theia的助力云端写PHP所见即所得这才叫有趣也比较适合我。

安装Docker-CE

yum install docker-ce docker-ce-cli containerd.io

安装Docker-CE参考菜鸟教程：《CentOS Docker 安装》

我这台服务器系统盘40G数据盘200G所以我把docker的data-root指向到数据盘

编辑/etc/docker/daemon.json文件

vim /etc/docker/daemon.json

写入配置

{
    "registry-mirrors": ["阿里云docker镜像加速服务地址需要自己去申请"],
    "data-root":"/data/var/lib/docker"
}

/data/var/lib/docker路径前面的/data目录是我挂载的200G磁盘，后面的/var/lib/docker我是遵循docker默认安装的路径自行创建。

安装Portainer

创建portainer数据卷

docker volume create portainer_data

创建portainer容器并拉取镜像

docker run -d -p 8000:8000 -p 9000:9000 --name=portainer --restart=always -v /var/run/docker.sock:/var/run/docker.sock -v portainer_data:/data portainer/portainer-ce

安装Theia

在数据盘创建项目空间目录

# cd到数据盘
cd /data
# 创建项目空间目录
mkdir web-ide

创建用户组以及用户

#创建用户组
groupadd webide
#创建用户
useradd -d /data/web-ide -s /sbin/nologin -g webide webide

将项目空间目录授权用户组和用户

# 授权web-ide目录用户组
chgrp webide web-ide/
# 授权web-ide目录用户
chown webide web-ide/

以上做的目的确保服务器安全的同时解决了theia不能创建目录和文件的问题

拉取镜像

docker pull theiaide/theia-full:latest

theia-full镜像表示他支持多语言版本，当然你也可以使用其它镜像版本。

创建容器

docker run -itd --name="web-ide" -p 3000:3000 -v "$(pwd):/home/project:cached" theiaide/theia-full:latest

$(pwd)表示当前执行命令行所处的目录

nginx反向代理theia

由于theia没有授权登录机制这里我们使用nginx反向代理theia来实现授权登录

创建密码

[root@test ~]# openssl passwd 12345
fIHcRVEKijgoM
[root@test ~]# echo "admin:fIHcRVEKijgoM" > webide
[root@test ~]# cat htpasswd
admin:fIHcRVEKijgoM

nginx反向代理theia配置

server {
    listen                     80;
    
    auth_basic                 'Code Studio';
    auth_basic_user_file       /etc/password/webide;

    location / {
        proxy_pass        http://172.18.0.3:3000;
        proxy_set_header  X-Real-IP $remote_addr;
        proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header  X-Forwarded-Proto $scheme;
        proxy_set_header  Upgrade $http_upgrade;
        proxy_set_header  Connection upgrade;
        proxy_set_header  Host $http_host;
    }
}

 

好了一切安装就绪，愉快的在云端写代码吧！