AI 助理
备案控制台登录注册
1
领取资源
参与者需领取ECS免费资源去领取
2
快速部署Web IDE
跟着操作文档，学习搭建网页IDE去学习
3
上传作品
完成部署并上传作品去上传
领取试用资源
下方ECS免费试用资源二选一，显示“已试用”即为领取成功（仅限新用户）
No entry or manifest in @ali/alfa-aliyundotcom-free-widget-goods-card
Error: No entry or manifest in @ali/alfa-aliyundotcom-free-widget-goods-card
    at http://g.alicdn.com/hmod/ace-developer-factory-free-product/0.0.8/??index.js,services.js:1:272081
    at h (http://g.alicdn.com/hmod/ace-developer-factory-free-product/0.0.8/??index.js,services.js:1:125427)
    at Generator.<anonymous> (http://g.alicdn.com/hmod/ace-developer-factory-free-product/0.0.8/??index.js,services.js:1:125178)
    at Generator.next (http://g.alicdn.com/hmod/ace-developer-factory-free-product/0.0.8/??index.js,services.js:1:125786)
    at f (http://g.alicdn.com/hmod/ace-developer-factory-free-product/0.0.8/??index.js,services.js:1:203761)
    at a (http://g.alicdn.com/hmod/ace-developer-factory-free-product/0.0.8/??index.js,services.js:1:203963)
    at http://g.alicdn.com/hmod/ace-developer-factory-free-product/0.0.8/??index.js,services.js:1:204022
    at new Promise (<anonymous>)
    at http://g.alicdn.com/hmod/ace-developer-factory-free-product/0.0.8/??index.js,services.js:1:203904
    at http://g.alicdn.com/hmod/ace-developer-factory-free-product/0.0.8/??index.js,services.js:1:272271
No entry or manifest in @ali/alfa-aliyundotcom-free-widget-goods-card
Error: No entry or manifest in @ali/alfa-aliyundotcom-free-widget-goods-card
    at http://g.alicdn.com/hmod/ace-developer-factory-free-product/0.0.8/??index.js,services.js:1:272081
    at h (http://g.alicdn.com/hmod/ace-developer-factory-free-product/0.0.8/??index.js,services.js:1:125427)
    at Generator.<anonymous> (http://g.alicdn.com/hmod/ace-developer-factory-free-product/0.0.8/??index.js,services.js:1:125178)
    at Generator.next (http://g.alicdn.com/hmod/ace-developer-factory-free-product/0.0.8/??index.js,services.js:1:125786)
    at f (http://g.alicdn.com/hmod/ace-developer-factory-free-product/0.0.8/??index.js,services.js:1:203761)
    at a (http://g.alicdn.com/hmod/ace-developer-factory-free-product/0.0.8/??index.js,services.js:1:203963)
    at http://g.alicdn.com/hmod/ace-developer-factory-free-product/0.0.8/??index.js,services.js:1:204022
    at new Promise (<anonymous>)
    at http://g.alicdn.com/hmod/ace-developer-factory-free-product/0.0.8/??index.js,services.js:1:203904
    at http://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

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

  1. 本实验可免费领取一台云服务器ECS资源，您可在本活动首页进行领取（仅限新用户领用）。
  • 本试用教程以下列的配置信息为例，实际操作时，建议根据您的实际业务体量和需求选择。

参数

示例

操作系统

CentOS 7.9 64位。

预装应用

本教程无需选择。

产品所在地域

华东1（杭州）

本教程以华东1（杭州）为例，您可根据实际需求进行选择

到期释放设置

建议您选择现在设置，避免到期未释放产生扣费。

其他参数

保持默认值或按需修改。

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

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

1.png

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

2.png

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

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

3.png

二、安装Docker

  1. 在执行如下命令，更新yum源。
  1. 在执行如下命令，安装相关的软件包。
  1. 在执行如下命令，添加Docker的Yum源。
  1. 在执行如下命令，安装Docker。
  1. 在执行如下命令，启动Docker并设置开机启动。

三、运行Code-Server

  1. 执行如下命令，启动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。

4.png

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

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

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

5.png

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

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

6.png

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

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

7.png

  1. 访问Code-Server。

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

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

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

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

8.png

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

9.png

四、 清理

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

  • 如果无需继续使用ECS实例，可以登录ECS控制台，找到目标实例，在操作列单击 ，搜索并单击释放，根据界面提示释放实例。
  • 如果需要继续使用ECS实例，请至少在试用到期1小时前为阿里云账号充值，确保账户金额不小于100.00元人民币。到期未续费的实例会因欠费而被自动停机，停机15天内实例将保留，15天后实例和数据都将被自动释放。
本操作手册介绍如何使用ECS云服务器搭建网页IDE。实验不仅大大增强了编码的便捷性，也提升了开发者的操作体验。
搭建一套网页IDE，前往了解
快速部署
作者信息
关注
作品展示
技术达人分享应用部署经验
上传作品
更多作品
最新最热
正在加载数据...
AI助理

你好，我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问
快捷注册登录阿里云