树洞剪藏#剪藏#树洞剪藏

使用Vercel免费部署上线你的前端项目，并使用Cloudfare解决 Vercel 部署网站在国内被墙的问题 - 掘金

2024 年 12 月 9 日约 1 分钟

分享Twitter / X Telegram 微博

同步来源：树洞剪藏源站剪藏 ID：276 原文地址：https://juejin.cn/post/7383894687302434825?searchId=202412090850499617D0D11E0CB7C50F31

打开原文 · 打开源站剪藏快照

首页

BOT

沸点

课程

直播

活动 AI刷题 NEW 商城 APP 插件

创作者中心

会员

使用Vercel免费部署上线你的前端项目，并使用Cloudfare解决 Vercel 部署网站在国内被墙的问题

楚留香Ex

2024-06-25

1,975

阅读4分钟

（图片拍摄于工位窗外）

前言

之前在掘金上看到一篇文章，上面说react团队的某个开发者离职了，去了Vercel这个公司。我当时就好奇Vercel是什么公司，竟然能吸引react的开发者加入。于是我就打开了百度搜索Vercel，这一搜不得了，原来还有这么厉害的公司。于是就有了这篇文章......

已经部署完毕的网站： Vite App (nodehub.cn)

写在文前

1、什么是Vercel

Vercel是一个提供静态网站部署和全栈应用程序部署服务的云平台。它帮助开发人员将他们的网站、应用程序和服务快速部署到全球性的 CDN（内容分发网络）上，从而实现快速加载和高性能的访问体验。

Vercel最初是针对Next.js应用程序的部署服务而知名，但现在已经发展成支持更广泛的技术栈，包括React、Vue、Angular、Svelte等前端框架，以及Node.js、Python、Go等后端语言。Vercel提供了简单易用的命令行工具和网站界面，让开发人员能够轻松部署、管理和扩展他们的应用程序。

通过Vercel，开发人员可以享受到自动化部署、快速构建、即时预览以及全球 CDN 加速等功能，帮助他们更专注于开发应用程序本身，而无需担心基础设施和部署的复杂性。Vercel也提供了团队协作和版本控制功能，使团队成员能够方便地协作开发和管理多个环境的部署。

2、什么是Cloudfare

Cloudflare是一家全球领先的云端网络和安全公司，提供了各种云端解决方案，包括内容传送网络（CDN）、云安全、DDoS防护、DNS服务、边缘计算等。Cloudflare的目标是帮助网站提高性能、加强安全性，并保护他们免受各种网络威胁的侵害。

通过Cloudflare的CDN服务，网站可以将其内容缓存到全球各地的服务器上，实现更快的网站加载速度和更可靠的内容传送。Cloudflare的安全服务包括防火墙、DDoS防护、恶意软件检测等，可以帮助网站抵御各种网络攻击和保护用户数据安全。

Cloudflare还提供了专业的DNS服务，帮助网站管理域名解析、优化DNS性能，并提供更快速、更安全的解析服务。此外，Cloudflare还提供边缘计算功能，使开发人员能够在全球各地的服务器上运行代码，实现更快的响应时间和更高效的计算资源利用。

总的来说，Cloudflare为用户提供了一个全面的、可靠的云端解决方案，帮助他们提高网站性能、加强安全性，并实现全球范围的网络优化。

使用github登录Vercel，并在Vercel上面部署项目

Vercel官网： vercel.com/

首先你需要将你的代码上传到github或者gitlab中。

然后打开Vercel的官网使用github或者gitlab登录Vercel。这么做的目的是为了Vercel关联上你的仓库。登录完成后你的界面应该是这样的。

然后点击add new下面的 project按钮，新建一个项目。

vercel会自动识别出我们github仓库下面的代码仓库，我们只需点击import导入即可。右侧是一些项目模板，二者选一即可。

接下来如图所示，vercel会识别出我们项目用的什么构建插件，比如我用的是我之前写的用vue3+vite写的贪吃蛇小游戏。vercel会识别出vite，第二张图片是一些构建命令，我们使用默认就好。然后点击deploy就行。

部署成功！点击右上角按钮，可查看部署的该项目的详情。

这个就是vercel给我们分配的域名，我们可以点击查看我们已经部署完毕的网站。此时如果你去访问是访问不到的。由于某些原因，vercel.app 被 DNS 污染（即被墙），目前在国内已经无法打开，除非你有自己的域名.

使用Cloudfare解决 Vercel 部署网站在国内被墙的问题

你需要准备

申请一个国内可访问的域名（新手可1元购于阿里云， xyz , top 这种后缀都是很便宜的）

1、首先你需要在这里把自己购买的域名添加到cloudfare，然后选择免费计划。

2、点进该域名的配置面板，增加两条 DNS 配置。 76.223.126.88 是 vercel 贴心为墙内用户准备的 IP。添加 @ 记录后，保存后显示的是你的域名.

然后你需要把下面cloudflare名称服务器下的两行代码，直接复制粘贴到阿里云后台的 DNS 修改 - DNS 服务器。

接下来是等待时间，Cloudfare 会给你发邮件的。通过后，记得配置 SSL - strict, 否则会因重定向过多无法打开。

然后打开 Vercel 的部署后台.

最后就大功告成啦！

已经部署完毕的网站： Vite App (nodehub.cn)

标签：前端 GitHub JavaScript

话题：创作者训练营

0 / 1000

标点符号、链接等不计算在有效字数内

Ctrl + Enter

发送

最热

相关文章