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

本文涉及的产品
云服务器 ECS,每月免费额度280元 3个月
云服务器ECS,u1 2核4GB 1个月
简介: 使用ECS云服务器搭建网页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源。
sudo yum update -y
  1. 在执行如下命令,安装相关的软件包。
sudo yum install -y yum-utils device-mapper-persistent-data lvm2
  1. 在执行如下命令,添加Docker的Yum源。
sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo
  1. 在执行如下命令,安装Docker。
sudo yum install -y docker-ce docker-ce-cli containerd.io
  1. 在执行如下命令,启动Docker并设置开机启动。
sudo systemctl start docker
sudo systemctl enable docker

三、运行Code-Server

  1. 执行如下命令,启动Code-Server的Docker容器。
sudo docker run -d -p 8080:8080 -v "${HOME}/.config:/home/coder/.config" -v "${PWD}:/home/coder/project" -u "$(id -u):$(id -g)" -e "DOCKER_USER=$USER" codercom/code-server:latest

参数说明:

  • -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 为当前用户,有些镜像可能会用到这个变量来创建匹配的用户账户。
  • 执行如下命令,查看正在运行的容器。
sudo docker ps

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

4.png

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

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

sudo docker logs <容器ID或名称>

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

5.png

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

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

sudo docker exec -it <容器ID或名称> bash

6.png

  1. 执行如下命令,在容器内部查看配置文件,获取密码。
cat /root/.config/code-server/config.yaml

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

7.png

  1. 访问Code-Server。

在本机浏览器中打开新页签,并访问 http://<ECS公网地址>: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天后实例和数据都将被自动释放。
相关实践学习
一小时快速掌握 SQL 语法
本实验带您学习SQL的基础语法,快速入门SQL。
7天玩转云服务器
云服务器ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,可降低 IT 成本,提升运维效率。本课程手把手带你了解ECS、掌握基本操作、动手实操快照管理、镜像管理等。了解产品详情:&nbsp;https://www.aliyun.com/product/ecs
相关文章
|
3天前
|
前端开发 JavaScript 关系型数据库
从前端到后端:构建现代化Web应用的技术探索
在当今互联网时代,Web应用的开发已成为了各行各业不可或缺的一部分。从前端到后端,这篇文章将带你深入探索如何构建现代化的Web应用。我们将介绍多种技术,包括前端开发、后端开发以及各种编程语言(如Java、Python、C、PHP、Go)和数据库,帮助你了解如何利用这些技术构建出高效、安全和可扩展的Web应用。
|
19天前
|
监控 Serverless 测试技术
Serverless 应用引擎常见问题之做的web服务计费如何解决
Serverless 应用引擎(Serverless Application Engine, SAE)是一种完全托管的应用平台,它允许开发者无需管理服务器即可构建和部署应用。以下是Serverless 应用引擎使用过程中的一些常见问题及其答案的汇总:
168 3
|
1天前
|
JavaScript 前端开发 API
Vue.js:构建高效且灵活的Web应用的利器
Vue.js:构建高效且灵活的Web应用的利器
|
9天前
|
XML JSON JavaScript
使用JSON和XML:数据交换格式在Java Web开发中的应用
【4月更文挑战第3天】本文比较了JSON和XML在Java Web开发中的应用。JSON是一种轻量级、易读的数据交换格式,适合快速解析和节省空间,常用于API和Web服务。XML则提供更强的灵活性和数据描述能力,适合复杂数据结构。Java有Jackson和Gson等库处理JSON,JAXB和DOM/SAX处理XML。选择格式需根据应用场景和需求。
|
24天前
|
前端开发 JavaScript 安全
深入探索 Qt6 web模块 WebEngineCore:从基础原理到高级应用与技巧
深入探索 Qt6 web模块 WebEngineCore:从基础原理到高级应用与技巧
71 0
|
24天前
|
缓存 监控 应用服务中间件
如何使用负载均衡器提升Python Web应用的性能?
【2月更文挑战第27天】【2月更文挑战第94篇】如何使用负载均衡器提升Python Web应用的性能?
|
25天前
|
弹性计算 人工智能 物联网
挖掘阿里云ECS的潜力:创意应用和未来可能性
在云厂商中,我觉得开发者更信赖阿里云的云产品,而且随着阿里云最近宣布云产品降价的消息,会有更多的开发者和企业选择阿里云的云产品。这里拿阿里云的云服务器来做说明,阿里云的云服务器ECS为用户提供了强大的计算资源和灵活的扩展性,使其成为搭建各种有趣和创意应用的理想平台。除了已知的小游戏、小程序和个人网盘等应用案例之外,本文还会进一步探讨ECS在特定场景下的实践经验,并挖掘其在其他领域的潜力,为大家带来更多创意和启发。
550 3
挖掘阿里云ECS的潜力:创意应用和未来可能性
|
25天前
|
物联网 调度 开发者
构建高效Python Web应用:异步编程与Tornado框架解析
【2月更文挑战第27天】 在处理高并发的Web应用场景时,传统的同步阻塞模型往往难以满足性能需求。本文将深入探讨Python世界中的异步编程概念,并结合Tornado这一轻量级、非阻塞式Web服务器及框架,展示如何构建高性能的Web应用。通过实例驱动的方法论,我们将剖析Tornado的核心组件,包括其IOLoop、异步HTTP客户端和服务器端处理机制,以及与协程集成的细节。文章旨在为开发者提供一套实践指南,帮助他们利用Python实现快速响应和资源高效的Web服务。
23 2
|
8天前
|
监控 JavaScript 前端开发
《理解 WebSocket:Java Web 开发的实时通信技术》
【4月更文挑战第4天】WebSocket是Java Web实时通信的关键技术,提供双向持久连接,实现低延迟、高效率的实时交互。适用于聊天应用、在线游戏、数据监控和即时通知。开发涉及服务器端实现、客户端连接及数据协议定义,注意安全、错误处理、性能和兼容性。随着实时应用需求增加,WebSocket在Java Web开发中的地位将更加重要。
|
19天前
|
Web App开发 前端开发 开发工具
介绍Web开发的基础知识
介绍Web开发的基础知识
25 7

热门文章

最新文章

相关产品

  • 云服务器 ECS