使用阿里云ECS搭建一套网页IDE

1

领取资源

参与者需领取ECS免费资源去领取

2

快速部署Web IDE

跟着操作文档，学习搭建网页IDE去学习

3

上传作品

完成部署并上传作品去上传

领取试用资源

下方ECS免费试用资源二选一，显示“已试用”即为领取成功（仅限新用户）

Error: No entry or manifest in @ali/alfa-aliyundotcom-free-widget-goods-card
    at https://g.alicdn.com/hmod/ace-developer-factory-free-product/0.0.8/??index.js,services.js:1:272081
    at h (https://g.alicdn.com/hmod/ace-developer-factory-free-product/0.0.8/??index.js,services.js:1:125427)
    at Generator.<anonymous> (https://g.alicdn.com/hmod/ace-developer-factory-free-product/0.0.8/??index.js,services.js:1:125178)
    at Generator.next (https://g.alicdn.com/hmod/ace-developer-factory-free-product/0.0.8/??index.js,services.js:1:125786)
    at f (https://g.alicdn.com/hmod/ace-developer-factory-free-product/0.0.8/??index.js,services.js:1:203761)
    at a (https://g.alicdn.com/hmod/ace-developer-factory-free-product/0.0.8/??index.js,services.js:1:203963)
    at https://g.alicdn.com/hmod/ace-developer-factory-free-product/0.0.8/??index.js,services.js:1:204022
    at new Promise (<anonymous>)
    at https://g.alicdn.com/hmod/ace-developer-factory-free-product/0.0.8/??index.js,services.js:1:203904
    at https://g.alicdn.com/hmod/ace-developer-factory-free-product/0.0.8/??index.js,services.js:1:272271

Error: No entry or manifest in @ali/alfa-aliyundotcom-free-widget-goods-card
    at https://g.alicdn.com/hmod/ace-developer-factory-free-product/0.0.8/??index.js,services.js:1:272081
    at h (https://g.alicdn.com/hmod/ace-developer-factory-free-product/0.0.8/??index.js,services.js:1:125427)
    at Generator.<anonymous> (https://g.alicdn.com/hmod/ace-developer-factory-free-product/0.0.8/??index.js,services.js:1:125178)
    at Generator.next (https://g.alicdn.com/hmod/ace-developer-factory-free-product/0.0.8/??index.js,services.js:1:125786)
    at f (https://g.alicdn.com/hmod/ace-developer-factory-free-product/0.0.8/??index.js,services.js:1:203761)
    at a (https://g.alicdn.com/hmod/ace-developer-factory-free-product/0.0.8/??index.js,services.js:1:203963)
    at https://g.alicdn.com/hmod/ace-developer-factory-free-product/0.0.8/??index.js,services.js:1:204022
    at new Promise (<anonymous>)
    at https://g.alicdn.com/hmod/ace-developer-factory-free-product/0.0.8/??index.js,services.js:1:203904
    at https://g.alicdn.com/hmod/ace-developer-factory-free-product/0.0.8/??index.js,services.js:1:272271

学习Web IDE教程

ECS热门应用 | 轻松打造一套 Web IDE

使用阿里云ECS搭建一套网页IDE

一、开通云服务器免费试用

本实验可免费领取一台云服务器ECS资源，您可在本活动首页进行领取（仅限新用户领用）。

本试用教程以下列的配置信息为例，实际操作时，建议根据您的实际业务体量和需求选择。

参数	示例
操作系统	CentOS 7.9 64位。
预装应用	本教程无需选择。
产品所在地域	华东1（杭州）本教程以华东1（杭州）为例，您可根据实际需求进行选择
到期释放设置	建议您选择现在设置，避免到期未释放产生扣费。
其他参数	保持默认值或按需修改。

前往ECS控制台，在左侧导航栏，选择实例与镜像 > 实例。
在顶部菜单栏左上角处，选择和试用实例相同的地域（本教程示例华东1（杭州））。
设置该实例登录密码。找到您创建的试用实例，在其右侧操作列单击 > 实例属性 > 重置实例密码，按照界面提示设置ECS实例的登录密码。

说明：实例创建完成大约3~5分钟后，才支持重置实例密码，如不可重置请耐心等待后重试。

单击试用实例的ID，选择安全组页签，单击安全组操作列的配置规则，在入方向添加需要放行的端口。本教程中，在安全组入方向放行80、443、22、3389、8080端口。

领取完免费试用后，返回资源领取界面，选中我已阅读并同意《阿里云云起实验室服务协议》，单击我已开通，进入实验。

说明：如果您的阿里云账号只能领取部分免费试用产品，请您领取符合免费试用资格的产品，然后进入实验，不满足免费试用资格的产品将会使用个人账户资源进行创建，并会产生一定的费用，请您及时关注账户扣费。

二、安装Docker

在执行如下命令，更新yum源。

在执行如下命令，安装相关的软件包。

在执行如下命令，添加Docker的Yum源。

在执行如下命令，安装Docker。

在执行如下命令，启动Docker并设置开机启动。

三、运行Code-Server

执行如下命令，启动Code-Server的Docker容器。

参数说明：

-d 参数表示后台运行容器。
-p 8080:8080 将容器内的 8080 端口映射到主机的8080端口。
-v "${HOME}/.config:/home/coder/.config" 将主机上的 VS Code 配置目录挂载到容器内，这样你的配置和插件就可以持久化了。
-v "${PWD}:/home/coder/project" 将当前工作目录挂载到容器内，以便在容器中编辑项目文件。
-u "$(id -u):$(id -g)" 以当前用户的 UID 和 GID 运行容器，这可以避免权限问题。
-e "DOCKER_USER=$USER" 设置环境变量 DOCKER_USER 为当前用户，有些镜像可能会用到这个变量来创建匹配的用户账户。
执行如下命令，查看正在运行的容器。

返回如下结果，您可以获取Code-Server的容器ID。

执行如下命令，查看Code-Server的容器日志。

说明：您需要将命令中的<容器ID或名称>替换为第二步获取到的Code-Server的容器ID。

返回如下结果，您可查看到密码通常存储在/root/.config/code-server/config.yaml文件中。

执行如下命令，进入容器。

说明：您需要将命令中的<容器ID或名称>替换为第二步获取到的Code-Server的容器ID。

执行如下命令，在容器内部查看配置文件，获取密码。

返回如下结果，您可获取到密码。

访问Code-Server。

在本机浏览器中打开新页签，并访问 http://:8080。

说明：您可在云服务器ECS的实例列表页面查看ECS公网地址。

在首次访问时，Code-Server可能会要求你输入密码，这个密码通常在容器的启动日志中可以找到。

在Welcome to code-server页面，输入您在第五步获取的密码，单击SUBMIT。

返回如下页面，表示您已成功访问code-server，开始使用吧！

四、清理

ECS提供的个人版免费试用实例为按量付费实例。完成教程后，请参考以下规则处理实例：

如果无需继续使用ECS实例，可以登录ECS控制台，找到目标实例，在操作列单击，搜索并单击释放，根据界面提示释放实例。
如果需要继续使用ECS实例，请至少在试用到期1小时前为阿里云账号充值，确保账户金额不小于100.00元人民币。到期未续费的实例会因欠费而被自动停机，停机15天内实例将保留，15天后实例和数据都将被自动释放。

本操作手册介绍如何使用ECS云服务器搭建网页IDE。实验不仅大大增强了编码的便捷性，也提升了开发者的操作体验。

搭建一套网页IDE，前往了解

快速部署

作者信息

弹性计算-小弹

关注

作品展示

技术达人分享应用部署经验

上传作品

更多作品

最新最热

使用阿里云ECS搭建一套网页IDE可以为团队提供便捷的开发环境，以下是我使用阿里云ECS搭建网页IDE的心得体会：选择适当的ECS实例类型：根据团队规模和项目需求选择适合的ECS实例类型。考虑到网页IDE可能需要较高的计算和内存资源，建议选择性能较好的实例类型。选择合适的操作系统：根据您团队的喜好和项目需求，选择适合的操作系统。常用的操作系统包括CentOS、Ubuntu等，确保您熟悉该操作系统的基本操作和配置。安装和配置网页IDE软件：选择一个适合的网页IDE软件，如Cloud9、Code Server等，并根据软件提供的文档进行安装和配置。确保您的ECS实例上已经安装了必要的依赖和插件，并设置访问控制，只允许受信任的IP地址进行访问。数据持久化和备份：为了确保代码和项目数据的安全和可恢复性，建议将数据进行持久化存储，并定期进行备份。您可以使用阿里云的云盘或对象存储服务（如OSS）来存储网页IDE的数据。安全设置：确保您的ECS实例已经设置了安全组规则，限制只有必要的端口对外开放，并且设置访问控制，只允许受信任的IP地址进行访问。同时，定期更新和升级您的软件和操作系统，以弥补潜在的安全漏洞。性能优化和监控：使用阿里云的云监控服务，监控您的ECS实例和网页IDE的性能指标，并设置告警规则，帮助您进行性能优化和故障排查。确保您的ECS实例具备足够的计算和内存资源，以保证网页IDE的流畅运行。高可用性和扩展性：如果团队对高可用性和扩展性有要求，可以考虑使用阿里云的负载均衡和自动伸缩等服务，以确保网页IDE的稳定性和可用性。总的来说，使用阿里云ECS搭建网页IDE为团队提供了灵活和便捷的开发环境。根据团队规模和项目需求选择适当的资源和服务，结合阿里云的监控和安全功能，可以更好地管理和优化网页IDE的性能和安全性。