2024-08-08
工具
00

目录

Vercel是什么?
创建 Github 项目
Vercel 部署
Vercel访问加速
最后

在知乎上浏览时,我偶然发现了一个引人入胜的话题。这个话题附带了一张Excel表格的截图,表格设计得非常巧妙。它允许用户输入包括日薪、工作时间、通勤时间、休息时间以及学历等在内的多个变量。通过这些输入,表格能够计算出一个反映工作性价比的数值。 在这里插入图片描述 这个概念如果转化为一个小程序,岂不是更加便捷?为了增加独特性,我计划在小程序中加入一个排行榜功能。我的小程序设计简洁直观,页面布局如下: 在这里插入图片描述 考虑到需要服务器来存储数据的功能,我选择了一种成本效益高的解决方案。购买一台物理服务器至少需要100元,这对我来说是一个相当大的初期投资。鉴于目前还不需要如此高额的支出,我决定利用Vercel提供的免费服务,以零成本享受服务器的便利。

Vercel是什么?

Vercel 是一个云服务平台,专门用于前端应用程序的部署,它支持静态网站和动态网站的应用部署、预览和上线。此外Vercel, 还支持无服务器(Serverless)架构,允许开发者轻松构建和部署无服务器函数和 API。

简单点说,Vercel是在线服务平台,允许你上传和展示你的网站或应用。 在这里插入图片描述 访问链接:https://vercel.com/。国内访问缓慢,有条件的小伙伴可以科学上网。

创建 Github 项目

在项目根目录,创建vercel.json文件,内容如下:

json
{ "rewrites": [ { "source": "/(.*)", "destination": "/api" } ] }

项目结构如下图: 在这里插入图片描述 Github项目链接:https://github.com/CatsAndMice/vercel-test

Vercel 部署

选择连接Github登录。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

选择添加项目

在这里插入图片描述 Vercel会同步Github项目。

在这里插入图片描述

填写配置,按示例的项目只要选择部署技术栈即可。

在这里插入图片描述

点击部署,耐心等待。当出现下图页面,表示已部署成功。

在这里插入图片描述

访问https://vercel-test-chi-eight-92.vercel.app/可以看到我们的页面。

在这里插入图片描述 在这里插入图片描述 链接后面添加我们的接口路径也能访问。 在这里插入图片描述

这样,我们的项目就部署完了,是不是特别简单!!! 在这里插入图片描述

Vercel访问加速

https://vercel-test-chi-eight-92.vercel.app/链接在国内访问慢,要科学上网才能访问到。为了让它能在国内访问,我们需要给它换个国内域名。

首先购买一个域名,然后给该域名添加一个记录,记录类型设置为CNAME,记录值设置为cname.vercel-dns.com在这里插入图片描述 最后在Vercel平台替换域名。 在这里插入图片描述 在这里插入图片描述

替换后即可在国内域名访问。

最后

欢迎网友们来踩。

在这里插入图片描述

关注公粽号【程序员凌览】回复"1",获取编程电子书

本文作者:凌览

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!