发布网友
发布时间：2024-10-24 09:53
共1个回答
热心网友
时间：2024-11-13 22:47
之前在写面试常客：HTTP缓存时，曾经就强缓存和协商缓存写过两个demo，但缓存要在服务端做，只能贴上代码，不能在网页上感受（虽然我贴了gif）
笔者的所有demo例子都放在githubpage上，其特点是不需要服务器即可部署静态资源，但它不具备部署服务端应用能力
最近笔者在了解CI/CD方面的知识点，想起了Vercel，就想着能否将服务端应用架在vercel上呢？
Vercel是什么Vercel是一个开箱即用的网站托管平台，方便开发者快速部署自己的网站。它在全球都拥有CND节点，因此比Github官方自带的githubpages更加稳定，访问速度更快
Koala聊开源曾经对其有过介绍：Vercel与Next.js：开源全明星团队背后的商业逻辑
文字版：Vercel与Next.js：开源全明星团队背后的商业逻辑
简单的说，它能极简部署应用到服务端，且是免费不用买服务器
官网Vercel官网
Vercel工作流官网（网页效果炫酷）
常见命令行将Vercel下载到全局（npmivercel-g），不知道有什么命令就-h
笔者对其了解有限，这里罗列下笔者知道的命令
vercellogin：登录Vercel账号
verceldev：本地开启服务
verceldev--bug：本地开启服务并打印日志
vercel：部署本地资源到Vercel上
vercel--prod：更新本地网页
vercel可以用vc来代替，vc是Vercel的缩写
部署静态服务我们现在已经对vercel有所了解，前文中说到Vercel能简化开发者部署服务，那它能简化到什么程度呢？
这里我们从零部署一个简易静态服务
本地安装Vercel
npm?i?vercel?-g登录Vercel
vercel?login选择好连接的方式后，会在网站弹出
哟哟，man。what'syourname？
创建一个HTML文件，后续我们要将其上传至Vercel服务器上
<!DOCTYPE?html><html?lang="en"><head>????<meta?charset="UTF-8">????<meta?http-equiv="X-UA-Compatible"?content="IE=edge">????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">????<title>Vercel?Demo</title></head><body>????<h1>Vercel?Demo</h1></body></html>本地测试一番，输入命令行
vercel?dev因为我们这是第一次执行，根目录下没有.vercel，所以要填写一些必要信息，这时你的本地和Vercel服务器就绑定好了
部署服务
vercel在https://vercel-sample-ten.vercel.app/中能访问到我们的静态服务
在截图中我们也看到了这句话Deployedtoproduction.Runvercel--prodtooverwritelater，后续我们要更新资源，用vercel--prod即可
好了，除去必要的登录，我们就用了三个命令就把本地服务部署到Vercel服务器上
verceldev：开发时使用，查看应用是否跑得起来
vercel：部署服务
vercel--prod：更新应用（资源）
可以登录Vercel后台查看部署情况
部署Node服务回归主题，最终我们想部署的是Node服务，是后端服务，而非前端静态资源服务，这是关键
同样建立新项目
mkdir?vercel-koa2cd?vercel-koa2npm?init?-ynpm?i?koa?-Stouch?index.js编写index.js中的内容
const?Koa?=?require('koa');const?app?=?new?Koa();app.use(async?ctx?=>?{????ctx.body?=?'Hello?Vercel';});app.listen(3008,?()?=>?{????console.log('3008项目启动')});PS：3000端口默认会被Vercel使用，所以Koa服务要换个端口
使用命令verceldev
发现给我报错了，理由是package.json的scripts中没有build快捷符，修改之
..."scripts":?{????"build":?"node?index.js",},...再次使用verceldev，node服务跑起来了
于是乎我们部署它
vercel搞半天没部署上去，后台查看也是无果，呜呼悲哉
google后，发现原来还有一个vercel.json，可以用vercel.json配置和覆盖vercel默认行为
下载@vercel/node包
npm?i?@vercel/node?-S填写配置：
{??"version":?2,??"builds":?[????{??????"src":?"index.js",??????"use":?"@vercel/node"????}??]}执行vercel部署服务
访问地址：https://vercel-koa2-t511069160.vercel.app
至此，就完成了Koa服务的部署
与部署静态资源多了两个步骤
下载@vercel/node和配置vercel.json
延伸思考Vercel当然不止笔者所说的这一功能，它还可以自定义域名、serverless、全球支持的CDN等等
可以毫不夸张地说，用Vercel来代替繁琐的云服务器，配合GithubAction做CI/CD，就
个人开发者或小团队而言，这或许就是神器
后续笔者也会尝试用Vercel部署一些小应用，实践出真理
附上项目地址：https://github.com/johanazhu/vercel-demo
参考资料Vercel搭建API服务，无需服务器
Vercel与Next.js：开源全明星团队背后的商业逻辑：文字版
Vercel与Next.js：开源全明星团队背后的商业逻辑：视频版
原文：https://juejin.cn/post/7094911994226016292
特别提示：本站信息仅供参考，不能作为诊断及医疗的依据；请谨慎参阅，本站不承担由此引起的法律责任。本网站敬告网民：身体若有不适，请及时到医院就诊。
网站备案号：赣ICP备2023002352号-14Copyright © 2006-2018 All rights reserved所有权归属：华佗医网 版权所有
视频许可证编号：（湘）字第00637号 本站由北京市万商天勤律师事务所王兴未律师提供法律服务
