【亚马逊云科技产品测评】活动征文|AWS EC2 部署Echarts大屏展示项目

news2024/10/6 1:41:33

前言

Echarts简介


     ECharts是一个使用JavaScript开发的,开源的可视化库。它可以让数据变得生动起来,提供直观,交互性强,可高度个性化定制的数据可视化图表。ECharts支持大部分的浏览器,如IE6+、Chrome、Firefox、Safari等,同时支持PC和移动设备。

     开源:ECharts是一个开源项目,其源代码在GitHub上是公开的,任何人都可以查看和使用。
丰富的图表类型:ECharts提供了常规的折线图、柱状图、散点图、饼图、K线图,还提供了用于统计数据的多维数据图,如地图、热力图、线图,关系图等。
交互性强:用户可以直接与图表进行交互,如数据的区域选取、缩放、拖拽等。
动态数据:ECharts支持动态数据的更新,数据的改变可以实时在图表中反映出来。
高度自定义:ECharts提供了丰富的API和配置项,用户可以根据自己的需求定制图表。
     ECharts因为其强大的功能和良好的兼容性,已经被广泛应用在各种项目中,包括网站的数据展示、后台管理系统的数据统计、大数据的可视化等。同时,许多公司也使用ECharts来制作报表,以便更直观地展示数据和分析结果。

     总的来说,ECharts是一个非常优秀的JavaScript图表库,它提供了丰富的图表类型和强大的交互功能,使得数据可视化变得更加简单和直观。无论你是开发者,数据分析师,还是研究人员,都可以通过ECharts来创建你需要的图表,更好地理解和展示你的数据。

主题

今天我们的主题,就是在aws EC2系统上配置node环境,搭建一个Echarts大屏展示项目,并完成外网的访问。

大纲

1、登录
2、连接EC2实例
3、配置node、npm环境
4、配置git
5、从github拉取Echarts大屏展示项目
6、外网访问Vue项目

1、登录

1.1、 打开亚马逊云科技(Amazon Web Services)官方网站

网址为https://aws.amazon.com/

1.2、登录

在这里插入图片描述
在这里插入图片描述

1.3、登录之后进入实例控制台

在这里插入图片描述

2、连接EC2实例

点击1.3的【连接】按钮,进入【连接到实例】页面;
我们直接使用 EC2 Instance Connect 进行连接,点击。
在这里插入图片描述
在这里插入图片描述

3、配置node、npm环境

3.1、检查aws linux内置包管理工具

通过输入apt、yum,发现内置包管理工具是yum。
在这里插入图片描述

yum( Yellow dog Updater, Modified)是一个在 Fedora 和 RedHat 以及 SUSE 中的Shell 前端软件包管理器。

基于 RPM 包管理,能够从指定的服务器自动下载 RPM包并且安装,可以自动处理依赖性关系,并且一次安装所有依赖的软件包,无须繁琐地一次次下载、安装。

yum 提供了查找、安装、删除某一个、一组甚至全部软件包的命令,而且命令简洁而又好记。

3.2、检查node环境配置

[ec2-user@ip-172-31-26-148 ~]$ node -v
-bash: node: command not found

3.2.1、安装、配置node

安装node命令

sudo yum install -y nodejs

在这里插入图片描述
在这里插入图片描述

3.2.2、再次检查node

再次输入【node -v】,此时显示node版本18.18.2
输入【npm -v】,此时显示npm版本9.8.1
代表node、npm已经都配置成功。
在这里插入图片描述

4、配置git

4.1、安装git

输入命令

sudo yum install -y git

在这里插入图片描述

4.2、检查git配置

[ec2-user@ip-172-31-26-148 ~]$ git -v
git version 2.40.1

5、从github拉取Echarts大屏展示项目

在这里插入图片描述

5.1、进入项目目录

在这里插入图片描述

5.2、查看安全组

http协议开通了80端口(aws linux http协议默认就是80,而且修改不了)
在这里插入图片描述

5.3、启动项目并以80端口启动

输入命令

npm run serve – --port 80

在这里插入图片描述

5.3.1、解决端口变1024问题

1、nginx或者其他代理软件,把端口转发了,需要去检查端口占用
很显然没有被占用

lsof -i:80

在这里插入图片描述

2、权限不够,我们在命令前加上:sudo

sudo npm run serve – --port 80

在这里插入图片描述
在这里插入图片描述

6、外网访问Vue项目

第5步启动的Vue大屏项目,显示的都是本地、内网地址,我们需要在实例页面查找到外网IP
访问地址:http://34.216.244.162/#/
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

总结

AWS EC2云服务器在使用过程中特别方便,十分钟了就搞定了Echarts大屏项目的环境配置以及打包部署工作,最终能在互联网上呈现大屏展示炫酷效果。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1191724.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

《QT从基础到进阶·十六》QT实现客户端和服务端的简单交互

QT版本:5.15.2 VS版本:2019 客户端程序主要包含三块:连接服务器,发送消息,关闭客户端 服务端程序主要包含三块:打开消息监听,接收消息并反馈,关闭服务端 1、先打开服务端监听功能 …

烟草5G智慧工厂数字孪生可视化平台,赋能烟草工业数字化智慧转型

随着卷烟工厂提质增效需求增强,信息化建设推进及生产制造系统智能化改革发展,各生产单元逐步升级完善数字化,最终实现智能制造成为必然趋势。因此,5G卷烟加工工厂的数字化转型迫在眉睫。中国烟草制造行业正迈向全新的市场经济时代…

vue-element-admin 集成框架设置中文语言

首先拉取中文版分支代码 https://github.com/PanJiaChen/vue-element-admin/tree/i18n (下载卡的话,下载小羊的压缩包,已上传资源) \src\lang\index.js 改完dangdangdang可以啦

性价比高的照明品牌,五款经济实惠的照明品牌推荐

很多家长有时候会说孩子觉得家里的台灯灯光刺眼,看书看久了就不舒服。这不仅要看光线亮度是否柔和,还要考虑台灯是不是有做遮光式设计。没有遮光式设计的台灯,光源外露,灯光会直射孩子头部,孩子视线较低,很…

Kotlin库实现多线程爬取数据

由于字数限制,以下是一个简化版的爬虫程序示例,使用了Kotlin的网络库kotlinx.coroutines和kotlinx.html。这个程序会爬取一个简单的Python多线程跑数据的网页,并打印出结果。 import kotlinx.coroutines.* import kotlinx.html.* import java…

Word脚注如何插入?1分钟学会!

“最近在写一些文章,引用了一些注释,想为它们增添一些脚注。有没有朋友知道在word里脚注怎么添加呀?” 使用word编写文章时,添加脚注是一项常见的任务,用于引用文献、添加注释或提供额外信息。但可能很多朋友不知道wor…

如何在本地运行稳定扩散模型

推荐基于稳定扩散(stable diffusion) AI 模型开发的自动纹理工具: DreamTexture.js自动纹理化开发包 - NSDT 继 DALL-E 2 和 Imagen 之后,新的深度学习模型 Stable Diffusion 标志着文本到图像领域的巨大飞跃。本月早些时候发布的 Stable Diffusion 承诺…

Java进阶(垃圾回收GC)——理论篇:JVM内存模型 垃圾回收定位清除算法 JVM中的垃圾回收器

前言 JVM作为Java进阶的知识,是需要Java程序员不断深度和理解的。 本篇博客介绍JVM的内存模型,对比了1.7和1.8的内存模型的变化;介绍了垃圾回收的语言发展;阐述了定位垃圾的方法,引用计数法和可达性分析发以及垃圾清…

vue3+antv2.x的画布

报错信息: TypeError: Cannot destructure property component of registry_1.shapeMaps[node.shape] as it is undefined. at VueShapeView.renderVueComponent (http://192.168.10.35:9029/node_modules/.vite/deps/antv_x6-vue-shape.js?v49fbfab0:5569:19…

卷王必看。非肿瘤+WGCNA+单细胞,快来抄作业

今天给同学们分享一篇生信文章“m6A Regulators Is Differently Expressed and Correlated With Immune Response of Esophageal Cancer”,这篇文章发表在Dis Markers期刊上,影响因子为3.464。 结果解读: 食道癌中差异表达基因(D…

第18章 Swing 程序设计

概述 String包的层次结构和继承关系如下 常用的Swing组件如下表 Swing常用窗体 JFrame 窗体 JFrame 类的常用构造方法包括以下两种形式: public JFrame():创建一个初始不可见、没有标题的窗体。 public JFrame(String title)…

mac录屏没有声音?这里有答案!

在mac上进行屏幕录制是一件简单的事情,可用于创建教程、演示、游戏录制等。然而,有时用户可能会遇到一个常见的问题——录制视频时没有声音。本文将介绍两种主要的方法来解决mac录屏没有声音的问题,以确保您的录制包含声音。 mac录屏没有声音…

【LeetCode: 54. 螺旋矩阵 | 模拟】

🚀 算法题 🚀 🌲 算法刷题专栏 | 面试必备算法 | 面试高频算法 🍀 🌲 越难的东西,越要努力坚持,因为它具有很高的价值,算法就是这样✨ 🌲 作者简介:硕风和炜,…

微信小程序主包和分包资源相互引用规则

微信分包文档 文档中只提到了分包对于兄弟分包和主包之间的引用关系,但是并未提及,主包是否可以引用分包资源。其实只需要明白两点, 第一点:分包永远都是异步加载的 第二点:主包可以预加载分包 那么其实这里就已经很…

解决:AttributeError: ‘WebDriver‘ object has no attribute ‘find_element_by_id‘

解决:AttributeError: ‘WebDriver’ object has no attribute ‘find_element_by_id’ 背景 在使用之前的代码通过selenium定位元素时,报错:selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to loca…

聚焦千兆光模块和万兆光模块的测试技术及设备

千兆光模块和万兆光模块的测试技术涉及多个方面,如光学性能测试、电气性能测试、动态性能测试、温度测试、环境和耐久性测试等。不同的测试技术可以验证不同的光模块的性能和稳定性,从而确保光模块在各种应用场景下的可靠性,下面将介绍一些常…

Leetocde35-搜索插入位置

官方题解 class Solution {public int searchInsert(int[] nums, int target) {int n nums.length;int left 0, right n - 1, ans n;while (left < right) {int mid ((right - left) >> 1) left;if (target < nums[mid]) {ans mid;right mid - 1;} else {…

【数据结构】二叉树顺序存储:堆详解!(图解+源码)

&#x1f3a5; 屿小夏 &#xff1a; 个人主页 &#x1f525;个人专栏 &#xff1a; 数据结构解析 &#x1f304; 莫道桑榆晚&#xff0c;为霞尚满天&#xff01; 文章目录 &#x1f324;️前言&#x1f324;️堆的理论☁️二叉树的顺序存储☁️堆的概念 &#x1f324;️堆的实现…

代码随想录算法训练营第四十六天|139. 单词拆分、多重背包问题、总结

第九章 动态规划part08 139. 单词拆分 给你一个字符串 s 和一个字符串列表 wordDict 作为字典。请你判断是否可以利用字典中出现的单词拼接出 s 。 注意&#xff1a;不要求字典中出现的单词全部都使用&#xff0c;并且字典中的单词可以重复使用。 关于字符串类型的题目还是…

极智开发 | CUDA线程模型与全局索引计算方式

欢迎关注我的公众号 [极智视界],获取我的更多经验分享 大家好,我是极智视界,本文分享一下 CUDA线程全局索引计算方式。 邀您加入我的知识星球「极智视界」,星球内有超多好玩的项目实战源码和资源下载,链接:https://t.zsxq.com/0aiNxERDq CUDA 线程全局索引的计算,是很容…