day03 打开浏览器就能写代码！打造自己的Web IDE（在线开发环境）

这是一篇关于如何打造Web IDE的笔记

这篇是我参加阿里云的一个在家的七天训练营的第三天课程的一个学习笔记，具体的笔记如下。

一、开通云服务器

由于学生党可以免费领取阿里云的服务器，领取到了服务器后就是要开通了，方便后续的课程需要。具体的服务器配置如下：
1.计费方式：

包年包月可以理解为是预付费产品，我们得先购买一个月或者几个月几年的ECS产品才能使用ECS，适合于长期稳定使用服务器的场景，比如说做网站。而按量付费可以理解为是后付费产品，我们需要保证有 100元的余额才可以使用按量付费，按量付费就是用几个小时就扣几小时的钱，适合于测试或者跑数据的场景。这里选包年包月的。

2. 地域
   
   地域（Region）和可用区（Zone）是两个概念：

• 地域就是服务器的数据中心所放在的城市，例如华东1是在杭州，华东2是在上海，不同地域的ECS不可内网互联。
• 可用区是同一地域下的不同数据中心，在同一个地域距离较近，可以通过光纤连接，内网可以互联。

一般来说，地域的选择，就是看您的业务中，哪个地域访客最多、转化率最高，而不是离管理者最近。例如我的博客访客主要来自广东省，那么【华南1-深圳】自然是我首选的；例如我是阿里速卖通上的外贸企业，客户主要分布在拉美国家，我的官方就不可能建设在【华东1】，而是应该选择【美国东部1（弗吉尼亚）】。

3. 网络
   

网络分经典网络和专有网络：

• 经典网络是阿里云最早期的网络方式，同一地域内的所有ECS、OSS、RDS都可以互联，然后通过安全组来实现访问的控制。
• 专有网络则是用户自有一个虚拟路由网络和交换机，只有同一网络、交换机下的ECS、RDS等产品才能互联，专有网络还可以绑定弹性IP，就算换ECS了，IP依旧可以保持不变。
  尽量以选择专有网络为先。

4. 实例系列

实例就是云服务器的规格，包括CPU、内存等。可以点击【选择其他实例规格】来查看所有可选的实例。

可根据需要来选择合适的规格，这里可以选择【入门级(共享)】实例。

5. 公网带宽
   

公网带宽则分按使用流量和按固定带宽计费:

• 按流量计费顾名思义就是用多少流量扣多少钱，不同地域的每G流量资费不一样。
• 按带宽计费就是先买断多少M的带宽，后面无关用多少流量都不计费。
  一般来说正常建站最好有至少2M的带宽，并配合OSS来放置资源会比较好。

6. 镜像
   

• 公共镜像：是由阿里云官方提供公共基础镜像，仅包括初始系统环境。请根据您的实际情况自助配置应用环境或相关软件配置。
  自定义镜像：基于用户系统快照生成，包括初始系统环境、应用环境和相关软件配置。选择自定义镜像创建云服务器，节省您的重复配置时间。
• 共享镜像：是其他账号的自定义镜像主动共享给您使用的镜像。阿里云不保证其他账号共享给您的镜像的完整性和安全性，使用共享镜像需要自行承担风险。
• 镜像市场：提供经严格审核的优质镜像，预装操作系统、应用环境和各类软件，无需配置，可一键部署云服务器。满足建站/应用开发/可视化管理等个性化需求。
  这里我们选择公共镜像的Ubuntu最新版就好。

7. 存储
   

• 存储主要分系统盘和数据盘，系统盘就是整个操作系统所安装的虚拟硬盘，而数据盘则是提供挂载到某一盘符或者目录下。
• 数据盘的安全可靠性更高，推荐将网站数据存放于数据盘所挂载的目录或盘符下。
• 而普通云盘则是阿里云最早提供的云盘，在三盘副本和高可靠性下性能孱弱，只存在于无I/O优化的实例。高效云盘则是在三盘副本和高可靠性下提供 1240～3000 IOPS的磁盘性能，在60G以下性价比凸显。SSD云盘则是买的越大性能越好，最大提供20000 IOPS 的性能，磁盘大于60G的情况下有购买价值，性能明显。

8. 其他
   
   购买量，就是购买多长时间，以及多少台相同配置的ECS。

9. 安全设置
   

• 设置密钥，就是通过密钥文件登入 Linux 系统，而非通过密码，必须拥有密钥文件才可以登入系统。
• 自定义密码，就是通过密码登入Linux系统或者Windows 系统，推荐新手使用该方式。
• 创建后设置，就是生成实例了再通过重置密码的方式修改密码，不推荐！
  以上就是云服务器的大概创建过程，可能还有没有提到的部分，默认即可，因为如果是免费的学生服务器的话，没有太多选择。

二、设置安全组

1. 在安全组列表选择自己刚才创建的实例
   
2. 协议处是选择全部，当然因为我们这是在学习才这样选择，真正使用的时候遵从用什端口开放什么，越少越好的原则。
3. 在源处填写0.0.0.0/0.
   

三、服务器管理软件

1. putty
   下载后解压，运行putty.exe,中文版下载链接：https://github.com/larryli/PuTTY/releases/

• 登录，输入主机名称，保存的会话可以方便下次直接点击名称登录，不用输主机名了。
  

• 打开后，输入登录名 root ，如果打不开就是前面安全组没配置好，没有开放全部的端口。
  

• 输入密码，成功登录
  

• 更新软件。代码可以复制，然后再putty上按鼠标右键粘贴

apt update

2. VS Code
   也是直接下一步安装就好，下载链接：https://code.visualstudio.com/Download

• 汉化界面
  

Extensions - > 搜索框输入Chinese，安装即可

3. Filezilla
   直接安装。下载链接：https://filezilla-project.org/download.php?type=client

• 登录，主机上输入sftp:// + 加上主机号，其他部分如图。
  
• 文件编辑上手
  在要操作的文件上右键选择查看/编辑
  
  选择使用自定义程序，然后点击浏览，将前面下载的VS Code的路径贴到文件名处。

打开后，选定Code.exe文件，打开后，

点击确定

整个过程如下面的演示：

四、Docker

优点请如下图所示：

1. 安装Docker环境

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

2. 安装 Docker-Compose环境，其中 1.25.3 可以根据最新版本

curl -L https://get.daocloud.io/docker/compose/releases/download/1.26.0/docker-compose-`uname -s`-`uname -m` > /usr/local/bin/docker-compose
chmod +x /usr/local/bin/docker-compose

五、部署Web IDE

---

1.介绍

首先是Code-Serverg工具的部署，这样就可以将Visual Studio Code运行在服务器上，这样就可以跨平台使用这款工具了。具体介绍见下图：

2. 部署

• 创建项目文件夹：

mkdir -p /home/coder/project

• 在Docker中运行：

docker run -it -p 80:8080 --name code -v “/home/coder/:/home/coder/”
docker.mirrors.ustc.edu.cn/codercom/code-server

3. Code-server 开始部署。