尝试使用 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 , 第一件是登录，否则无法管理自己的资源，这个很好理解的。
部署静态网站
在 第 08 篇：静态网站部署怎么玩 中提到可以通过控制台部署静态文件。其实，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-静态托管
创建和部署云函数
一个命令搞定整个静态网站的部署，当然云函数也不在话下。
第 0 步：tcb login
同样是登录，只有登录了才能获取环境的操作权限，这个道理都懂的。
tcb login
第 1 步：tcb init
选择环境和初始化函数模板
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；
第 2 步：tcb functions:deploy
我们按照刚才创建项目完成的命令行提示进行执行：
cd cloudbase-demo
tcb functions:deploy app
命令行执行结果如下，并且可以根据提示查看函数列表或者创建 HTTP 触发：
第 3 步：tcb functions:list
查看函数是否部署完成及其状态，如下图：
更多可参见 CLI-云函数命令。
附录
本文出自 王利华