腾讯云轻量服务器搭建基于WEB的开发全家桶图文教程

如果在外面的时候系统出问题而自己没有带电脑，用别人电脑又没有自己平常用的IDE，也没有相关的环境，肯定超级别扭，如果是BT宝塔面板则只能在宝塔的编辑器中完成，能否搭建一套基于WEB浏览器的开发全家桶，让开发者能够随时随地用浏览器就能进行开发呢？这里就分享一下搭建的图文教程。

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

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

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

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

还没有腾讯云轻量服务器？看下这里：【腾讯云】云产品限时秒杀，爆款1核2G云服务器，首年99元

一、基础准备

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

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

什么？还没安装BT宝塔面板？点击进行下载安装

宝塔服务器面板，一键全能部署及管理，送你3188元礼包，点我领取

（0）宝塔面板

关于BT宝塔面板的安装可以说是非常简单的，根据官网的这个文章：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之后点击安装即可：

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

（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）：

添加好后点击设置，添加反向代理：

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

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

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

输入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 ~]#

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

三、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，故而也不需要编辑配置文件的操作了。

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

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

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

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

点击立即安装后，GIT平台搭建完毕：

来看下我们的资源占用情况（2核4G内存）：

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

四、最终总结

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

① 本站文章均为原创，除非另有说明，否则本站内容依据CC BY-NC-SA 4.0许可证进行授权，转载请附上出处链接，谢谢。
② 本站提供的资源(插件或主题)均为网上搜集，如有涉及或侵害到您的版权请立即通知我们。
③ 本站所有下载文件，仅用作学习研究使用，请下载后24小时内删除，支持正版，勿用作商业用途。
④ 因代码可变性，不保证兼容所有浏览器、不保证兼容所有版本的WP、不保证兼容您安装的其他插件。
⑤ 本站保证所提供资源(插件或主题)的完整性，但不含授权许可、帮助文档、XML文件、PSD、后续升级等。
⑥ 使用该资源(插件或主题)需要用户有一定代码基础知识！另本站提供汉化使用安装教程，仅供参考。由本站提供的资源对您的网站或计算机造成严重后果的本站概不负责。
⑦ 有时可能会遇到部分字段无法汉化，同时请保留作者汉化宣传信息，谢谢！
⑧ 本站资源售价只是赞助和汉化辛苦费，收取费用仅维持本站的日常运营所需。
⑨ 如果喜欢本站资源，欢迎捐助本站开通会员享受优惠折扣，谢谢支持！
⑩ 如果网盘地址失效，请在相应资源页面下留言，我们会尽快修复下载地址。

THE END