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

手把手教你用 Porkbun+Vercel+Cloudflare 实现网站免备案部署手把手教你用 Porkbun+Ver - 掘金

2024 年 12 月 9 日约 1 分钟

分享Twitter / X Telegram 微博

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

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

手把手教你用 Porkbun+Vercel+Cloudflare 实现网站免备案部署手把手教你用 Porkbun+Ver - 掘金 set 限制解除

首页

BOT

沸点

课程

直播

活动 AI刷题 NEW 商城 APP 插件

创作者中心

会员

手把手教你用 Porkbun+Vercel+Cloudflare 实现网站免备案部署

明远湖之鱼

2024-06-11

2,130

阅读12分钟

专栏：

其它

智能总结

复制重新生成

本文介绍了用 Porkbun 购买域名、Vercel 托管网站、Cloudflare 解析及相关服务实现网站免备案部署的方法。包括Porkbun 的介绍、账号注册和域名购买流程，Vercel 的介绍、账号注册和静态托管流程，Cloudflare 的介绍、账号注册、静态托管及解析使用流程，还详细说明了多种功能的实现步骤。

关联问题: Vercel 收费吗

Cloudflare 速度怎样

Porkbun 域名稳定吗

1、前言

一个网站上线的步骤无非分成两步：将网站部署到服务器中，然后将域名解析到该服务器。如果不使用域名，则只能使用服务器IP地址访问该网站，不利于网站的 SEO 和传播。但是在国内注册域名需要实名认证，需要备案，因为现在规定不备案的国内域名是不给解析的，不解析的域名就不能用，网站也就不能打开。备案对网站的内容、用途，甚至备案填写的信息都作出了限制，可以说是十分麻烦。

对于博客、官网这种简单的静态网站，一般直接采用 Github Pages 、 Coding Pages 、 Netlify 和 Vercel 等方式进行静态托管即可，无需租借服务器进行部署（网站的服务器或域名，只要有其一是国内的，都需要备案，否则都会被拦截）。但是拿 Github Pages 来说，很多时候不开启科学上网的话，页面会十分卡顿（网站测速可用： www.itdog.cn 。同时域名也不是完全可自主定义，这时候也会去考虑将自定义域名解析到我们的网站上。但是使用国内的域名，即使不使用服务器，只进行一个简单的 URL 转发工作，都需要实名认证+网站备案。。。

因此，把目光瞄准的国外相关厂商，减少冗余流程的同时满足我们的需求。笔者选择的方案是： Porkbun + Vercel + Cloudflare 。其中 Porkbun 用于购买域名，然后用 Cloudflare 解析我们的域名（ Porkbun 也提供了 DNS 解析服务，但不稳定），解析到 Vercel 这个网站托管和自动化部署平台（ Cloudflare 本身也提供了网站托管和自动化部署服务，但速度一般）。

2、Porkbun 租借域名

2.1 Porkbun 介绍

1、 Porkbun 是一家通过 ICANN认证的域名商，成立于2016年，总部位于美国。

2、 Porkbun 创始人 Raymond 同时也是 SnapNAMES 的创始人，域名界的名人。

3、 Porkbun 支持支付宝买域名，比较方便，因为是国外运营商，所以不用备案。

4、另外， Porkbun 有很多的优点：免费送 WHOIS 隐私保护，后台操作简单，没有隐藏费用，客服回复快， URL 转发（301，302，屏蔽转发），账号登陆二次验证和账号登陆邮件通知。

2.2 Porkbun 账号注册流程

在Porkbun上买域名，首先要注册一个账号，否则无法完成后续的结账付款，注册流程如下。

1、访问 porkbun.com ，点击右上角的 SIGN IN 进入注册页面：

2、然后在右侧的 Create a New Account 区域填好相关信息（除了邮箱，其它必填信息都可以随便填）：

3、填写完所有的注册信息，点最下方的 Create Account 按钮，这时会收到 Porkbun 发来的账号验证邮件，将验证码粘贴到注册页面的验证码填写弹窗，就完成 Porkbun 的账号注册了

2.3 Porkbun 域名购买教程

账号注册完，接下来登陆你的 Porkbun 账号，开始购买域名。

1、搜索框输入你想要购买的域名，如下图所示：

2、选择你想要的域名，先点加号后点 check out ，如下图所示：

3、确认无误后结账付款，付款方式支持双币信用卡、paypal、支付宝和比特币。

4、付款之后，你的邮箱里会收到 Porkbun 给你发的账单邮件，如下图所示：

5、去到 DOMAIN MANAGEMENT 页面也能看到已购买的域名：

3、Vercel 托管网站

3.1 Vercel 介绍

根据【常见静态网站托管平台使用及多节点部署方案】这篇博客可知常见的静态网站托管平台有平台有 Github Pages 、 Coding Pages 、 Netlify 和 Vercel 等若干种，结合【使用 Vercel/Netlify/Cloudflare 托管个人博客】这篇博客的测评结果，最终决定用 Vercel 来托管网站。

Vercel 是一个云服务平台，支持静态网站（纯静态页面，没有接口数据交互）和动态网站的应用部署、预览和上线。如果你用过 GitHub Pages ，那么心里可能不会太陌生，但你也能通过 Vercel 集成 GitHub 后，在 GitHub 项目进行代码推送， PR 合并自动部署的目的，且你不需要考虑服务器问题。

3.2 Vercel 账号注册流程

1、首先去到 Vercel 官网，点击右上角的 Sign up 按钮：

2、选择 Hobby 类型即可：

3、直接选择 Github 进行登录即可：

4、填好校验手机号并输入验证码：

5、登录成功可看到：

3.3 Vercel 静态托管流程

1、点击 Add Github Account 关联我们的 Github 仓库：

2、选择要部署的存储库，并设置构建命令和存放构建的页面的目录（默认配置即可）：

3、可以看到网站正在构建：

4、可以在 Overview 页面看到我们已部署的网站：

且 Vercel 会自动检测到代码更新，并触发构建和部署流程。

Cloudflare Pages 是一个静态网站托管服务，功能和 Github Pages 差不多，可以存放静态网页，还可以直接部署前端项目。如果你的网站只是静态博客或帮助文档的话，可以完全不需要购买服务器。 Cloudflare 是全球最大的几个 CDN 服务商之一，速度应该会比 Github Pages 好一些，而且 Cloudflare Pages 一个账户可以创建多个网站。

1、进入 Cloudflare Pages ：

2、关联 Github 存储库：

3、选择要部署的存储库，并设置构建命令和存放构建的页面的目录：

4、 Cloudflare 克隆存储库后会自动执行 npm install 之类的命令下载所需的依赖，然后执行构建命令，然后把构建完成的文件放到网站目录。点击保存并部署后 Cloudflare Pages 就会开始构建和部署，如下：

5、部署完成后点击继续处理项目就可以看到部署的网站了，且默认开启了自动部署，如下：

6、同时可以设置自定义域，将网站域名改为前面在 Porkbun 上申请的域名，此处不作赘述。

4、Cloudflare 使用

4.1 Cloudflare 介绍

Cloudflare 是一家全球最著名的 CDN 加速服务商，提供了免费和付费的网站加速和保护服务。即使是免费版，也提供了比较全面和强大的功能，非常不错。我们可以使用它进行网站的 DNS 解析和 CDN 加速，也可使用 Cloudflare Pages 托管静态网站。

4.2 Cloudflare 账号注册流程

1、访问 www.cloudflare.com/zh-cn/plans ，点击右上角的登录进入登录页面：

2、点击注册按钮进入注册页面：

3、填写完邮箱和密码，点下方的 Sign up 按钮确定注册，这时会收到 Cloudflare 发来的账号验证邮件，点击下方的验证链接即可完成验证：

4.3 Cloudflare 静态托管流程

1、进入 Cloudflare Pages ：

2、关联 Github 存储库：

3、选择要部署的存储库，并设置构建命令和存放构建的页面的目录：

5、部署完成后点击继续处理项目就可以看到部署的网站了，且默认开启了自动部署，如下：

6、同时可以设置自定义域，将网站域名改为前面在 Porkbun 上申请的域名，此处不作赘述。

4.4 Cloudflare 解析使用流程

4.4.1 添加站点

1、点击右边的添加站点按钮进入添加解析页面：

2、输入我们刚在 Porkbun 购买的域名并点击继续按钮进入下一步：

3、选择 Free 服务（个人项目足矣）并点击继续按钮进入下一步：

4、可以看到该域名目前的 DNS 记录为空，如果不为空（可能是 Porkbun 域名本身自带的解析）则删掉现有的记录：

4.4.2 更新名称服务器

1、在网站页面可以看到我们刚刚添加的站点，看到文案待处理的名称服务器更新：

2、可以点击进去看到更新名称服务器流程：

3、按照流程说明，先在 ICANN WHOIS 上查找该域名的注册机构：

4、我们这个域名是在 Porkun 上注册的，以 Porkun 为例，我们来学习如何修改域名服务器。如果你在阿里云、 namesilo 注册的域名，可以查看这篇教程：如何使用NS进行域名解析。首先登录 Porkbun ，进入域名管理界面：

5、按下图序号操作，进入域名详细显示页面：

6、在 DNS RECORDS 处点击进行编辑，清空 Porkun 域名自带的 DNS 解析记录：

7、在 NAMESERVERS 处点击进行编辑，先清空已有的 NS 记录，然后将已分配的 Cloudflare 名称服务器黏贴到此处，然后提交即可。通常需要48h生效，实际经过测试，大约5-10分钟大部分地区都能生效的。

8、回到 Cloudflare ，点击立即检查名称服务器按钮进行检查：

9、检查通过后，会收到邮件：

检查通过后，可以在 Cloudflare 添加相应记录让该域名发挥作用，下面讲三种用途，分别是 URL 转发、域名重定向和映射到服务器。

4.4.3 解析可实现的一些功能

4.4.3.1 实现URL 转发

一些第三方博客平台的主页链接可能不太美观，包含一些数字和难以记忆的字符，例如掘金的个人主页链接形式为 https://juejin.cn/user/数字。为了解决这个问题，可以考虑使用一个域名来进行 URL 转发。

用阿里云/腾讯云等国内云服务厂商实现类似的效果可看笔者的另一篇文章：不是吧，都2023年了，你的掘金个人主页还在用传统域名？

用 Cloudflare 实现则是通过以下的步骤：

1、首先我们模仿阿里云中实现的方法，添加一条 DNS 记录，类型为 URL ，名称直接填上面的域名、内容填需要转发的 URL 即可：

此时发现不起作用， lajiao.blog 并没有跳转到掘金博客。

2、此时回到 Cloudflare 系统，添加一条 A 记录，IPv4 地址随便写即可，因为后面是要做域名跳转的，这里填写的 IPv4 不是真正要跳转的 URL。

3、点击左侧的页面规则为站点添加如下规则：

这样就完成域名跳转的配置了。具体的规则配置帮助可以参考： developers.cloudflare.com/rules/page-… 。

在浏览器里输入 lajiao.blog 就能跳转到目标 URL。

4.4.3.2 为已托管网站提供 DNS 解析

上面我们用了 Vercel 托管网站，支持绑定自定义域名进行解析，且 Vercel 本身有边缘网络节点，在国内的速度其实还不错，即便后来流量改道去了新加坡。但是为什么要使用 Cloudflare 来加速 Vercel ，因为 Vercel 以前出现过被屏蔽的情况(详见《 vercel无法访问带来哪些影响》)。 Cloudflare 虽然速度不是特别快（因为免费版无法使用大陆节点），但是用来防止部署在 Vercel 上面的项目再次出现无法访问的情况也算是一个不错的选择。

同时 Vercel 部署之后会自动生成一个以 vercel.app 为后缀的域名，也支持自定义域名。自定义域名可以通过 CloudFare 等域名控制台进行域名解析并利用代理服务达到访问 Vercel 的目的。

1、来到 Vercel 的网站设置界面，将网站域名改为前面在 Porkbun 上申请的域名：

2、回到 Cloudflare 的域名控制台，将上述说明的 DNS 记录添加到网站中：

注意：可以添加 CNAME 解析，也可以添加 A 解析，两者选其一即可：

CNAME 解析：默认记录值容易被墙，可以改用 cname-china.vercel-dns.com. 。

A 解析：记录值填入 76.223.126.88 ，也可以前往 Vercel All IP 自行挑选记录值。

3、此时可以看到 Vercel 的DNS检查通过：

4、 Cloudflare 导致的重定向次数过多可以通过将“SSL/TLS 加密模式”设置为完全（Strict）解决：（参考解决博客：【 Vercel + Cloudflare = 重定向次数过多？Cloudflare + Vercel err_too_many_redirects 解决方法】）

5、此时便可通过自定义域名去访问我们在 Vercel 托管的静态网站了。（如果没有看到网站完全的效果，则尝试 CTRL+F5 强制刷新。）

4.4.3.3 实现映射到服务器

关于部署，可看笔者的另一篇文章：三分钟学会使用 Docker 部署前端项目

目前操作的前提是已购买服务器且已进行网站部署，直接用服务器的公网IP地址可进行网页访问。但是经过实践发现，即使该域名不用备案就可被 Cloudflare 进行解析，但是由于服务器是国内的阿里云、腾讯云等云服务器厂商，过十几分钟依旧会被拦截： Non-compliance ICP Filing ，需要租借外国云服务器可看文章： 10大国外云主机服务器推荐。

1、添加一条类似下面的A记录，内容指向我们的服务器公网地址：

2、此时去 www.lajiao.blog 即可访问我们的网页。

3、使用 Cloudflare 接管网站的CDN后，默认就可以用 https 访问网站，但同时也保留了 http 协议的访问。如果站长希望强制使用全站 https ， Cloudflare 面板也是支持的。

4、点击 TLS/SSL ，概述，保持“灵活”：

5、点击“边缘证书”，点击启用“始终使用 HTTPS”：

经过这个设置后，客户再次访问类似于 www.lajiao.blog 的网址，则会强制跳转到 www.lajiao.blog 达到全站 https 的效果。

标签：运维服务器

话题：每天一个知识点

本文收录于以下专栏

其它

专栏目录

本专栏的文章不同于其它三个专栏的文章，内容较为分散，主要为本人学习实践过程中的一些总结、分享等，因此集中放在本专栏。

2 订阅 · 4 篇文章订阅

三分钟学会使用 Docker 部署前端项目

0 / 1000

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

Ctrl + Enter

发送

最热

相关文章