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

前言

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.mfbz.cn/a/126763.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

不用开会员就能在线编辑、管理及分享各类地理空间数据!

「四维轻云」作为一款地理空间数据云管理平台,具有三维模型、正射影像、激光点云、数字高程模型、人工模型和矢量数据等地理空间数据的在线管理、浏览及分享等功能,致力于为用户提供更加方便、快捷的地理空间数据解决方案。 一、发布、管理超大空间数据…

韩语图片文字如何转为纯文本?

如何将上图为韩语的图片转为文本文件?这个需要用到OCR程序,操作方法如下: 一、打开金鸣识别网站。 二、点击“点击添加图片/PDF”,将待识别的图片添加到列表。 三、识别模块点选“通用文字”,输出格式选择“纯文本输…

Python3 API 的封装及调用

一、API 的封装 API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作…

【Node.js入门】1.3 开始开发Node.js应用程序

1.3 开始开发Node.js应用程序 学习目标 (1)熟悉开发工具Visual Studio Code的基本使用; (2)掌握Node.js应用程序的编写、运行和调试的基本方法。 构建第一个 Node.js应用程序 代码 const http require("htt…

前端js实现将数组对象组装成自己需要的属性,或者去掉对象中不必要的属性

前言 提示:这里可以添加本文要记录的大概内容: 需求:前端js实现将数组对象组装成自己需要的属性,或者前端js实现去掉对象中不必要的属性 提示:以下是本篇文章正文内容,下面案例可供参考 一、示例数组对象…

浅谈多回路电表在荷兰光伏系统配电项目中的应用

1.背景信息 Background: 随着全球化石能源(石油,煤炭)越来越接近枯竭,污染日趋严重,气候日益变暖等问题,全球多个国家和地区相继出台了法规政策,推动了光伏产业的发展。但是现有的光…

vioovi的ECRS工时分析软件:食品加工行业的生产效率提升利器

在食品加工行业,提高生产效率、降低成本、优化资源配置是至关重要的。随着科技的不断发展,越来越多的企业开始借助先进的软件工具来助力生产管理。本文将介绍一款备受食品加工企业青睐的工业工程软件——vioovi的ECRS工时分析软件,并探讨其如…

PR如何开启GPU加速

1.首先在 NCIDIA控制面板 找到 管理3D设置 (记得前提是你的显卡驱动程序是最新的或者已经安装了显卡驱动程序) 2.在管理3D设置里面 找到程序设置 自定义程序: Adobe premiere 里面的 CUDA - GPUs 改成 使用全局设置 (如果还有…

面试题:在 Java 中 new 一个对象的流程是怎样的?彻底被问懵了。。

文章目录 前言JVM内存JVM生成.class文件类加载器加载.class文件知识扩展:Class对象首先搞清楚 newInstance 两种方法区别: 连接和初始化创建实例 前言 对象怎么创建,这个太熟悉了,new一下(其实还有很多途径,比如反射、…

结合element的el-tooltip实现文本溢出进行省略,鼠标移入显示全部

结合element的el-tooltip实现文本溢出进行省略&#xff0c;鼠标移入则显示全部。如果没有出现省略&#xff0c;鼠标移入则不进行浮出显示。 多简单的一个功能&#xff0c;搜了一下其它人写的&#xff0c;写的简直是一言难尽。 <!--* 轮子的作者: 轮子哥* Date: 2023-08-29…

SAM + 用于文本到图像修复的稳定扩散

推荐基于稳定扩散(stable diffusion) AI 模型开发的自动纹理工具&#xff1a; DreamTexture.js自动纹理化开发包 - NSDT 什么是SAM&#xff1f; 今年早些时候&#xff0c;Meta AI 发布了新的开源项目&#xff1a;Segment Anything Model &#xff08;SAM&#xff09;&#xff…

day3 ARM

【昨日作业】 .text .global start _start: mov r0,#0 存放sum mov r1,#1 存放相加的数值 loop: cmp r1,#100 bhi wh add r0,r0,r1 add r1,r1,#1 b loop wh: b wh .end 【内存读写指令】 通过内存读写指令可以实现向内存中写入指定数据或者读取指定内存地址的数据 c语言内存…

MySQL最新2023年面试题及答案,汇总版(3)【MySQL最新2023年面试题及答案,汇总版-第三十三刊】

文章目录 MySQL最新2023年面试题及答案&#xff0c;汇总版(3)01、隔离级别与锁的关系&#xff1f;02、SQL 约束有哪几种呢&#xff1f;03、如何优化子查询&#xff1f;04、什么是前缀索引&#xff1f;05、MySQL5.6和MySQL5.7对索引做了哪些优化&#xff1f;06、MySQL有关权限的…

Linux学习第34天:Linux LCD 驱动实验(一):星星之火可以燎原

Linux版本号4.1.15 芯片I.MX6ULL 大叔学Linux 品人间百味 思文短情长 LCD显示屏是由一个一个的像素点构成的。当你能控制一个像素点的亮暗及颜色变化的时候&#xff0c;你就能让LCD显示瓶显示五颜六色的整幅图案。甚至可以让LCD屏幕…

Spring-Security前后端分离权限认证

前后端分离 一般来说&#xff0c;我们用SpringSecurity默认的话是前后端整在一起的&#xff0c;比如thymeleaf或者Freemarker&#xff0c;SpringSecurity还自带login登录页,还让你配置登出页,错误页。 但是现在前后端分离才是正道&#xff0c;前后端分离的话&#xff0c;那就…

Django快速入门(一)

Django三板斧 1. 基本使用 三板斧: HttpResponse,render,redirect from django.shortcuts import HttpResponse,render,redirect# 一. 返回字符串类型的数据 return HttpResponse(字符串) # 二. 返回HTML文件 # 1. 动态HTML页面: return render(request,login.html) def ab…

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

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

图文加多个测试带你彻底搞懂Netty ChannelPipeline的执行顺序(附源码)

这里是weihubeats,觉得文章不错可以关注公众号小奏技术&#xff0c;文章首发。拒绝营销号&#xff0c;拒绝标题党 netty version 4.1.65.Final ChannelPipeline 是什么 Pipeline&#xff0c;管道、流水线&#xff0c;类似于责任链模式。基本上我们使用Netty开发程序需要编写…

Apache RocketMQ - 概述

2022年&#xff0c;RocketMQ 5.0的正式版发布&#xff0c;相比于4.0版本而言&#xff0c;架构走向云原生化&#xff0c;并且覆盖了更多的业务场景。 如何从互联网时代演进到云时代&#xff1f; 1. 消息队列演进史 操作系统、数据库、中间件是基础软件的三驾马车&#xff0c;…

Sketch是什么软件,如何收费和获得免费版

Sketch软件为设计师构建了一个优秀的本地Mac应用程序。Sketch是整个设计过程的平台&#xff0c;通过基于Web的工具共享工作&#xff0c;获取反馈&#xff0c;测试原型&#xff0c;并将其移交给任何浏览器。Sketch软件的定价根据不同的许可类型和订阅计划而变化。本文从Sketch软…