0成本部署github前端项目流程

0成本部署github纯前端项目流程

对业内来说应该是一个比较常规的操作,对于新手来说进行过一次应该就很难忘记了,但很多人仍然是不会的,认为部署项目很难,很专业,其实现在由于这些厂商的努力,大众(没有任何计算机基础)想要部署也是非常容易的

使用Vercel拉取部署项目

首先我们要将项目fork到我们的本地,这一步可以直接使用Vercel的自动化完成

以这段时间较火的gpt镜像站:https://github.com/lobehub/lobe-chat项目为例子,演示

先点击

将自己的github账号登录,实现vercel和github账号互通,将项目名起号点击创建

并填写一些需要初始化的参数,最后点击deploy

项目就开始部署了,等待几分钟,项目部署完成后会生成项目网站链接,例如

自定义域名

但是Vercel由于不可抗力因素,包括官网在内的网站在国内都无法访问,你懂的,用户是无法进入的

而且这个生成的网站链接也并不好看

所以需要我们自己准备一个域名,新用户可以随便去个国内域名商先领个一年免费的,这个也不会

推荐先去b站找视频学习下,然后以阿里云为例:点击域名对应后边的解析

点击添加记录

我们现在的操作是让我们的域名指向刚刚生成的网站,

记录类型选CNAME

主机类型随便写,是域名前缀,

记录值就写成自己刚刚Vercel生成的网站链接

点击确定,我们再搜自己刚刚填写主机记录的网址(要先挂科学上网工具),就会是我们部署的网站了(没有上网工具仍然搜不出来),经历了这么多,我们的国内用户现在仍然无法使用网站,嘿嘿嘿,这时候就需要第三步了:

cloudflare的cdn加速

cloudflare是什么呢?

Cloudflare 是一家提供网络安全、性能优化和分发服务的公司。它的服务主要包括:

  1. 内容分发网络 (CDN): Cloudflare 提供全球分布的 CDN,通过将内容缓存在靠近用户的服务器上,加速网站和应用程序的加载速度。这有助于降低延迟,提高性能,减轻源服务器的负载。
  2. DDoS 防护: Cloudflare 提供强大的分布式拒绝服务 (DDoS) 防护,帮助防止恶意攻击和保护你的网站免受服务不可用的影响。通过其全球分布的数据中心,Cloudflare能够缓解大规模的网络攻击。
  3. 安全性服务: Cloudflare 提供 Web 应用防火墙 (WAF)、SSL/TLS 加密、身份验证和访问控制等安全性服务,帮助保护网站和应用程序免受恶意攻击、数据泄漏和其他安全威胁。
  4. 边缘计算: Cloudflare Workers 是一项边缘计算服务,允许你在 Cloudflare 的全球网络边缘运行 JavaScript 代码,以便在离用户更近的位置执行一些逻辑,从而提高性能和响应速度。
  5. 域名注册服务: Cloudflare 提供域名注册服务,你可以注册、管理和转移域名,同时结合他们的其他服务,如 CDN 和 SSL,使域名管理更加便捷。

Cloudflare 提供了一系列的云服务,以改善网站和应用程序的性能、可用性和安全性。通过使用 Cloudflare,网站和应用程序的访问者可以获得更快的加载速度,同时也能够受益于其先进的安全性和网络优化功能。

总之,他可以让你的网站在国内访问,并且加速你的网站,而且对于个人来说是免费的

接下来进行操作演示:

先进入cloudflare官网:https://dash.cloudflare.com/

注册账号,点击add a site

输入域名,点击继续

会有四个价格档位,点击下边的免费版

之后他会自动扫描我们解析过的域名,如果你是严格按前两步的话,现在应该能检测出刚刚在阿里云解析的域名

然后点击继续

会给你分配两个cloudflare的域名服务器

打开阿里云,将你的域名的域名服务器改成上边的两个,

具体步骤,点击域名解析,点击查看,我们能看到原来的dns:

返回域名首页

点击全部域名,找到你刚刚注册的域名后边的管理

点击左侧边栏的dns修改,点击修改dns服务器

将刚刚cloudflare生成的两个dns分别填入两行

点击最下方确定

get!!!

之后只用等待cloudflare的邮箱送达,就说明完成了,

这时候可以在国内搜索你的网站,一定是能出来的

我们能看到,确实可以使用了

这次分享就结束了,有什么不懂的,可以发评论,私聊也可以,毕竟笔主是只弱鸡,不要有心理压力;

相关推荐
涔溪34 分钟前
Ecmascript(ES)标准
前端·elasticsearch·ecmascript
用户31574760813536 分钟前
成为程序员的必经之路” Git “,你学会了吗?
面试·github·全栈
榴莲千丞1 小时前
第8章利用CSS制作导航菜单
前端·css
奔跑草-1 小时前
【前端】深入浅出 - TypeScript 的详细讲解
前端·javascript·react.js·typescript
羡与1 小时前
echarts-gl 3D柱状图配置
前端·javascript·echarts
guokanglun1 小时前
CSS样式实现3D效果
前端·css·3d
咔咔库奇1 小时前
ES6进阶知识一
前端·ecmascript·es6
渗透测试老鸟-九青2 小时前
通过投毒Bingbot索引挖掘必应中的存储型XSS
服务器·前端·javascript·安全·web安全·缓存·xss
龙猫蓝图2 小时前
vue el-date-picker 日期选择器禁用失效问题
前端·javascript·vue.js
墨染8662 小时前
HP G10服务器ESXI6.7告警提示ramdisk tmp已满
github