入门|云开发平台1分钟开发一个网站

简介: 云开发系列课程主要介绍了从入门到精通快速上手Serverless和云开发技术。学习内容涵盖云开发协同、云函数、云数据库、多媒体托管、前后端一体化框架等Serverless Web开发必备知识。希望通过云开发系列课程的学习与实际操作,让大家深入了解Serverless和云开发技术,并加深对阿里云云开发平台和阿里云Serverless产品的理解与认识。本篇内容作为入门知识,让你在一分钟之内运行起一个使用了html/css/js的网站。而且如果您学习了前导课程,这个网页中的js代码甚至可以读取您上一节课中的API。

如果你是第一次使用阿里云云开发平台,请先阅读第一篇文章开通云开发平台

上一节课我们学习了API的开发,但是API只能为前端提供服务,我们还需要一个前端网站,来将API转换成可视化的界面。


接着上一节课的过程,我们依旧以NodeJS作为例子进入应用的开发页面,在 CloudIDE中 创建 api目录,把根目录下的 helloworld.js复制一份到api目录,打开api目录下的helloworld.js文件,把返回值改为一个JSON对象,把返回值类型改为application/json类型。其它语言也有对应设置返回头的方法,需要参考各自语言的httpSDKREADME.md

1.png

保存文件,打开「WB」插件,选择【测试】选项卡,无需【部署】,可以直接测试一下刚才写的API结果。在用户路径中写入 /api/helloworld

2.png

非常好,顺利输出了我们想要的结果,接下来我们在根目录下创建一个首页index.html,写上一些基本的html标签和文字(或者从网上copy一段html示例代码)。并使用一段jsfetch指令来调用后端服务/api/helloworld进行输出:

3.png

保存,点击【部署】,将写好的htmljs一同部署到FC函数计算上。部署之后,得到了临时的测试域名,可以在测试域名后携带/index.html的路径来查看结果(因为我们的文件命名为了index.html,所以根路径也可以看到结果):

4.png

在本示例中,我们基于NodeJS提供后端服务,但是 .js 文件扩展名会被浏览器默认成下载行为,这就对我们的应用安全会造成安全风险。比如直接访问域名+/index.js”来获取我们的js代码。我们要将所有后端服务的 .js 文件保护起来。打开「serverless.js」,在「SAFE」列表中,将要保护的后端服务文件/目录 添加进去即可:

5.png

重新部署后,在浏览器中访问 /helloworld.js /api/helloworld.js 就不会被下载了

6.png

相关文章
|
存储 JSON Prometheus
如何精简 Prometheus 的指标和存储占用
如何精简 Prometheus 的指标和存储占用
|
运维 负载均衡 监控
提升系统性能:高效运维的秘密武器——负载均衡技术
在当今数字化时代,系统的高可用性和高性能成为各类企业和组织追求的目标。本文旨在探讨负载均衡技术在运维工作中的关键作用,通过深入分析其原理、类型及实际应用案例,揭示如何利用这项技术优化资源分配,提高系统的响应速度和可靠性,确保用户体验的稳定与流畅。无论是面对突如其来的高流量冲击,还是日常的运维管理,负载均衡都展现出了不可或缺的重要性,成为现代IT架构中的基石之一。
656 4
|
11月前
|
监控 数据可视化 项目管理
如何利用工作计划管理软件提升项目管理透明度?高效工具推荐与使用指南
在快速发展的商业环境中,项目管理工具已成为团队协作和工作计划管理的必备利器。本文推荐2024年5款最受欢迎的工作计划管理软件:板栗看板、Wrike、TeamGantt、Smartsheet和Podio。这些工具各具特色,能有效提升项目经理的工作效率,管理复杂的项目流程。无论是简洁高效的板栗看板,还是强调跨部门协作的Wrike,或是高度定制化的Podio,都能满足不同团队的需求。选择合适的工具,需综合考虑团队规模、项目复杂度等因素。
如何利用工作计划管理软件提升项目管理透明度?高效工具推荐与使用指南
|
11月前
|
运维 数据挖掘 索引
服务器数据恢复—Lustre分布式文件系统服务器数据恢复案例
5台节点服务器,每台节点服务器上有一组RAID5阵列。每组RAID5阵列上有6块硬盘(其中1块硬盘设置为热备盘,其他5块硬盘为数据盘)。上层系统环境为Lustre分布式文件系统。 机房天花板漏水导致这5台节点服务器进水,每台服务器都有至少2块硬盘出现故障。每台服务器中的RAID5阵列短时间内同时掉线2块或以上数量的硬盘,导致RAID崩溃,服务器中数据无法正常读取。
|
前端开发 数据库
ruoyi-nbcio增加flowable流程待办消息的提醒,并提供右上角的红字数字提醒(一)
ruoyi-nbcio增加flowable流程待办消息的提醒,并提供右上角的红字数字提醒(一)
414 0
|
jenkins 持续交付 网络安全
Swarm
【11月更文挑战第01天】
240 13
|
消息中间件 网络协议 物联网
MQTT常见问题之MQTT突然连不上如何解决
MQTT(Message Queuing Telemetry Transport)是一个轻量级的、基于发布/订阅模式的消息协议,广泛用于物联网(IoT)中设备间的通信。以下是MQTT使用过程中可能遇到的一些常见问题及其答案的汇总:
|
数据库
DDD架构浅谈
DDD架构浅谈
420 4
|
关系型数据库 MySQL
mysql查询结果时间戳转成日期格式——date、DATE_FORMAT和FROM_UNIXTIME的使用
mysql查询结果时间戳转成日期格式——date、DATE_FORMAT和FROM_UNIXTIME的使用
322 0
|
存储 缓存 Java
【JAVA】深入了解 Java 中的 DelayQueue
【JAVA】深入了解 Java 中的 DelayQueue

热门文章

最新文章