撸一个基于腾讯云云开发cloudbase framework的包含前端后端一体的应用

vannding • 2023-01-02 • 云技术社区 • 271 阅读

如题：

撸一个

基于腾讯云云开发cloudebase

framework的

包含前端后端一体的

应用

说点概念

腾讯云云开发CloudBase：看官网
CloudBase Framework：云开发官方出品的云原生一体化部署工具，可以帮助开发者将静态网站、后端服务和小程序等应用，一键部署到云开发 Serverless 架构的云平台上，自动伸缩且无需关心运维，聚焦应用本身，无需关心底层配置和资源。

所以我这里做的事情就是

写一个应用，这个应用包含的端有web前端、云函数服务端、云数据库 等。

将这些不同形态的代码写在一起，通过framework的能力实现一键部署这些代码。

官方现有的应用中心：跳转

为什么想写个应用呢

image-20211020114621366

玩儿~~~学习一下framework
验证一下，如果只存在简单的后端逻辑，那么前端是不是可以在不需要后端程序员的情况下独立完成一个完整的应用。

所以我给这个项目取了一个奇怪的名字no-back-end，简称NBE。

进入正题

准备工作

代码仓库，用 coding ，怎么用就不做多的说明了。
开发环境准备-安装 CloudBase CLI。

   npm i -g @cloudbase/cli

准备腾讯云云开发环境。快速跳转

image-20211022112342408

选择空白模板就好，创建好，记录下环境ID就OK了。

本地 tcb 连接腾讯云。

   tcb login

Tcb 工具会自动打开浏览器进行授权。

image-20211022112645287

按照指引一直下一步就OK了。

image-20211022112746575

之后控制台就显示成功登录。

准备代码

   mkdir no-back-end
   cd no-back-end

准备两个文件夹，一个放云函数，一个放前端SPA项目

   mkdir cloudfunctions
   mkdir webview

创建一个[云函数

   cd cloudfunctions
   mkdir service

参考文档，在 service 目录下随便写个云函数试试。

index.js

   'use strict';
   
   exports.main = async (event, context, callback) => {
     
       return {msg: '成功调用,来自云函数的msg'}
   
   };

package.json

   {
       "name": "service",
       "version": "1.0.0",
       "description": "",
       "main": "index.js",
       "scripts": {
         "test": "echo \\"Error: no test specified\\" && exit 1"
       },
       "author": "",
       "license": "ISC",
       "dependencies": {
   
       }
     }

创建前端项目

   cd webview

这里前端使用的技术栈是 Vue 3 + Typescript + Vite。我们使用脚手架生成。

   yarn create @vitejs/app viteApp --template vue-ts

image-20211022151138398

最后再稍微调整一下。

   npm install
   npm run dev

image-20211022152309398

写 framework 的配置

详细配置说明还是需要看文档的 配置说明

根目录下新增文件 cloudbaserc.json

   {
     "envId": "{{env.ENV_ID}}",
     "version": "2.0",
     "$schema": "https://framework-1258016615.tcloudbaseapp.com/schema/latest.json",
     "functionRoot": "./cloudfunctions",
     "functions": [
       {
         "name": "service",
         "timeout": 5,
         "envVariables": {},
         "runtime": "Nodejs10.15",
         "memorySize": 128,
         "handler": "index.main"
       }
     ],
     "framework": {
       "name": "no-back-end",
       "plugins": {
         "client": {
           "use": "@cloudbase/framework-plugin-website",
           "inputs": {
             "installCommand": "cd webview && npm install --prefer-offline --no-audit --progress=false",
             "buildCommand": "cd webview && npm run build",
             "outputPath": "webview/dist",
             "cloudPath": "/",
             "ignore": [".git", ".github", "node_modules", "cloudbaserc.js"],
             "envVariables": {
               "VUE_APP_ENV_ID": "{{env.ENV_ID}}"
             }
           }
         }
       }
     }
   
   }

根目录下 .env 文件

image-20211022153542473

在这里加入环境变量，可以在配置文件中读出。参考

因为前端部署要使用的静态网页功能，所以这里加了一个framework的插件 @cloudbase/framework-plugin-website。

注意：在installCommand 与 buildCommand配置中，我们的前端项目由于不在根目录，所以要加上cd webview

开始部署

部署就比较简单了。

tcb framework deploy

image-20211022163058648

片刻功夫，就已经部署好啦。打开网站入口。

image-20211022163300468

嗯，很完美！

fce5332ad76f4476be357ebc753e8443

那我们上腾讯云看看部署了哪些东西呢？

写的云函数上去了。

image-20211022163731720

线上测试一下云函数

image-20211022163816351

一切正常。

看下静态托管。

image-20211022163902622

构建产物整整齐齐的进了根目录。

同时，在我的应用中，也会

image-20211022164020053

页面上访问云函数

上述步骤都完成了后，只是将前端和后端都部署了。并没有将前后端联通起来。所以接下来要处理一下，前端代码中访问云函数的能力。

文档里面翻了翻，云开发sdk中有个vue插件 @cloudbase/vue-provider

可是我这里用vue3，就没法使用这玩意儿了。那我们就老实点用 js-sdk吧。文档

要连接云开发环境，就需要知道环境ID 和地域。这我们在哪里可以找到呢？

image-20211022165352398

翻阅文档，发现部署后，会产生一个文件，里面对环境变量有声明。那我们直接用就行了。

index.html

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>NBE - APP</title>
    <script src="/_init_tcb-env.js"></script>
  </head>
  <body>
    <div id="app"></div> 
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

main.ts

import { createApp } from 'vue'
import App from './App.vue'

import cloudbase from "@cloudbase/js-sdk";


(<any>window)._tcbEnv = (<any>window)._tcbEnv || {
    TCB_ENV_ID: "马赛克",
    TCB_REGION: "马赛克"
}
const CloudApp = cloudbase.init({
  env: (<any>window)._tcbEnv.TCB_ENV_ID,
  region: (<any>window)._tcbEnv.TCB_REGION
});

// 匿名登录
CloudApp.auth({
  persistence: "none" 
}).anonymousAuthProvider()
.signIn()


const app = createApp(App)

app.config.globalProperties.CloudApp = CloudApp

app.mount('#app')

这里先暂时使用匿名登录吧！注意需要在环境配置的登录授权中将匿名登录打开。

image-20211022165029486

开始调用

setup() {
    const { proxy }: any = getCurrentInstance();
    console.log(proxy.CloudApp);
    const state = reactive({
      msg: "",
    });

    const getRemoteData = async () => {
      try {
        const res = await proxy.CloudApp.callFunction({
          name: "service",
        });
        state.msg = res.result.msg
      } catch (e) {
      }
    };

  

    return {
      count: ref(0),
      ...toRefs(state),
      getRemoteData,
    };
  },

效果：

image-20211022165653698