Skip to content

Latest commit

 

History

History
247 lines (143 loc) · 8.95 KB

DEPLOYMENT.md

File metadata and controls

247 lines (143 loc) · 8.95 KB
Raw

DEPLOYMENT 部署文档

一、项目概述

此项目是在小程序和Web端使用 Taro 构建，功能服务基于腾讯云云开发及腾讯云人工智能服务，使用 CMS 内容管理系统来管理数据，基于 Cloudbase Framework完成小程序端、Web端、云函数端构建。

整体实践完此项目，可以帮助学习掌握云开发常用API在小程序、云函数、web端的使用；了解 CMS 内容管理系统和@cloudbase/cli的使用方法.

本项目的云开发环境由小程序侧创建。所以在开始此项目前需要注册一个微信小程序，当然也可以使用已有的小程序账号。

二、环境配置

（1）准备阶段

如果没有小程序开发者工具，请下载并安装。导入此项目的代码，在导入框的 AppID 中填写已准备的小程序AppID。

导入后的开发者工具显示如下：

云环境ID

请参照 .env.example 文件，在项目根目录配置 .env 和 .env.dev 文件

# 小程序 appid，在小程序项目和小程序部署中使用
APP_ID=xxxID
# 云环境 ID
ENV_ID=xxxID
SERVER_ENV=dev # 开发环境：dev 生成环境：prod
  • APP_ID 小程序 appId
  • ENV_ID 云环境 ID
  • SERVER_ENV 是在 Taro 项目中区分开发环境还是生产环境

小程序版本 Version

在taro/src/config.js配置，便于线上查看版本

需要开通的服务

在头像编辑页需要图像安全审核、人脸五官分析两个服务，请在微信服务平台开通。

（2）云开发环境部署

打开开发者工具左上角【云开发】，进入云开发控制台。如果小程序没有创建过云开发，需要先开通并创建云开发环境。

开发环境：用于功能开发和测试。建议先创建开发环境，因为云函数本地调试默认调用创建的第一个云环境。

生产环境：用于正式上线后的功能维护和数据存储。

按量计费

当有云开发环境时，需要在设置页中点击【开通按量计费】

在操作后，即将云开发环境转换为按量计费（按量计费仍然有免费额度，和基础版预付费一致，无需担心）

在浏览器中，打开腾讯云控制台,使用微信扫描二维码，选择当前小程序账号进行授权。

静态网站托管

登录后选择刚按量付费的环境，点击进入，在左侧栏中点击静态网站托管，在页面中开启静态网站托管。

在 CMS 内容管理系统和 Web 版Hi头像中所需

大约需要3分钟左右才会开通完毕。

关闭浏览器控制台！重新关闭并打开小程序开发工具的云开发控制台，就会发现多了一个静态网站托管的TAB。

登录鉴权（匿名登录 + 自定义登录）

Web版所需。若仅部署小程序端，则不需要。

点击左侧的环境-登录鉴权，在页面中将匿名登录开启。

CMS 内容管理系统

在云开发管理中安装cms 内容管理系统，其中需要下载自定义登录私钥。（建议本地保留一份，因为很多个地方需要用）

三、服务端

云开发数据库的创建

数据集合名称尚未改名，以下方案为部署文档的预研版

方案一：在云数据库手动创建

在云开发控制台-数据库中，新建6个集合，分别为

  • hiface-configs | 全局配置，如配置默认显示的主题
  • hiface-users | 用户
  • hiface-themes | 主题列表，如国庆、圣诞
  • hiface-shape-categories | 贴纸分类，可以属于多个主题
  • hiface-shapes | 贴纸，可以属于多个贴纸分类
  • hiface-avatars | 头像，用户生成

方案二：在 CMS 管理后台创建

按照 cloud/database/model中所示的主题结构进行手动创建。

从CMS 导入数据模型的功能，在 CMS v2 中处于开发中。

方案三：数据模型快速生成，基于 Cloudbase Framework 和 Cloudbase Cli 及云函数

第一步：Hi 头像数据管理基于 Cloudbase CMS 内容管理扩展，需要在云开发 cloudbase 控制台下方扩展能力中开通。

第二步：按照以下命令执行

# 安装Cloudbase Cli，目前我用的是测试版
npm install -g @cloudbase/cli@beta

# 授权云函数所在的腾讯云账号
tcb login

# 部署生产环境的数据模型，需要在 .env 文件中配置 ENV_ID
npm run deploy:init-db
# 或者，部署开发环境的数据模型，需要在 .env.dev 文件中配置 ENV_ID
npm run deploy:init-db:dev

云开发云函数的部署

  • hiface-api主要的接口请求 API

  • analyze-faceWeb 端五官分析和图形安全审核，在小程序端基于服务市场的五官分析公服务。如果只部署微信小程序端，则无需部署。

    • secretId secretKey 腾讯云账号权限
    • 腾讯云 nodejs sdk

方案一：微信开发者工具

在小程序开发者工具中，打开cloud/functions目录，将所有的子目录，均右键，在菜单中点击“上传并部署：云端安装依赖”。

优点：简单方便，便于本地调试

方案二：使用命令快速部署

开发环境：npm run deploy:fn:dev

正式环境：npm run deploy:fn

原理解析

Web端上线部署基于Cloudbase Framework来完成，需要安装云开发@cloudbase/cli，具体可以查看cloudbaserc.json中的配置。

前端调试部署

页面文件结构

在taro/src中，有以下文件

|-config.js 配置AppId、云环境Id及其它
|-components 全局组件
|-pages
|-|- avatar-edit 头像编辑页
|-|- avatar-poster 头像分享页
|-|- theme-list 主题列表
|-|- self 我的，含个人头像列表

小程序端调试

小程序端调试已经被封装成以下命令：

在 taro/ 目录 package.json 中定义的这几个命令

开发环境调试 npm start
生产环境调试 npm run build
生产环境编译 npm run release

完整调试技巧，请查阅Taro 安装及使用

小程序端部署

方法一：微信开发工具上传

方法二：微信 CI 上传

文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/ci.html

  • 下载小程序部署私钥
  • 【可选】关闭IP白名单
  • 运行小程序部署命令 npm run deploy:mini

Web端部署

开发环境：npm run deploy:web:dev

正式环境：npm run deploy:web

原理解析

Web端上线部署基于Cloudbase Framework来完成，需要安装云开发@cloudbase/cli，具体可以查看cloudbaserc.json中的配置。

参考文档：