项目如何用jetty运行_如何用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)读取云开发环境ID3)读取publicPath,并将应用资源托管到 /下。因为my-vue-app是用vue-cli创建的项目,所以publicPath默认为"/"4)打包5)安装 node_modules6)部署部署成功后,访问地址: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
☁ 更多精彩点击下方图片即可了解△ Vue在云开发中的使用丨视频演练△ 打通前后端,这款效能提升开源“神器”你一定要了解!
由于公众号推送规则更改,请多多分享、点赞和“在看”,以及时获取云开发Cloudbase的最新动态。
点击在看让更多人发现精彩
项目如何用jetty运行_如何用Cloudbase Framework部署一个Vue项目?相关推荐
- vue请求在退出页面还执行吗_如何用 Cloudbase Framework 部署一个 Vue 项目
无需修改业务代码,就能将 Vue 应用前后端一键托管部署在云开发平台~ Cloudbase Framework 是云开发官方出品的前后端一体化部署工具.目前已经 开源 . 关于 Cloudbase F ...
- 项目如何用jetty运行_阿里大牛教你如何用Dubbox+SpringBoot+Docker架构,实现双11项目...
前言 本篇围绕秒杀抢购应用场景,对当下流行的Dubbox+ Spring Boot+Docker微服务架构解决方案进行讲解.主要内容包括微服务架构介绍.Dubbox 原理及运用.使用Spring Bo ...
- 多个vue项目合并成一个_零基础搭建一个Vue项目,你学会了吗?
这几天利用业余时间做了一个个人项目,后端部分已经搭建好了还差一个前端,经过考虑前端利用Vue来搭建开发,因对Vue不是很熟悉,所以利用网络查找了相关的资料,成功的跑出了第一个Vue页面,写在此作为一个 ...
- 菜鸟运行第一个vue项目记录
近期打算着手重构现有的测试平台,由于现在用的平台是layui+flask+uwsgi+nginx框架大家都已经比较熟悉了.所以在新平台选型时本着让大家多接触新东西.新挑战的原则.平台重构选用的框架为v ...
- MacOS 搭建一个vue项目(完整步骤)
搭建一个Vue项目 一.安装node环境 二.搭建vue项目环境 1.全局安装vue-cli 2.检查是否安装成功 3.创建一个基于 webpack 模板的新项目 4.安装依赖 5.启动项目 三.vu ...
- vue入门级教程从零搭建一个vue项目
一.安装node环境 1.下载地址为:https://nodejs.org/en/ 2.检查是否安装成功:如果输出版本号,说明我们安装node环境成功 3.为了提高我们的效率,可以使用淘宝的镜像:ht ...
- vue项目编写html,从头搭建、编写一个VUE项目
一.创建VUE项目 1.新建一个vue项目 进入工作目录,新建一个vue项目:vue init webpack 项目名 vue init webpack vue-project-demo image. ...
- 从零开始搭建一个vue项目 -- vue-cli/cooking-cli(一)
从零开始搭建一个vue项目 -- vue-cli/cooking-cli(一) 1.vue-cli搭建一个可靠成熟的项目 1.介绍 vue-cli 我是去年六月份接触的vue1.0,当时还是个菜逼,当 ...
- docker 中部署一个springBoot项目
docker 中部署一个springBoot项目 (1)介绍 springBoot项目 1.项目结构 2.pom.xml [java] view plaincopy <?xml version= ...
最新文章
- nodejs html转excel,Node.js excel sheetjs/js-xlsx
- python连接oracle用法_【Python Oracle】使用cx_Oracle 连接oracle的简单介绍
- python中options设置_如何使用ChromeOptions在Python selenium中禁用CSS
- java字符串10_十个最常见的Java字符串问题
- spring日志报错提醒_使用爬虫框架htmlunit整合springboot出现的一个不兼容问题
- PaaS服务之路漫谈(二):Monolithic架构分析
- 127-条件布尔运算符和取反运算符
- html5 浏览器退回事件,html5的pushstate以及监听浏览器返回事件的实现
- 给windows 98 客户虚拟机安装VMWare tools
- 使用python构建向量空间_使用Docker构建Python数据科学容器
- nginx,作为前端的你会多少?
- 面试:Synchronized知识点
- 7分钟学会匿名管道pipe()的使用(内附完整代码测试)
- Android 静默安装
- 修改联通服务器,联通光猫dns设置服务器地址
- 数独游戏技巧从入门到精通_免费教学视频数独阶梯训练让孩子从入门到精通,数学思维直线上升!...
- 运行jar包时报错:[mybatis-config.xml] cannot be opened because it does not exist
- 主板上集成显卡的计算机在进行显示工作,电脑显卡怎么看
- 如何解决Kodi的YouTube“配额超过”问题
- 2016-1-21高博活动
热门文章
- Qt图形界面编程入门(标签与槽机制习题分享)
- android aar jar制作,AndroidStudio aar、jar生成及其引用
- ccf认证俄罗斯方块java_CCF认证历年试题 - osc_h3robkrt的个人空间 - OSCHINA - 中文开源技术交流社区...
- 鱼骨图分析法实际案例_会用“鱼骨图”的项目经理无难题
- [logstash-input-log4j]插件使用
- JDK源码解析之 Java.lang.Package
- Angular深入理解基本组成
- 据说有99%的人都会做错的面试题
- linux用户及权限详解(20170425)
- 使用网络进行项目托管