全部产品

Hello World

更新时间:2020-12-07 14:10

以下文档内容将为您呈现,当您从 Hands On Lab 任务列表进入到「Hello World」的开发任务,如何通过阿里云 Serverless 云开发平台来快速实现一个 Serverless 的 hello world 应用。

该任务成功完成后会在浏览器中看到如下结果:

结果

前置准备

  • 重要:如果你是第一次使用阿里云云开发平台,请参考此文档完成云开发平台的开通:https://help.aliyun.com/document_detail/162106.html
  • 以下文档内容以 NodeJS 语言为例,Java/Python/PHP 语言类似,阅读 README.md 获得帮助很重要

快速创建 HelloWorld 应用

  • 在应用创建向导第一页中,选择编程语言:NodeJs,选择计算服务:FC,再选择解决方案,你会看到”新建->空应用”,这个就是简单的Hello World应用模板,如下创建应用的界面创建空应用

  • 然后点击「下一步」

    创建Helloworld应用

  • 之后直接点「完成」,会创建出 HelloWorld 应用应用列表

开发

  • 在应用列表 HelloWorld 应用卡片上点击「开发部署」,进入 CloudIDE打开CloudIDE

  • 点击 CloudIDE 左侧文件列表「左箭头」按钮,可以将CloudIDE最大化;点击 CloudIDE 文件列表里的 「README.md」文件,详细阅读以下内容

    readme

  • 复制 README.md 文件中「API格式」展示的代码片段,然后在 CloudIDE 文件列表创建 helloworld.js 文件创建文件

  • 将复制的代码片段粘贴进去,按照注释内容提示,在//do sth 下面编写我们自己的helloworld 相关的代码;将返回值状态更改为 200,将返回值body 更改为我们编写的 helloworld 变量,保存文件即可编写文件

测试

  • 点击 CloudIDE 侧边栏 「WB」插件,打开「测试」标签页,在「用户路径」中输入我们刚刚创建的helloworld.js的访问地址(/helloworld, 注意,不要输入 .js 后缀,否则会被当作静态 JS 文件下载,部署上线前,请务必配置到 serverless.js 文件的 SAFE 列表进行保护),勾选「预览模式」,点击「测试」,即可在右侧看到测试结果测试

部署

注意!!!如果您是第一次使用云开发平台,您在点击「部署」的时候会遇到「开通依赖的云产品」的提示,或者「服务授权」的提示,按照提示完成要求的操作,才能执行应用的「部署」

  • 打开「WB」插件的「部署」标签页,点击「部署」,会弹出部署信息确认,点击「继续部署」开始构建部署,请耐心等待,直到部署完成。部署完成后会看到如下信息,云开发平台会免费分配一个临时二级域名对部署的应用进行访问

    部署成功

访问

  • 点击部署成功信息中给出的域名,即可在浏览器打开我们已经部署到 Serverless 环境的 HelloWorld 应用了,当然,记得在域名后面加上正确的用户路径 /helloworld, http://临时域名.workbenchapi.com/helloworld

    访问应用

停止服务

  • 应用部署成功后,云服务即根据实际的流量消耗对应的资源为您处理用户请求,整个过程开始按量计费。在活动结束后,为避免不必要的费用消耗,可以主动将部署的应用停止服务,当然,如果是真实的线上业务,就确保它们在线上正常运行就好。停止服务

Python版本

  • 创建应用的时候选择 Python 开发语言
  • 打开创建出来的应用中的 README.md,复制 README.md 文件中「API格式」下方展示的代码片段python

  • 然后在 CloudIDE 文件列表创建 helloworld.py,把复制的代码粘贴到右侧代码编辑区域,然后按照红框提示修改代码保存python

  • 文件保存成功后就可以部署了

PHP版本

  • 复制 README.md 文件中「API格式」下方展示的代码片段,创建 helloworld.php,把复制的代码粘贴到右侧代码编辑区域,然后按照红框提示修改代码保存php

    • 文件保存好之后即可点击「WB」插件进行部署

Java版本

  • 复制 README.md 文件中「API格式」下方展示的代码片段,创建 helloworld.java,把复制的代码粘贴到右侧代码编辑区域,然后按照红框提示修改代码保存即可java

更多有趣的尝试

创建一个首页读取API服务输出HelloWorld

  • 上面的操作可以快速完成一个 helloworld 的输出,但是我们的应用好像还缺少一个首页,我们可以通过创建一个首页,然后在首页通过 Fetch 的方式读取一个后端HelloWorld的API来实现一个更接近真实应用,也更有趣的HelloWorld

  • 在 CloudIDE 创建 api 目录,把根目录下的 helloworld.js 复制一份到 api 目录,打开 api 目录下的 helloworld.js 文件,把返回值改为一个 JSON 对象,把返回值类型改为 application/json 类型

    api

  • 打开「WB」插件,测试一下结果,用户路径写入 /api/helloworldapi test

  • 非常好,顺利输出了我们想要的结果,接下来我们在根目录下创建一个首页 index.html,使用 Fetch 来调用后端服务 /api/helloworld 进行输出

    创建首页

  • 打开「WB」插件,测试一下结果,用户路径只需要写入根目录 / 即可

    测试首页

  • 看到了我们想要的结果,不过这时如果部署到线上,你会看到乱码,因为我们的首页 index.html 并没有设置编码格式

    乱码

  • 重新编辑首页 index.html,把编码格式设置为 UTF-8

    设置编码

  • 重新部署上线,即可看到正确的返回结果

    部署首页

  • 这个时候我们只要输入域名就能看到结果了

    查看首页

提交代码到代码仓库

  • 代码测试都没问题,记得将代码提交到代码仓库,你可以在 CloudIDE 的终端通过 git 命令完成所有的操作

    git操作

  • 你也可以通过 CloudIDE git 插件可视化完成代码提交的动作git插件操作

保护后端服务

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

    safe

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

    safe

    safe