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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/479689.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

羊奶的口味变化会影响质量吗?羊大师为你揭秘

羊奶的口味变化会影响质量吗?羊大师为你揭秘 改变羊奶的口味不一定会对其质量产生影响。尽管口味的改变可能会影响人们对羊奶的喜好程度,但这并不会使羊奶的营养价值降低。 小编羊大师提示,羊奶是一种富含营养的饮品,含有丰富的…

【已解决】PPT无法复制内容怎么办?

想要复制PPT文件里的内容,却发现复制不了,怎么办? 这种情况,一般是PPT文件被设置了以“只读方式”打开,“只读方式”下的PPT无法进行编辑更改,也无法进行复制粘贴的操作。 想要解决这个问题,我…

计算机设计大赛 深度学习YOLO安检管制物品识别与检测 - python opencv

文章目录 0 前言1 课题背景2 实现效果3 卷积神经网络4 Yolov55 模型训练6 实现效果7 最后 0 前言 🔥 优质竞赛项目系列,今天要分享的是 🚩 **基于深度学习YOLO安检管制误判识别与检测 ** 该项目较为新颖,适合作为竞赛课题方向&…

文献学习-1-Continuum Robots for Medical Interventions

Chapt 5. 连续体机构分析 5.1 文献学习 5.1.1 Continuum Robots for Medical Interventions Authors: PIERRE E. DUPONT , Fellow IEEE, NABIL SIMAAN , Fellow IEEE, HOWIE CHOSET , Fellow IEEE, AND CALEB RUCKER , Member IEEE 连续体机器人在医学上得到了广泛的应用&a…

python44-Python字典之字典入门

字典也是Python提供的一种常用的数据结构,它用于存放具有映射关系的数据。 比如: 有名字体重数据一一老师傅:79,老痞:80,亚特兰:92。 这组数据看上去像两个列表,但这两个列表的元素之间有一定的关联关系。如果单纯使…

【Simulink系列】——动态系统仿真 之 连续系统线性连续系统

声明:本系列博客参考有关专业书籍,截图均为自己实操,仅供交流学习! 一、连续系统定义 连续系统输出在时间上连续变化,而非间隔采样取值,满足以下条件: ①输出连续变化,变化的间隔…

【算法】约瑟夫环问题解析与实现

一、导言 约瑟夫环(Josephus Problem)是一个经典的数学问题,涉及一个编号为 1 到 n 的人围成一圈,从第一个人开始报数,报到某个数字 m 的人出列,然后再从下一个人开始报数,如此循环&#xff0c…

数据分析案例-2023年TOP100国外电影数据可视化

🤵‍♂️ 个人主页:艾派森的个人主页 ✍🏻作者简介:Python学习者 🐋 希望大家多多支持,我们一起进步!😄 如果文章对你有帮助的话, 欢迎评论 💬点赞&#x1f4…

SpringBoot+WebSocket实现即时通讯(四)

前言 紧接着上文《SpringBootWebSocket实现即时通讯(三)》 本博客姊妹篇 SpringBootWebSocket实现即时通讯(一)SpringBootWebSocket实现即时通讯(二)SpringBootWebSocket实现即时通讯(三&…

AI时代教师如何修炼内功

AI时代教师如何修炼内功 How Teachers Can Cultivate Their Inner Strength in the Age of AI 在AI时代,教师的角色和职责正在经历前所未有的变革。随着人工智能技术的不断进步,教育领域出现了许多新的工具和方法,这些新发展要求教师提升自身…

【C/C++】实现Reactor高并发服务器 完整版

代码结构 文件介绍 InetAddress.h InetAddress类 ip和端口设置 Socket.h Socket类 设置fd Epoll.h epollfd 管理类 Channel.h Channel类 管理epoll以及对应回调函数实现 EventLoop.h EventLoop事件循环类 TcpServer.h 服务器类 tcpepoll.cpp 主函数 InetAddress.h #if…

Linux用到的命令

1 压缩文件 tar -czf wonderful.tar.gz pm 这个命令的作用就是创建一个以.tar.gz结尾的包文件,然后调用gzip程序将当前目录下的pm文件夹压缩到这个以.tar.gz结尾的文件里面去