专栏首页云开发如何用Cloudbase Framework部署一个Vue项目?

如何用Cloudbase Framework部署一个Vue项目?

Cloudbase Framework 是云开发官方出品的前后端一体化部署工具,无需修改业务代码,就能将 Vue 应用前后端一键托管部署在云开发平台。借助于 Cloudbase Framework,你可以一键部署一个已有的 Vue 项目,也可以快速创建一个新的 Vue 项目,用于后续开发。

第一步:确保本地安装了 Node.js

node 版本需要在10以上,如果没有安装,请前往 官网 安装,建议选择 LTS 版本。

第二步:拥有腾讯云账号,开通环境并获得了环境ID

第三步:安装 Cloudbase CLI

npm i -g @cloudbase/cli

检查是否安装成功。如果有版本输出,就代表安装成功了。

cloudbase -v

cloudbase 命令可以简写成 tcb(Tencent CloudBase 的简称)。

关于tcb -h,来看看 cloudbase 有哪些能力。

总结下来,大概是这几方面:

  • 腾讯云账号登录、退出
  • 云开发环境配置
  • 应用配置初始化与部署
  • 云函数相关
  • 文件上传、下载、删除、权限设置
  • HTTP Service相关

第四步:登录 Cloudbase

输入以下命令,会在浏览器打开腾讯云的授权页面,点击“确认授权”即可。

cloudbase login

准备工作都做好以后,我们就可以着手部署相关的工作了。

总的来说,用 Cloudbase Framework 部署一个 Vue 应用,只需要两步。第一步:初始化项目配置;第二步,部署。

如果你的项目已经存在,在项目根目录,执行以下命令,生成项目配置。

cloudbase init --without-template

选择关联环境后,会在项目根目录,生成一个 cloudbasrc.json 文件。云开发环境 ID 会被写进这个文件。

{"envId":"static-176d4a"}

接下来,输入以下命令,进行部署。

cloudbase framework:deploy

这个命令会做以下几件事:

1)安装插件 @cloudbase/framework-plugin-website。在cloudbaserc.json里,你会发现执行这个命令后,新增了这个插件。

2)读取云开发环境ID

3)读取publicPath,并将应用资源托管到 /下。因为my-vue-app是用vue-cli创建的项目,所以publicPath默认为"/"

4)打包

5)安装 node_modules

6)部署

部署成功后,访问地址:https://static-176d4a.tcloudbaseapp.com/

第一步:初始化项目

执行以下命令,Cloudbase 除了会帮你生成项目配置外,还会初始化项目。

cloudbase init --template=vue

执行命令后,会让你选择关联环境、选择云开发模板(Vue 应用)、输入项目名称。这里,我们的项目名是cloudbase-example。

需要注意的是,cloudbase 默认会创建一个全栈 Vue 应用,如果你只想要一个静态 Vue 应用,需要手动去掉云函数部分的代码。

进入创建好的项目根目录,浏览文件结构你会发现和 cloudbase 相关的,除了 cloudbaserc.json 以外,还有一个 cloudfunctions 目录。这个目录就是云函数所在的目录。在 cloudfunctions 目录下有一个名为 vue-echo 的函数,这个云函数,稍后会用到。

cloudebaserc.json里,会默认安装两个插件。之前提到的@cloudbase/framework-plugin-website和 云函数部署相关的 @cloudbase/framework-plugin-function

第二步(可跳过):本地开发。

执行 npm i, 安装 node_modules

执行 npm run dev 。本地运行时,默认监听端口是 5000,publicPath 是 /vue。这些配置项均可在 package.json 里修改。

点击“调用 hello world 云函数”按钮时,会调用 callFunction 这个方法。

而这个方法,会去调用名为“vue-echo” 的云函数。这个云函数做的就是“echo”的工作,返回一个对象,key名为“event”, value是你传入的对象 {"foo":"bar"}

点击按钮,你会发现返回结果已经展现在页面里了。

关于 cloudbase 的云函数,之后的文章会进一步说明,这里就不赘述了。

第三步:部署

默认 cloudPath 是 /vue。如果要修改静态资源路径,请在 cloudbaserc.json 里修改 cloudPath。

输入以下命令,进行部署。

cloudbase framework:deploy

部署成功展示:

如果你在部署过程中,遇到了问题,或者希望我们能支持新功能,欢迎 issues 反馈!

作者:秦慕,前端开发工程师,目前就职于腾讯医典。热爱开源,业余开发过文档翻译工具Breword(https://www.breword.com/),翻译过husky、create-react-app、redux、esbuild文档。

欢迎在下方评论区留言或在微信开放社区 进入云开发专区与我们交流。

Cloudbase Framework目前已经开源,点击链接查看源码。(https://github.com/TencentCloudBase/cloudbase-framework

本文分享自微信公众号 - 腾讯云云开发(tcb2tcb),作者:秦慕

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-07-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 如何用 Cloudbase Framework 部署一个 Vue 项目

    Cloudbase Framework 是云开发官方出品的前后端一体化部署工具。目前已经 开源。

    腾讯云开发TCB
  • 如何用云开发快速搭建实时 Todo List 应用

    ? 借助云开发数据库的实时推送能力和云开发官方出品的前后端一体化部署工具CloudBase Framework,可以轻松搭建一个完整应用。 效果展示 ? 示例...

    腾讯云开发TCB
  • 打通前后端,这款效能提升开源“神器”你一定要了解!

    云开发(CloudBase)是云端一体化的云服务平台,是国内 Serverless 理念的领先实践,使用云开发,开发者无须关心服务器搭建和管理,只需编写业务代码...

    腾讯云开发TCB
  • 【开源公告】云原生一体化部署工具CloudBaseFramework开源啦

    CloudBaseFramework是一款云原生一体化部署工具,支持前后端应用一键部署,快速将应用无缝部署在Serverless架构的云开发(FaaS + C...

    腾讯开源
  • CloudBase Framework丨第一个 Deno 部署工具是如何打造的?

    云端一体化部署工具 CloudBase Framework (简称 CBF)自开源发布以来迭代迅速,不仅支持 Vue、React 等前端框架,也支持 Nuxt ...

    腾讯云开发TCB
  • CloudBase Framework工具推荐:前后端一体化部署,效能提升开源“神器”

    云开发 CloudBase是云端一体化的云服务平台,采用 serverless 架构,开发者无须关心服务器搭建和管理,只需要编写业务代码和调用原生提供的云能力,...

    腾讯云开发TCB
  • 国内首发,这款 Serverless 云原生一体化部署工具正式开源!

    12 月 19 日,腾讯在 2020 Techo Park 开发者大会上集中发布了三大开源项目。其中,云开发 CloudBase Framework 作为腾讯开...

    腾讯云开发TCB
  • 云开发 Action,赋予 GitHub 云上超能力

    来自社区的@beetcb ,前几天参与了 Tencent CloudBase Github Action V2 ( AKA 云开发 Atcion) 的代码与文档...

    腾讯云开发TCB
  • 如何把 Flutter 云端一体化做到极致?

    云开发 CloudBase 提供了强大的一站式后端服务,并且和微信团队合作推出了「小程序·云开发」,服务了超过 50 万开发者。

    腾讯云开发TCB

扫码关注云+社区

领取腾讯云代金券