-

在前面篇章我们使用控制台编写代码、管理我们的内容。从这一节开始使用「命令行工具 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-云函数命令

附录