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

原创

vannding

修改于 2021-10-22 17:24:57

9470

修改于 2021-10-22 17:24:57

文章被收录于专栏：vann的专栏vann的专栏

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

说点概念

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

所以我这里做的事情就是

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

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

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

为什么想写个应用呢

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

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

进入正题

准备工作

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

   npm i -g @cloudbase/cli

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

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

本地 tcb 连接腾讯云。

   tcb login

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

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

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

准备代码

   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

最后再稍微调整一下。

   npm install
   npm run dev

写 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 文件

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

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

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

开始部署

部署就比较简单了。

tcb framework deploy

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

嗯，很完美！

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

写的云函数上去了。

线上测试一下云函数

一切正常。

看下静态托管。

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

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

页面上访问云函数

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

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

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

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

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

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')

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

开始调用

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,
    };
  },

效果：

结束

参考：

云开发官网：https://www.cloudbase.net/
云开发应用中心：https://www.cloudbase.net/marketplace.html
CloudBase Framework：https://github.com/Tencent/cloudbase-framework
CloudBase Framework 文档：https://docs.cloudbase.net/framework/
一键部署按钮生成器：https://docs.cloudbase.net/framework/deploy-button.html
云开发应用模板：https://github.com/TencentCloudBase-Marketplace/app-template
云开发应用源码列表：https://github.com/TencentCloudBase-Marketplace

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

云开发 CloudBase

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

云开发 CloudBase

登录后参与评论

0 条评论

热度