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

本文涉及的产品
云服务器 ECS,每月免费额度200元 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
相关文章
|
16小时前
|
前端开发 Java Go
从前端到后端:构建现代化Web应用的技术演进
本文探讨了从前端到后端的技术演进,介绍了前端、后端以及多种编程语言,如Java、Python、C、PHP和Go,以及数据库在构建现代化Web应用中的应用。通过深入剖析各个技术领域的发展和应用,读者将对构建高效、可扩展、安全的Web应用有更深入的理解。
|
2天前
|
缓存 监控 安全
Django框架在大型Web应用中的架构设计与实战
【5月更文挑战第18天】Django框架在构建大型Web应用中扮演重要角色,采用分层架构(数据、业务逻辑、表示层)和多应用组织模式,结合缓存策略(如Memcached、Redis)提升性能。通过异步处理、分布式部署提高响应速度和扩展性。关注数据分区、安全设计及监控日志,确保系统高效、稳定。Django为复杂业务提供坚实基础,助力打造卓越Web系统。
18 7
|
2天前
|
开发框架 中间件 数据库
Django 框架入门全攻略:轻松构建 Web 应用
【5月更文挑战第18天】本文是 Django 入门教程,介绍了如何使用 Django 构建 Web 应用。内容包括安装、项目与应用创建、模型定义、数据库迁移、视图编写、路由配置、模板系统、表单处理和中间件的使用。通过实例展示了 Django 基本流程,帮助初学者快速上手。Django 提供高效工具,便于开发者聚焦业务逻辑,轻松构建功能丰富的 Web 应用。
19 5
|
2天前
|
存储 缓存 API
Flask 框架在大型 Web 应用中的使用与挑战
【5月更文挑战第18天】Flask框架适用于快速开发轻量级Web应用,但用于大型应用时需应对性能、代码管理和团队协作的挑战。通过集成扩展处理复杂需求,使用蓝图组织代码,以及引入缓存优化性能,结合明确的代码规范和开发流程,可有效应对挑战,构建高效稳定的应用。
19 5
|
2天前
|
数据库连接 Python
Flask 框架入门与实践:构建你的第一个 Web 应用
【5月更文挑战第18天】本文介绍了使用 Flask 框架构建第一个 Web 应用的步骤。首先通过 `pip install Flask` 安装框架,然后编写基本的 Python 代码创建应用,包括定义路由和响应。示例展示如何显示 &quot;Hello, World!&quot;,并扩展到显示用户信息的功能。利用模板(如 `index.html`)可使页面更丰富。随着学习深入,可以利用 Flask 的更多特性,如表单处理和数据库连接,来构建更复杂的 Web 应用。本文旨在激发读者对 Flask 和 Web 开发的兴趣,鼓励不断探索和实践。
15 7
|
3天前
|
存储 前端开发 网络协议
所有的 Web 应用其实就是一个 socket 服务端, 而用户使用的浏览器就是一个 socket 客户端程序
所有的 Web 应用其实就是一个 socket 服务端, 而用户使用的浏览器就是一个 socket 客户端程序
8 0
|
3天前
|
前端开发 Java Go
从前端到后端:构建现代化Web应用的技术实践
本文将介绍如何通过前端和后端技术相结合,构建现代化Web应用的技术实践。我们将探讨前端开发、后端架构以及多种编程语言(如Java、Python、C、PHP、Go)在构建高效、可扩展的Web应用中的应用。
|
15小时前
|
存储 弹性计算 监控
【阿里云弹性计算】深入阿里云ECS配置选择:CPU、内存与存储的最优搭配策略
【5月更文挑战第20天】阿里云ECS提供多种实例类型满足不同需求,如通用型、计算型、内存型等。选择CPU时,通用应用可选1-2核,计算密集型应用推荐4核以上。内存选择要考虑应用类型,内存密集型至少4GB起。存储方面,系统盘和数据盘容量依据应用和数据量决定,高性能应用可选SSD或高效云盘。结合业务特点和预算制定配置方案,并通过监控应用性能适时调整,确保资源最优利用。示例代码展示了使用阿里云CLI创建ECS实例的过程。
19 5
|
15小时前
|
存储 弹性计算 监控
【阿里云弹性计算】阿里云ECS全面解析:弹性计算服务的核心优势与应用场景
【5月更文挑战第20天】阿里云ECS是提供可伸缩计算能力的云服务,支持多种规格实例,满足不同需求。其核心优势包括灵活性、高性能、高可用性、安全性和易用性。适用场景包括网站托管、大数据处理、游戏多媒体应用及测试开发环境。通过Python示例代码展示了如何创建ECS实例,助力企业专注业务发展,简化基础设施管理。
23 5
|
16小时前
|
弹性计算
阿里云ECS使用体验
在申请高校学生免费体验阿里云ECS云服务器后的一些使用体验和感受。

相关产品

  • 云服务器 ECS
  • http://www.vxiaotou.com