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

简介: 使用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天后实例和数据都将被自动释放。
相关实践学习
借助OSS搭建在线教育视频课程分享网站
本教程介绍如何基于云服务器ECS和对象存储OSS,搭建一个在线教育视频课程分享网站。
7天玩转云服务器
云服务器ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,可降低 IT 成本,提升运维效率。本课程手把手带你了解ECS、掌握基本操作、动手实操快照管理、镜像管理等。了解产品详情:&nbsp;https://www.aliyun.com/product/ecs
相关文章
|
4天前
|
开发框架 缓存 .NET
并发请求太多,服务器崩溃了?试试使用 ASP.NET Core Web API 操作筛选器对请求进行限流
并发请求太多,服务器崩溃了?试试使用 ASP.NET Core Web API 操作筛选器对请求进行限流
|
2天前
|
人工智能 自然语言处理 搜索推荐
【人工智能】人工智能(AI)、Web 3.0和元宇宙三者联系、应用及未来发展趋势的详细分析
人工智能(AI)、Web 3.0和元宇宙作为当前科技领域的热门话题,它们之间存在着紧密的联系,并在各自领域内展现出广泛的应用和未来的发展趋势。以下是对这三者联系、应用及未来发展趋势的详细分析
11 2
【人工智能】人工智能(AI)、Web 3.0和元宇宙三者联系、应用及未来发展趋势的详细分析
|
3天前
|
人工智能 前端开发 开发工具
NET在企业级应用、Web开发、移动应用、云服务及游戏领域的创新实践
.NET技术自2000年推出以来,在软件开发领域扮演着关键角色。本文从核心优势出发,探讨其统一多语言平台、强大工具集、跨平台能力及丰富生态系统的价值;随后介绍.NET在企业级应用、Web开发、移动应用、云服务及游戏领域的创新实践;最后分析性能优化、容器化、AI集成等方面的挑战与机遇,展望.NET技术的未来发展与潜力。
11 2
|
3天前
|
JSON 前端开发 JavaScript
Web中的客户端和服务器端
Web中的客户端和服务器端
|
7天前
|
缓存 数据安全/隐私保护 UED
代理服务器在HTTP请求中的应用:Ruby实例
代理服务器在HTTP请求中的应用:Ruby实例
|
3天前
|
存储 NoSQL 关系型数据库
Web中的数据库:原理、应用与代码实现
Web中的数据库:原理、应用与代码实现
|
4天前
|
存储 开发框架 .NET
ASP.NET Web Api 使用 EF 6,DateTime 字段如何取数据库服务器当前时间
ASP.NET Web Api 使用 EF 6,DateTime 字段如何取数据库服务器当前时间
|
4天前
|
开发框架 .NET API
如何在 ASP.NET Core Web Api 项目中应用 NLog 写日志?
如何在 ASP.NET Core Web Api 项目中应用 NLog 写日志?
|
4天前
|
存储 Ubuntu 应用服务中间件
如何在虚拟专用服务器上配置 Nginx Web 服务器
如何在虚拟专用服务器上配置 Nginx Web 服务器
9 0
|
10天前
|
关系型数据库 Linux 网络安全
"Linux系统实战:从零开始部署Apache+PHP Web项目,轻松搭建您的在线应用"
【8月更文挑战第9天】Linux作为服务器操作系统,凭借其稳定性和安全性成为部署Web项目的优选平台。本文以Apache Web服务器和PHP项目为例,介绍部署流程。首先,通过包管理器安装Apache与PHP;接着创建项目目录,并上传项目文件至该目录;根据需要配置Apache虚拟主机;最后重启Apache服务并测试项目。确保防火墙允许HTTP流量,正确配置数据库连接,并定期更新系统以维持安全。随着项目复杂度提升,进一步学习高级配置将变得必要。
22 0

相关产品

  • 云服务器 ECS