利用Nas构建WebIDE编辑器系列一

如果你经常需要在外出差游荡，那么WebIDE将是一个非常不错的选择，首先可以在不同的地方使用相同的开放环境，另外也无需过多的占用本地系统资源，再者不限制设备，比如你安卓手机、ipad等等，只要能够正常访问网页的环境下都可以进行开发（当然服务器的资源还是要的）。

这个我打算当作一个系列来解说吧，其实当你拥有一个可以编辑器那么很多东西就会变成可能。那么WebIDE对于不非编程一类的人群又有什么作用呢？当然还是有些用处的，首先如果你有Nas话，搭建一个静态的个人blog，然后可以不限容量的放置自己喜欢的内容，也可以根据自己的喜好安装不同的模板或者修改模板，在通过编辑器来发布和编写文章，是不是很爽呢？当然了编辑器的功能还不仅限于此，它拥有的虚拟环境，适合测试Linux下的各种应用，只要你会安装这些应用，这么看来可以运用的范围还是非常广泛的，比如采个集、挂个Q、解析个视频自然都不在话下。

这里可能就有人有问了Nas里面不是集成了wordpress套件吗而且里面搭载编辑器更加适合小白用户使用？这个当然是很好的建议，我也非常认同。但是在我个人感觉来说，毕竟wordpress是PHP动态语言构建，相对存静态的html语言来说没有那么安全，其次直接Nas的宿主层来构建站点始终认为对Nas会造成一定影响。如果将这个对外发布的站点程序独立出一个模块，一种镜像的方式呈现出来，就算服务器本身出现了问题，只要源文件还在那么恢复起来也是分分钟能解决的事情。

公共WebIDE

目前市面上已经有很多站点都支持在线编辑器的功能，教学类就很多但是并不开放使用给其他项目使用，国内厂商阿里云和腾讯云也都有了自己的webIDE开放集成环境。腾讯这边使用的是coding原来自主研发的webIDE产品。下面简单说一下这两家的产品：

阿里云这边简陋些目前只有一个杭州节点，并且很多东西没有定性，使用上也会存在着一些问题，暂时并不推荐使用他们的编辑器。

腾讯云这边相对要好得多，不但支持整套的DevOps部署方案。从构想、计划、开放、测试、交付。一整套服务体系连开发群体的提醒和工作安排都能做得面面俱到，都能够依赖与原来的coding这边的技术支持，加上腾讯财力。对于开发者而言简直就福音啊。以后会不会有个会员什么的出现，现在也就不得而知了。所以为了避免这种情况的出现，个人玩家就可以利用我们现有的资源比如Nas服务器来构建属于自己的webIDE,虽然不及腾讯云这边的强大，个人使用基本够用了。如果你们是团队开发建议还是使用腾讯云的这套装备，真的非常强大，不但有自己的代码存储空间，也提供了静态页面的展示能力，插件也有自己的插件市场甚至于可以自己开发插件。

其实不止两家公司提供webIDE的服务这里我只是介绍了2个我比较常用的而已，还要C9这类webIDE在很早以前就存在了，而且现在也一直被使用当着，还有gitee码云也支持在线编辑代码，不过并没有环境配置的功能并不能为我们解决开发环境的问题。至于其他的在线开放环境如果你有更好的，也可以留言给大家分享一下。

因为我已经习惯了自己的东西还是放在自己的存储设备上心态，当然就没有特地的去使用上面所说的这些由服务商提供的webIDE应用，毕竟也担心一些数据被和谐掉嘛，但是如果涉及到团队开发还是会用到更全面的代码托管平台，这类公共webIDE提供的不仅仅只是代码存储和编辑，更多的是代码质量检测和bug检测这些功能是多人开发中非常实用的功能？

构建webIDE

这里其实由两种方式，一种是基于docker，另外一种就是基于虚拟机。当然你也可以直接基于Nas本身去构建，但是非常不建议这样。这种东西还是模块化独立出来的好。同时也不想人硬件设备调用那么直接的暴露在互联网下。

构建这里我分作两部分去说明，主要一个是C9为主，另外一个是code-servser两个docker镜像来解说，哪个会更好就自行判断了。

我刚刚开始用就是C9那么就从它开始讲起，Cloud9它包括一个代码编辑器、调试程序和终端。Cloud9 预封装了适用于 JavaScript、Python、PHP 等常见编程语言的基本工具，您无需安装文件或配置开发计算机，即可开始新的项目。

也正是因为C9调教起来会比code-servser容易些，就从c9开始吧。

首先你的Nas要支持docker套件，黑群晖基本上都支持这里就不解释了（除了最近出来的猫盒）。

我这里使用的xczh/c9的镜像，没有上面特殊的原因，主要是我在非Nas环境下也使用他的镜像，非常好用，你也开源选择你自己喜欢的，如果你没有docker构建经验，那么还是跟我选择相同的吧。这个镜像有些特别支持gpu也只是cpu两种镜像，我们Nas中运行就选择cpu的吧。

然后来到映像（我们通常叫镜像）找到刚刚下载好的镜像文件双击进入高级配置，先文件存储路径映射到本地路径中，再将端口号转发到一个可用的宿主机端口里。

如上界面都设置完毕后就默认下一步，直到全部完成即可启动镜像。

安装开发环境

从我们选择的镜像中应该可以看出来，这就是一个基于Ubuntu的Linux系统，那么也就可以使用Ubuntu的指令来进行安装这些开发环境。

进入webIDE的方式，有两种一种是直接输入Nas的IP加端口进入，另外一种在桌面找到之前配置的快速启动图标。当然了如果你希望外网能够访问还需要在路由器进行设置转发端口，前提是你必须有公网IP,在IPv6正在普及的时代，公网IP应该不难实现（当然连IPv6都拿来卖的地方除外）。

路由器转发端口的方法很简单，而且每个人使用的路由器都不一样，这里就没有办法拓展去详细说明了，如果你分不清路由器和光猫整合的路由器是什么？这个部分就暂时放弃吧。

如果你输入之前设置的账号密码并且看到了这个界面，说明已经安装成功了。

这里先讲如何更换主题，主题选择其实还是蛮多的，选择自己喜欢的就好，经常码字的朋友一般都喜欢选择暗色系的，因为长时间使用显示器没有那么刺眼。

接下来就安装你直接需要的环境，因为高亮是本来就已经集成的这里就不需要去安装编辑器的插件来提供高亮和语法提示。只要的你文件是对应的语言，那么编辑器就能自动提示和完成输出了。因为访问的时候就已经是root权限，那么使用起来也非常方便，不过有些工具比如：php的composer依赖工具库使用起来也会有提示警告，创建一个用户在执行composer命令就不会有类似警告了。如何创建这里就不多扩展去说明，非常简单搜索一下就能出来答案，而且这篇也不专讲一门语言。

C9这里的Linux常用工具都以安装过了，我们只需要直接安装自己需要的语言环境即可，这里我们只是以php环境为例子，其实语言使用对应安装方式即可。

运行命令:

apt-get update && apt-get install php -y

另外值得说明的是C9的终端是支持直接复制粘贴的，但是code-server在windows下就没有那么方便了，但是code-server占用存储空间较小，支持自己选择安装哪些插件，如果你习惯使用VS编辑器那么code-server其实就它的网页版本，还有就是code-server的环境比没有C9配置得那么完善甚至于他们的最新版本，居然是无法安装python的。包括基本的wget和ping这些常用指令在code-serve的镜像中都是没有的，都需要另外进行安装的，所以code-server好用，但是也比较麻烦。C9这边直接集成python2.7版本，如果你需要更高级的版本下载就好了很简单，下边有命令，而且还可以直接指定python3为默认执行编译器，只要在编辑器上方run一下就好。

apt install python3 -y

C9很漂亮而且语法高亮都是自带不需要再去安装插件，如果你不想那么麻烦，建议使用C9因为真的很简单，看到MD文件后缀，如果你熟悉写作那么应该知道能干嘛了吧，在C9这里直接支持进度条的版本回退，md文件解析，甚至git版本图形化展示等等，这部分留到下回分解。

在最后提示大家一点，这个docker镜像是又国人制作的，这里也非常感谢这个镜像的作者，说明文档也是中文的，如果你刚刚接触这个镜像小白，建议多看看文档会有更多的收获哦！正是因为有那么多没见过面的代码工作者愿意共享出自己的成果，才使得我们能够如此便捷的使用这些工具。