小程序云应用入门实操系列课程第三讲 - 云应用的使用一:Node.js 初始化

简介: 云应用是面向小程序应用场景,为开发者提供的⼀键构建后端应用运行环境、后端服务部署、运维监控等能力的⼀站式小程序部署服务。本次课程主要介绍云应用的使用,初始化 Node.js 小程序并部署小程序云应用,在此基础上简单讲解为下节内容需要准备的部分工作。

摘要

云应用是面向小程序应用场景,为开发者提供的⼀键构建后端应用运行环境、后端服务部署、运维监控等能力的⼀站式小程序部署服务。本次课程主要介绍云应用的使用,初始化 Node.js 小程序并部署小程序云应用,在此基础上简单讲解为下节内容需要准备的部分工作。

演讲嘉宾简介

白宦成 - Linux 中国开发组组长,阿里云 MVP;CSDN 专家,在 GitChat 平台上开设了《一学就会的 WordPress 实战课》达人课;自由职业者,曾就职于网易杭州研究院。

个人小程序作品:

运维密码小程序:2017年2月上线
配色助手小程序:2018年4月上线
Linux 小程序:2019年2月上线。

个人授课:

极客学院《微信小程序入门实战(仿 V2EX)》
极客学院《微信小程序进阶实战之分答应用开发》
网易云课堂《微信小程序初级工程师微专业》

系列课程大纲

  • 云应用的价值
  • 云应用的控制介绍
  • 云应用的使用一:Node.js初始化
  • 云应用的使用二:用户登录

本次直播视频精彩回顾,戳这里!
https://yq.aliyun.com/live/1039

以下内容根据演讲嘉宾视频分享整理而成。

本次的分享主要围绕以下三个方面:

一.Node.js 初始化
二.初始化 egg.js 的应用
三.为下节课做准备

Node.js 初始化

Node.js 应用:打开 Node.js 应用,云应用默认会提供一组环境包。在版本历史中有一个应用 CloudApp-NODEJS-Demo-V1,下载代码,查看代码。Node.js 应用项目的根目录中最重要的是 package.json 文件,大家可以发现项目其实非常简单,仅仅依赖于 egg.js1.10.1 版本以及 egg-scripts2.5.0 版本。其余的依赖有开发依赖,因为开发依赖在生产环境不会安装,不需要管理开发依赖,而 Scripts 里设置了具体的部署执行要求。其中,小程序代码中 package.json 启动 start 命令是 egg-scripts start—demon –title=egg-server- helloworld,以及对应的 stop 命令。所以是满足下面的云应用部署 Node.js 框架要求的。

1

部署应用的要求:如果想部署一个应用,云应用是有一些要求的。用户可以回到云应用列表页找到文档中心,查看 Node.js 相关部署要求。在后端框架说明中列举了云应用不同环境下的部署要求。对于正在使用的 Node.js,首先需要打包 ZIP 文件,打包源文件到 ZIP 文件的根目录。服务监听端口为7001,以及在 package.json 文件中实现了 start、stop 命令。上传了应用包文件以后云应用会自动帮用户启动应用。

2

APP 源码:Public 是静态文件。小程序更多需要服务端提供的 API 而不是静态文件,所以 Public 下是空的文件,这里主要看 router.js、foo.js 和 home.js 三个文件。如下图,在 router.js 中 exports 出了一个 app,定义了两个路由,分别是‘/’和‘/foo’两个命令,分别指向 app目录下的 controller 文件夹中 home 文件的 render 命令和 foo 文件的 render 命令。

3

如何执行命令:如果本地安装了 Node.js 环境,可以执行 npm install 安装相关的依赖。安装完成依赖以后启动 egg.js 服务端,查看服务端的运行,修改代码。安装完成以后只需执行 npm start 便可启动环境。

开发:执行 npm run dev 进入开发环境,修改代码, 将 home.js 中的返回信息改成“Hello Aliyun”。foo.js 文件也可以修改类似的内容,来达到对应的效果。因为目前启动的是开发环境,所以它和用户的修改会自动同步生效,这是使用开发模式的一个好处。

初始化 egg.js 的应用

初始化 egg.js 的应用:初始化一个 egg.js 的应用,其中的代码需要自己手写。打开 egg.js.org,进入 egg.js 官网指南页面。编写 egg.js 应用,初始化一个应用。创建目录 mkdir aliyun-zhibo;进入到目录下 cd aliyun-zhibo;通过执行命令npm init egg --type=simple,表示创建一个简单的模板,初始化一个 egg.js 应用;输入名称 aliyun-zhiboapp,描述 zhiboapp,author 可以根据自己情况填写,cookie security keys 是随机生成的 key,保证生成的 cookie 不会被轻易破解。完成初始化以后提示已进入目录。

安装依赖:执行 npm install,安装相关的依赖。

启动开发环境:执行 npm run dev,启动一个开发环境,可以发现生成的项目文件与默认项目下的文件是一样的。将 home.js 中的“hi,egg”修改成“Hello Aliyun”。生效以后便可以试着将目前的应用部署到小程序云应用上。

部署应用:进入 aliyun-zhibo 目录,选择文件,删除其中不需要的内容(如 node-modules),压缩成 ZIP 代码包,叫 code.zip。进入云应用控制台,点击上传发布包,输入版本号等信息,如v0101,上传文件,找到 code.zip 文件,点击确认上传。上传成功以后点击发布,在发布当中找到刚刚上传的v0101,完成版本发布任务。版本已经部署成功后显示部署版本是v0101。点击公网地址可以看到返回的信息是前面设置的“Hello Aliyun”,说明部署是成功的。

为下节课做准备

分发请求:在部署好一个简单应用后,可以多做一点事情,为下一节课任务做准备。如实现微信登录的功能,首先需要一个新的路由,叫做 login,将 router.js 中的方法改成 login。同样在 home.js 中,创建新的 login 的方法。在 router.js 当中引入的 login 路由会转发到 home.js 中的 login 方法当中,将 login 方法中的文字也改成 login,执行本地的开发的命令,从而预览代码是否能够正常有效的工作。

4
5

因为代码没有办法正常有效工作的话,上传到云端也不可能有效的工作,所以需要在在本地提前做验证。进入到默认页面127.0.0.1:7001,在后面输入/login,输出了 login,说明请求已经完成了正确的分发。使用 egg.js 将请求进行分发是最基础且最重要的开发过程,在分发的请求里面可以做一些比较细致的东西。

Service(服务):egg.js 把一些对外的东西放在了服务当中,当然也可以把数据库放在service当中去做这个服务。Copy 一些 service 代码,在 app目录下创建 service 文件夹,创建一个新的文件,叫 user.js,粘贴代码。因为没有对接数据库,目前没有那么多数据,可以手动伪造一些数据写入用户属性。

6

接下来去做一个请求,希望 login 可以返回通过 user-service 拿到的数据。启动成功以后继续访问127.0.0.1:7001/login,看到返回的数据是 user-service 中的数据。这样一个基础的 service 的定义就完成了。

7

实际上,在真正使用的时候会在 home.js 里面定义非常多不同的方法,去完成相对复杂的操作。借助 service 功能可以实现简化应用开发。原本的应用开发过程中可能要把很多精力放在 controller 里,对代码的复用性非常差。

交流讨论

扫码加入 阿里云小程序云支持群 一起交流讨论技术问题 更多直播等你观看

_jpeg

更多资讯

关注 ALI繁星计划 公众号 第一时间获取最新小程序云干货

_2019_05_09_2_03_05

目录
相关文章
|
2月前
|
监控 JavaScript 算法
如何使用内存监控工具来定位和解决Node.js应用中的性能问题?
总之,利用内存监控工具结合代码分析和业务理解,能够逐步定位和解决 Node.js 应用中的性能问题,提高应用的运行效率和稳定性。需要耐心和细致地进行排查和优化,不断提升应用的性能表现。
206 77
|
1天前
|
缓存 NoSQL JavaScript
Vue.js应用结合Redis数据库:实践与优化
将Vue.js应用与Redis结合,可以实现高效的数据管理和快速响应的用户体验。通过合理的实践步骤和优化策略,可以充分发挥两者的优势,提高应用的性能和可靠性。希望本文能为您在实际开发中提供有价值的参考。
21 11
|
17天前
|
敏捷开发 人工智能 JavaScript
Figma-Low-Code:快速将Figma设计转换为Vue.js应用,支持低代码渲染、数据绑定
Figma-Low-Code 是一个开源项目,能够直接将 Figma 设计转换为 Vue.js 应用程序,减少设计师与开发者之间的交接时间,支持低代码渲染和数据绑定。
58 3
Figma-Low-Code:快速将Figma设计转换为Vue.js应用,支持低代码渲染、数据绑定
|
1天前
|
JSON 小程序 UED
微信小程序 app.json 配置文件解析与应用
本文介绍了微信小程序中 `app.json` 配置文件的详细
28 12
|
11天前
|
JavaScript 前端开发
【Vue.js】监听器功能(EventListener)的实际应用【合集】
而此次问题的核心就在于,Vue实例化的时机过早,在其所依赖的DOM结构尚未完整构建完成时就已启动挂载流程,从而导致无法找到对应的DOM元素,最终致使计算器功能出现异常,输出框错误地显示“{{current}}”,并且按钮的交互功能也完全丧失响应。为了让代码结构更为清晰,便于后续的维护与管理工作,我打算把HTML文件中标签内的JavaScript代码迁移到外部的JS文件里,随后在HTML文件中对其进行引用。
35 8
|
2月前
|
存储 缓存 监控
如何使用内存监控工具来优化 Node.js 应用的性能
需要注意的是,不同的内存监控工具可能具有不同的功能和特点,在使用时需要根据具体工具的要求和操作指南进行正确使用和分析。
82 31
|
2月前
|
JavaScript 前端开发 API
Vue.js 3:深入探索组合式API的实践与应用
Vue.js 3:深入探索组合式API的实践与应用
|
2月前
|
JavaScript 前端开发 API
深入理解Node.js事件循环及其在后端开发中的应用
本文旨在揭示Node.js的核心特性之一——事件循环,并探讨其对后端开发实践的深远影响。通过剖析事件循环的工作原理和关键组件,我们不仅能够更好地理解Node.js的非阻塞I/O模型,还能学会如何优化我们的后端应用以提高性能和响应能力。文章将结合实例分析事件循环在处理大量并发请求时的优势,以及如何避免常见的编程陷阱,从而为读者提供从理论到实践的全面指导。
|
2月前
|
JavaScript
如何使用内存快照分析工具来分析Node.js应用的内存问题?
需要注意的是,不同的内存快照分析工具可能具有不同的功能和操作方式,在使用时需要根据具体工具的说明和特点进行灵活运用。
58 3
|
2月前
|
Web App开发 JSON JavaScript
Node.js 中的中间件机制与 Express 应用
Node.js 中的中间件机制与 Express 应用

热门文章

最新文章