0


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

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

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

使用Vercel拉取部署项目

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

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

先点击

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

image-20240219083751550

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

image-20240219083929293

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

image-20240219084057394

自定义域名

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

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

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

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

image-20240219084708963

点击添加记录

image-20240219084759561

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

记录类型选CNAME

image-20240219084857856

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

image-20240219085052237

记录值就写成自己刚刚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

image-20240219090352182

输入域名,点击继续

image-20240219090311577

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

image-20240219090505351

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

image-20240219090726094

然后点击继续

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

image-20240219090816681

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

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

image-20240219090957594

返回域名首页

image-20240219091234694

image-20240219091249506

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

image-20240219091336576

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

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

image-20240219091451786

点击最下方确定

get!!!

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

image-20240219091722596

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

image-20240219091825697

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

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

标签: github 前端

本文转载自: https://blog.csdn.net/qq_63728673/article/details/136162715
版权归原作者 佚名涙 所有, 如有侵权,请联系我们删除。

“0成本部署github前端项目流程”的评论:

还没有评论