Admin

【教程】轻量折腾计划3,在浏览器进行开发——搭建属于自己的开发全家桶(上篇)

前言

前几天有事需要外出一趟,恰好某个项目出现了个比较严重的BUG,可苦于当时没有带电脑,借用朋友的电脑用了用也因为其上边没有我平常用的IDE,也没有相关的环境,修复的过程可谓是痛苦万分,最终只能在宝塔的编辑器中完成...这时我不禁琢磨,是否能搭建这么一套基于WEB的开发全家桶,让开发者能够随时随地用浏览器就能进行开发呢?说干就干!

正文

既然要搭建这么一套全家桶,那么需要准备以下物品:

  • VPS服务器一台
  • 域名一个(如果你直接记IP也没问题)

首先是VPS服务器,正如我们的标题一般,轻量折腾计划,故而我们这里选择的服务器是腾讯云的轻量应用服务器Lighthouse。腾讯云的轻量服务器因其活动多、优惠大、性价比高而广泛闻名于国内的中小站长群体之间,虽然没有弹性网卡等一些CVM的功能,但其近期上线了VPC内网互联也同样补齐了很大一块短板。对于我们这些需求不大的小站长的需求可以说是基本上覆盖全的了,而且还不限制CPU,一核比某些灵车的四核还强。

image-20210815185421450

而且还长期打活动中(https://cloud.tencent.com/act/new),99/1年,这价位算是性价比之王了吧,有兴趣的同学可别错过了哟。

零、基础准备

既然是全家桶,那么肯定是需要安装多款应用的,而且苦于口袋里的钱包厚度,那肯定是要一台机子就干全部活儿啦。那么就需要安装如下环境:

  • 宝塔面板(方便管理,如果你是大佬也可以无视)
  • Nginx(主要用于做反代,如果是国内机子+没备案的域名可以不用反代,直接解析IP后加上端口就行)
  • Docker(快速安装某些应用)

(0)宝塔面板

关于宝塔面板的安装可以说是非常简单的,根据官网的这个帖子:https://www.bt.cn/bbs/thread-19376-1-1.html

Centos安装命令:

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh

Ubuntu/Deepin安装命令:

wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh && sudo bash install.sh

Debian安装命令:

wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh && bash install.sh

Fedora安装命令:

wget -O install.sh http://download.bt.cn/install/install_6.0.sh && bash install.sh

根据你服务器的操作系统选择不同的安装命令后执行,遇到Do you want to install Bt-Panel to the /www directory now?(y/n)输入y后回车,等待一会儿就成功安装好了:

==================================================================
Congratulations! Installed successfully!
==================================================================
外网面板地址: http://xxx.xxx.xxx.xxx:8888/6e21e07d
内网面板地址: http://10.0.8.17:8888/6e21e07d
username: gunftd4a
password: f92c3dd4
If you cannot access the panel,
release the following panel port [8888] in the security group
若无法访问面板,请检查防火墙/安全组是否有放行面板[8888]端口
==================================================================
Time consumed: 0 Minute!
[root@VM-8-17-centos ~]# 

我们打开浏览器,访问上边的外网面板地址(轻量用户记得去防火墙添加8888端口),填入随机生成的用户名和密码,并同意用户协议后进入面板。进入面板后第一件事就是修改面板设置,将默认的8888端口进行修改(注意防火墙/安全组提前放行),用户名、密码、与安全入口进行修改、开启BasicAuth认证(推荐),到这我们的宝塔面板算是安装好了。

(1)Nginx

在上一步中我们安装了宝塔面板,那么在这一步中就特别简单了,直接在宝塔面板的左侧栏点击软件商店,找到Nginx之后点击安装即可:

image-20210815193313309

点击确定后等待一会儿就安装好了:

image-20210815193729477

(2)Docker

Docker是一种容器化技术,可以利用容器快速的搭建起我们想要的环境/应用,类似于虚拟机,但是相比较于虚拟机来说要轻量许多。

关于Docker的安装我们可以直接使用官方提供的一键安装脚本来进行,安装命令如下:

curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun

也可以使用国内 daocloud 一键安装命令:

curl -sSL https://get.daocloud.io/docker | sh

两条命令,任意选择一个都可以,复制后到服务器终端粘贴后回车运行,等待一会儿后安装成功。

docker安装成功之后,执行以下命令启动docker:

service docker start

启动好docker后,尝试运行:docker ps,看看是否有无报错产生。

最后,我们来修改docker的镜像源,保证能够成功地拉取docker镜像;编辑文件/etc/docker/daemon.json(若不存在则可以新建一个),内容如下:

{
"registry-mirrors": [
 "https://hub-mirror.c.163.com",
 "https://mirror.baidubce.com"
]
}

如果读者用的也是轻量服务器的话,可以使用腾讯内网的加速源:mirror.ccs.tencentyun.com

编辑好文件并保存后,输入命令:service docker restart让docker重启以载入配置文件,重启完成后输入docker info查看是否设置成功:

 Registry Mirrors:
  https://mirror.ccs.tencentyun.com/
 Live Restore Enabled: false

[root@VM-8-17-centos ~]# 

至此,我们的一些列准备过程结束。

一、在线IDE

既然是要编程,那么肯定离不开IDE呀,这年头,不会真有人用记事本编程吧。

经过一段时间的查找,我们打算使用vscode官方出的WEB班vscode:https://github.com/cdr/code-server,从外观上来看,可谓是跟桌面版vscode别无二致

接下来是code-server的安装,首先我们新建一个配置项目录:

mkdir ~/.config && mkdir /project

接着直接使用docker进行安装:

docker run -itd --name code-server -p 127.0.0.1:8080:8080 \
  -v "$HOME/.config:/home/coder/.config" \
  -v "/project:/home/coder/project" \
  -u "$(id -u):$(id -g)" \
  -e "DOCKER_USER=$USER" \
  codercom/code-server:latest

可以看到,我们将容器内的8080端口映射到本地的8080端口(若是直接使用端口的朋友可以把此处的127.0.0.1改为0.0.0.0),并且我们把新建的两个目录给挂载到了容器内,这样一来我们可以直接在容器内修改容器外部的文件。

使用命令docker ps可以看到我们的容器在运行当中:

[root@VM-8-17-centos ~]# docker ps
CONTAINER ID   IMAGE                         COMMAND                  CREATED          STATUS          PORTS                      NAMES
51fb2363150e   codercom/code-server:latest   "/usr/bin/entrypoint…"   45 seconds ago   Up 44 seconds   127.0.0.1:8080->8080/tcp   code-server
[root@VM-8-17-centos ~]# 

然后就是反向代理,将我们的域名(此处使用test.com做演示之用)跟容器的环境结合在一起。

在宝塔添加一个网站(ide.test.com):

image-20210815202500007

添加好后点击设置,添加反向代理:

image-20210815202718092

由于需要用到websocket,故而我们还需要修改配置文件,添加如下配置项:

    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection upgrade;

image-20210815204515678

打开浏览器,输入我们的网站:ide.test.com

image-20210815202926044

输入cat ~/.config/code-server/config.yaml查看随机生成的密码:

[root@VM-8-17-centos ~]# cat ~/.config/code-server/config.yaml
bind-addr: 127.0.0.1:8080
auth: password
password: 352e558396b4688211258ebd
cert: false
[root@VM-8-17-centos ~]#

输入密码进入即可,若想要修改密码,可直接修改此文件中的密码,再重启容器即可。

image-20210815204818984

二、GIT平台

既然我们有了自己的IDE,那干脆在给直接整个git平台作为我们平常项目的记录库岂不美哉。说干就干,因为我们是要多个应用共同搭建在同一台服务器上,故而此处我们不选择gitlab(有点吃配置),而是选择相对精简的gogs(https://github.com/gogs/gogs)。

同样也是用docker部署,在这种多应用同时部署的环境中,不同应用直接使用不同的容器做隔离,互不影响,减少了直接的干扰,可以说是优势巨大了。

首先新建一个目录做为挂载点,让容器内的数据与外部数据互通:

midir /gogs

接着运行命令:

docker run -p 3022:22 -p 3000:3000 --name=gogs \
-v /gogs:/data  \
-d gogs/gogs

使用命令docker ps查看部署情况:

[root@VM-8-17-centos ~]# docker ps
CONTAINER ID   IMAGE                         COMMAND                  CREATED          STATUS          PORTS                                                                              NAMES
529a758630a8   gogs/gogs                     "/app/gogs/docker/st…"   10 seconds ago   Up 10 seconds   0.0.0.0:3000->3000/tcp, :::3000->3000/tcp, 0.0.0.0:3022->22/tcp, :::3022->22/tcp   gogs

同样是老规矩,我们吧3000端口进行反代一下,这里我们用git.test.com做演示。反代过程参考codeserver的安装,由于不需要websocket,故而也不需要编辑配置文件的操作了。

反代好之后访问我们的域名:

image-20210815223506425

这里为了方便,我们直接选择使用sqlite作为数据库。

image-20210815223724298

应用基本设置内,除了应用URL我们修改为:http://git.test.com之外,其他保持默认即可:

image-20210815223829494

可选设置中设置上管理员:

image-20210815224019698

点击立即安装后,GIT平台搭建完毕:

image-20210815224147038

来看下我们的资源占用情况(2核4G内存):

image-20210815224658414

可以看到,4G的内存目前占用不足1G,可以说是相当的精简了,小主机也能轻松跑起来,这使得我们为后续应用的安装腾出了许多的空间。

后话

现在,我们已经拥有了自己的在线IDE,也有了自己的GIT平台,已经可以完成日常中大部分开发常需要的功能了,不过这还不够,由于篇幅所限,在下篇文章中,我将继续带大家完善我们的开发者全家桶套餐,将我们的浏览器编程板块继续补充完整~

仅有一条评论

  1. 那年夏天 · 2021-11-17 00:41:08

    大佬你好 我的邮箱lfs451@qq.com 我跟你一样设置了cloudreve 反代 一样加了一段websocket 但出来的结果是一片空白 如何解决呢