AWS EC2 部署Echarts大屏展示项目

news2024/10/8 12:09:58

前言

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/2196312.html

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

相关文章

大模型RAG:文档分块方案与RAG全流程

一 RAG与文本分块 1.1 为什么要文档分块 我们知道,大模型在预训练阶段获取的知识是有限的,一般需要数据增强模块引入外部知识库,通过知识检索的方式搜索于用户提问相关的知识,这也是RAG相关应用架构出现的原因。但这又引申出另一…

一个简单的将产品图册转换为翻页电子产品图册的方法

​在数字化浪潮席卷全球的今天,企业纷纷寻求转型,纸质产品图册逐渐被翻页电子图册所替代。电子图册不仅具有环保、便捷、易于更新等优势,还能为企业节省大量印刷和物流成本。那么,如何将现有的实体产品图册转化为翻页电子图册呢 1…

YOLO11改进|注意力机制篇|引入反向残差移动快iRMB

目录 一、【iRMB】注意力机制1.1【iRMB】注意力介绍1.2【iRMB】核心代码 二、添加【iRMB】注意力机制2.1STEP12.2STEP22.3STEP32.4STEP4 三、yaml文件与运行3.1yaml文件3.2运行成功截图 一、【iRMB】注意力机制 1.1【iRMB】注意力介绍 反向残差移动快iRMB结构如下所示&#xf…

「Ubuntu」根目录存储空间不足

Linux系统不同于 Windows系统,复杂的文件系统常常让人头疼,特别是动不动就存储空间不足,简单的清空回收站根本不管用,在此推荐一个绝对好用的方法,并且还可以多学习一条 Linux命令 1、du 使用方法 通过使用命令 du&am…

LabVIEW激光诱导击穿光谱识别与分析系统

LabVIEW激光诱导击穿光谱(LIBS)分析系统利用高能量脉冲激光产生高温等离子体,通过分析等离子体发出的光谱来定性分析样品中的元素种类。该系统的开发集成了软件与硬件的设计,实现了自动识别和定性分析功能,适用于环境监…

华为OD机试 - 优雅子数组 - 暴力枚举(Python/JS/C/C++ 2024 E卷 100分)

华为OD机试 2024E卷题库疯狂收录中,刷题点这里 专栏导读 本专栏收录于《华为OD机试真题(Python/JS/C/C)》。 刷的越多,抽中的概率越大,私信哪吒,备注华为OD,加入华为OD刷题交流群,…

哦豁!有了这份学习路径,AI小白也能学懂大模型!!

小白如何规划大模型学习路径?? 元仔有求必应,为各位同学整理出一份完整的大模型学习路径规划! 初识大模型:概念与趋势 首先,AI小白应从基础出发,理解什么是大模型。 大模型,顾名…

LeetCode讲解篇之98. 验证二叉搜索树

文章目录 题目描述题解思路题解代码题目链接 题目描述 题解思路 我们可以通过递归搜索的方式查询某棵树是不是二叉搜索树,二叉搜索树需要满足的最小值与最大值的约束并且左子树和右子树都是二叉搜索树或者当前节点为空,以当前节点为根节点的树才是二叉搜…

WPF中的布局

布局原则 1、不显式设置元素大小。 2、不使用绝对定位。 元素应该根据容器的内容来进行排列。绝对定位在开发前期会带来一些便捷,但扩展性比较差。一旦显示器尺寸或分辨率发生改变,界面的显示效果可能会达不到预期的效果。 3、布局容器可以嵌套使用 常…

Django 5 用后台admin 做一个简单 DIY 电脑组装报价系统

1. 注意点 合计价格 admin.register(ComputerConfiguration) class ComputerConfigurationAdmin(admin.ModelAdmin):inlines [ConfigurationComponentInline]list_display (config_id, user_id, config_name, total_price, total_jh_price, total_selling_price)list_display…

碰撞检测 | 图解视线生成Bresenham算法(附ROS C++/Python/Matlab实现)

目录 0 专栏介绍1 Bresenham算法介绍2 图解Bresenham算法3 算法流程4 仿真实现4.1 ROS C实现4.2 Python实现4.3 Matlab实现 0 专栏介绍 🔥课设、毕设、创新竞赛必备!🔥本专栏涉及更高阶的运动规划算法轨迹优化实战,包括&#xff…

HarmonyOS Next元服务开发快速入门案例

项目代码gitee地址: (HarmonyOS Next 元服务开发快速入门: HarmonyOS Next 元服务开发快速入门 - Gitee.com) 开源协议使用:Apache License 2.0 ,代码包支持免费使用,可进行二次开发后选择开源或闭源。 一、创建项目 1.创建项目&…

大学生社团活动系统小程序的设计

管理员账户功能包括:系统首页,个人中心,学生管理,社长管理,社团分类管理,社团信息管理,社团加入管理,社团活动管理,轮播图信息 微信端账号功能包括:系统首页…

基于SpringBoot vue3 的山西文旅网java网页设计与实现

博主介绍:专注于Java(springboot ssm springcloud等开发框架) vue .net php phython node.js uniapp小程序 等诸多技术领域和毕业项目实战、企业信息化系统建设,从业十五余年开发设计教学工作☆☆☆ 精彩专栏推荐订阅☆☆☆☆…

项目完整开发的流程

流程 1.设计产品 2.写需求文档 2.1需求分析,后端设计数据库,建表,客户沟通,说完签字,留证据,防止后面扯皮,和防止后续变需求重新写业务 3.画原型图,也就是草图,初始的…

LeetCode讲解篇之2466. 统计构造好字符串的方案数

文章目录 题目描述题解思路题解代码题目链接 题目描述 题解思路 组成长度为i的字符串个数 组成长度为i - zero的字符串个数 组成长度为i - one的字符串个数 设数组f中i号元素的值为组成长度为i的字符串个数 则状态转移方程为f[i] f[i - zero] f[i - one],其中需…

【unity进阶知识10】从零手搓一个UI管理器/UI框架,自带一个提示界面,还有自带DOTween动画效果

最终效果 文章目录 最终效果前言UI管理器1、新增UI面板层枚举2、初始化2.1、用代码创建画布2.2、用代码创建UI面板的父物体层2.3、代码添加EventSystem物体 3、ShowPanel显示面板方法4、HidePanel隐藏面板的方法5、CloseUI关闭界面的方法6、UI界面基类 测试调用优化绑定按钮事件…

C语言初步介绍(初学者,大学生)【上】

1.C语⾔是什么? ⼈和⼈交流使⽤的是⾃然语⾔,如:汉语、英语、⽇语 那⼈和计算机是怎么交流的呢?使⽤ 计算机语⾔ 。 ⽬前已知已经有上千种计算机语⾔,⼈们是通过计算机语⾔写的程序,给计算机下达指令&am…

【AIGC产品经理】面试7家,拿到2个offer,薪资中上水平

Hello,大家好,我是一名不知名的5年B端金融产品经验的产品经理,成功转行AI产品经理,前期面试了北京百度、阿里、理想汽车、百川智能、华为、OPPO等多家大厂面试,但是由于已定居成都,主动终止了后续需要线下的…

ubuntu 系统安装

使用VMware虚拟机上进行实现 官网下载地址: https://cn.ubuntu.com/download https://releases.ubuntu.com 操作系统手册: https://ubuntu.com/server/docs/ (里面包含安装文档) 安装指南(详细)&#xff1a…