2021 年的前端趋势:Serverless 快速试用
在本系列的前几篇文章介绍了 vercel、netlify 和 alioss 部署前端应用,无论哪一种选择,以下三项配置都是必不可少的。
- 作者:山月行 来源:全栈成长之路|2021-01-14 09:13
在本系列的前几篇文章介绍了 vercel、netlify 和 alioss 部署前端应用,无论哪一种选择,以下三项配置都是必不可少的:
- [build]
- # 项目的根目录,及 npm 命令执行的目录
- base = ""
- # 将要服务化的静态文件,也是打包后生成的目录
- publish = ".vuepress/dist"
- # 打包命令
- command = "npm run build"
Serverless 部署
在腾讯云的 Serverless 中,需要配置文件来部署应用。部署纯前端页面的话,需要使用一个 tencent-website 的组件,并使用以上配置进行部署。
以下是使用 vuepress 搭建我的博客[1]的 Serverless 配置文件,在根目录新建配置文件 serverless.yaml,配置如下:
更详细的配置请看过来:Serverless Website 全配置[2]
- component: website # (必填) 引用 component 的名称,当前用到的是 tencent-website 组件
- name: shanyue-blog # (必填) 该 website 组件创建的实例名称
- inputs:
- src:
- src: .
- index: index.html
- dist: .vuepress/dist
- hook: npm run build
- # websitePath: ./
- region: ap-guangzhou
- bucketName: my-bucket
- protocol: https
执行命令前设置两个环境变量(我偷懒直接全部扔到了 bashrc 下),在腾讯云的账号体系中可以找到:
- export TENCENT_SECRET_ID=shanyue-id
- export TENCENT_SECRET_KEY=shanyue-key
万事俱备只欠东风,一个命令搞定:
- # 需提前下载: npm i -g serverless
- $ sls
- serverless ⚡framework
- Action: "deploy" - Stage: "dev" - App: "shanyue-blog" - Instance: "shanyue-blog"
- region: ap-guangzhou
- website: https://my-bucket-1257314149.cos-website.ap-guangzhou.myqcloud.com
- Full details: https://serverless.cloud.tencent.com/apps/shanyue-blog/shanyue-blog/dev
- 103s › shanyue-blog › Success
Serverless 域名
此时可以通过域名: https://my-bucket-1257314149.cos-website.ap-guangzhou.myqcloud.com 访问我的博客,不过域名好像过长?
在腾讯云的 Serverless 中使用自己的域名需要备案,这里就不细讲了。
总结
结合 Github Actions 能够实现与 vercel 和 netlify 差不多的自动部署,他最大的优势是在国内有着稳定的网络,且免费的托管方案。如果有一点麻烦,那就是自定义域名,如果你仅仅想用它做一个示例 Demo,那完全够用!
本文转载自微信公众号「全栈成长之路」,可以通过以下二维码关注。转载本文请联系全栈成长之路公众号。
【编辑推荐】
点赞 0
- 大家都在看
- 猜你喜欢
编辑推荐
- 24H热文
- 一周话题
- 本月获赞
- 2020年值得推荐的六大服务器管理软件和工具企业中台规划和IT架构微服务转型杂谈一文看懂Nginx如何配置跨域,值得收藏面试官:Tomcat是如何处理Http请求的?一文讲透 Serverless 到底是什么高并发场景下如何优化服务器的性能?聊聊微服务与API有什么区别?如何快速查看您的Linux服务器是否遭到来自某个IP地址的DDoS攻击?
- 高并发场景下如何优化服务器的性能?聊聊微服务与API有什么区别?一台Linux服务器最多能支撑多少个TCP连接?如何满足数据中心建设预算和时间表20 行代码:Serverless 架构下用 Python 轻松搞定图像分类和预测既然启动流程不太了解,那你知道Tomcat的生命周期是什么样子的么?系统设计基础之长轮询、WebSocket、服务器发送事件(SSEs)协议记一次Consul故障分析与优化
- 2020年值得推荐的六大服务器管理软件和工具一台Linux服务器最多能支撑多少个TCP连接?一文看懂Nginx如何配置跨域,值得收藏高并发场景下如何优化服务器的性能?如何满足数据中心建设预算和时间表Nginx配置详解之配置文件模板分析聊聊微服务与API有什么区别?面试官:来说说Tomcat的启动过程是什么样子的
订阅专栏+更多
-
数据湖与数据仓库的分析实践攻略
助力现代化数据管理:数据湖与数据仓库的分析实践攻略共3章 | 创世达人3人订阅学习
-
云原生架构实践
新技术引领移动互联网进入急速赛道共3章 | KaliArch30人订阅学习
-
数据中心和VPDN网络建设案例
漫画+案例共20章 | 捷哥CCIE209人订阅学习
视频课程+更多
专题推荐+更多
-
订阅51CTO邮刊
点击这里查看样刊

51CTO服务号

51CTO官微