在前面篇章我们使用控制台编写代码、管理我们的内容。从这一节开始使用「命令行工具 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
可以这么理解,控制台是一个平台,可以在上面使用 Web IDE(cloud studio) 编写代码,也可以管理各种配置,例如安全域名、独立域名设置、文件管理等等。但是有一些操作其实可以放到命令行的,比如静态网站部署是不是可以一行命令,就可以将文件上传上去。因此:
在 静态网站部署怎么玩 中提到可以通过控制台部署静态文件。其实,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
,该文件中是整个项目的配置。比如:
例如在 functions 目录下有 app 目录,即函数的名称为 app,其配置信息为:
<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-云函数命令。