云开发 尝试使用 CLI 来开发项目
在前面篇章我们使用控制台编写代码、管理我们的内容。从这一节开始使用「命令行工具 CLI」 来进行开发。
首先我们需要安装 CLI 工具。
安装云开发 CLI 之前需要安装 Node.js。如果本机没有安装 Node.js,请从 Node.js 官网下载二进制文件直接安装,建议选择 LTS 版本,版本必须为 8.6.0+。
安装
可以使用 npm 来安装,在命令行输入如下命令:
npm i -g @cloudbase/cli
如果遇到提示权限不足的情况,请加 sudo 命令,如下:
sudo npm i -g @cloudbase/cli
如果提示输入密码,请输入本机的当前用户的开机密码。
测试是否安装成功,可以使用 -v 命令,如下:
cloudbase -v
如果正确返回版本号,代表安装成功。
这时候你发现 cloudbase 这么从长,足足 9 个字母,难拼写难记忆;其实可以使用 tcb 代替 cloudbase,比如:
tcb -v
CLI、控制台什么关系
可以这么理解,控制台是一个平台,可以在上面使用 Web IDE(cloud studio) 编写代码,也可以管理各种配置,例如安全域名、独立域名设置、文件管理等等。但是有一些操作其实可以放到命令行的,比如静态网站部署是不是可以一行命令,就可以将文件上传上去。因此:
- CLI 提供一些简单的命令用于开发工具调度,例如在 Vuepress package.json 中集成 hosting(静态网站托管)的命令;
- 控制台包含了更多配置信息、资源信息,一般属于低频操作;更多的是操作层面;
- 无论是控制台,还是 CLI , 第一件是登录,否则无法管理自己的资源,这个很好理解的。
部署静态网站
在 静态网站部署怎么玩 中提到可以通过控制台部署静态文件。其实,CLI 也支持部署命令。举个例子????,Vuepress 生成 dist 的目录下面的文件都可以部署到静态网站托管上面。我们可以在 Vuepress 项目的 package.json 中加一个命令:
{
"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs",
"deploy": "tcb hosting:deploy docs/.vuepress/dist/ -e 你的环境 ID"
},
"dependencies": {
"vuepress": "*"
}
}
首先执行 login 命令,获取鉴权,这样才能对环境和资源进行操作:
tcb login
然后可以执行
tcb hosting:deploy docs/.vuepress/dist/ -e 你的环境 ID
如果按照上面对 package.json 进行了配置,也可以执行:
npm run deploy
之后就可以看到整个上传的过程以及状态,比如当前站点的部署效果如下:
LEEHUAWANG-MB0:vuepress wanglihua$ npm run deploy
> @ deploy /Users/wanglihua/code/cloud-developer/vuepress
> tcb hosting:deploy docs/.vuepress/dist/ -e 你的环境 ID
文件传输中 [=========================================] 100% 0.0s
✔
部署完成 ???? https://open-cloud-5d89b0-1300954686.tcloudbaseapp.com
✔ 文件共计 43 个
✔ 文件上传成功 43 个
┌──────┬──────────────────────────────────┐
│ 状态 │ 文件 │
├──────┼──────────────────────────────────┤
│ ✔ │ 404.html │
├──────┼──────────────────────────────────┤
│ ✔ │ index.html │
├──────┼──────────────────────────────────┤
│ ✔ │ posts/01.html │
├──────┼──────────────────────────────────┤
│ ✔ │ posts/03.html │
├──────┼──────────────────────────────────┤
│ ✔ │ posts/04.html │
├──────┼──────────────────────────────────┤
│ ✔ │ posts/02.html │
├──────┼──────────────────────────────────┤
│ ✔ │ assets/img/search.83621669.svg │
├──────┼──────────────────────────────────┤
│ ✔ │ assets/css/0.styles.5eaf5755.css │
├──────┼──────────────────────────────────┤
│ ✔ │ assets/js/10.97930671.js │
├──────┼──────────────────────────────────┤
│ ✔ │ assets/js/12.ae757b08.js │
├──────┼──────────────────────────────────┤
│ ✔ │ assets/js/app.840f7c0a.js │
└──────┴──────────────────────────────────┘
✖ 文件上传失败 0 个
这里使用到的就是 tcb hosting:deploy
命令,第一个参数你的目录地址,-e 后面跟上你的环境 ID。
当然不仅可以用于 Vuepress,其实任何需要托管的页面或者内容都可以通过 tcb hosting:deploy
命令进行操作。
tcb hosting
命令是一个集合,不止一个 deploy,还有删除和查看文件列表等子命令,具体见 CLI-静态托管
创建和部署云函数
一个命令搞定整个静态网站的部署,当然云函数也不在话下。
<span style="color:#1336EE;">第 0 步:tcb login</span>
同样是登录,只有登录了才能获取环境的操作权限,这个道理都懂的。
tcb login
<span style="color:#1336EE;">第 1 步:tcb init</span>
选择环境和初始化函数模板
tcb init
如下图,按上下键选择环境:
然后选择语言和模板,这里选择 Node.js 和云函数的简单模板:
执行完成的结果如下:
LEEHUAWANG-MB0:code wanglihua$ tcb init
✔ 选择关联环境 · serverless80 - [你的环境 ID]
✔ 请输入项目名称 · cloudbase-demo
✔ 选择开发语言 · Node
✔ 选择云开发模板 · Hello World
✔ 已存在同名文件夹:cloudbase-demo,是否覆盖? (y/N) · true
✔ 创建项目 cloudbase-demo 成功!
???? 执行命令 cd cloudbase-demo 进入项目文件夹!
???? 执行命令 cloudbase functions:deploy app 部署云函数
创建的项目目录如下图:
整个目录中最核心的文件是 cloudbaserc.js
,该文件中是整个项目的配置。比如:
- envId: 通过 envId 指明了是哪个环境,一个开发者有多个环境,代码要准确上传到指定环境;
- functionRoot: 云函数存放的目录,这样可以一个命令部署所有的函数;
- functions: 一个函数的数组,指明每个函数的配置,因为每个函数的配置可能不一样;该配置在上传时会覆盖控制台的函数设置。
例如在 functions 目录下有 app 目录,即函数的名称为 app,其配置信息为:
- 超时时间 5 秒,最长可以设置 60 秒;
- 在 Node.js v10.15 环境中执行该函数;
- 内存占用 128 MB,目前最小占用内存为 128 MB;
<span style="color:#1336EE;">第 2 步:tcb functions:deploy</span>
我们按照刚才创建项目完成的命令行提示进行执行:
cd cloudbase-demo
tcb functions:deploy app
命令行执行结果如下,并且可以根据提示查看函数列表或者创建 HTTP 触发:
<span style="color:#1336EE;">第 3 步:tcb functions:list</span>
查看函数是否部署完成及其状态,如下图:
更多可参见 CLI-云函数命令。