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

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

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

js设计模式:装饰者模式

作用: 可以给原有对象的身上添加新的属性方法 可以让对象或者组件进行扩展 示例: class Person{constructor(name,selfSkill){this.name namethis.selfSkill selfSkill}run 会走路}//所有人类都有的共同特性和技能let wjt new Person(王惊涛,写代码)let mashi new Pers…

Python实现KDJ指标计算:股票技术分析的利器系列(3)

Python实现KDJ指标计算:股票技术分析的利器系列(3) 介绍算法解释 代码rolling函数介绍计算LLV(最低价最小值)和HHV(最高价最大值)计算RSV计算SMA(简单移动平均) 完整代码…

micro-app以UMD js链接方式引入使用

npm 下载好micro-zoe/micro-app后,找到index.umd.js: 新建一个测试html,引入并使用: 参考: 微组件实践 - 掘金

八、计算机视觉-边界填充

文章目录 前言一、原理二、具体的实现 前言 在Python中使用OpenCV进行边界填充(也称为zero padding)是一种常见的图像处理操作,通常用于在图像周围添加额外的像素以便进行卷积或其他操作。下面是使用OpenCV进行边界填充的基本原理和方法 一…

答题抽奖活动怎么做_一场智慧与幸运的碰撞

答题抽奖,知识变现,一场智慧与幸运的碰撞! 在这个信息爆炸的时代,如何吸引人们的注意力,成为每个营销者都需要面对的挑战。而答题抽奖活动,以其独特的魅力,正成为越来越多品牌吸引用户、提升用…

智能无人仓|加快步伐 河北沃克HEGERLS将突破与创新“常态化”

物流的发展涉及工业、商业各个领域,涵盖原材料,生产成品从起点到终点的全过程,在室内物流操作上涵盖了收、发、存、拣等作业。近年来,由于人工成本的提高,基础劳动力取得的难度不断地加大,自动化和智能化逐…

pytest 框架自动化测试

随笔记录 目录 1. 安装 2. 安装pytest 相关插件 2.1 准备阶段 2.2 安装 2.3 验证安装成功 3. pytest测试用例的运行方式 3.1 主函数模式 3.1.1 主函数执行指定文件 3.1.2 主函数执行指定模块 3.1.3 主函数执行某个文件中的某个类、方法、函数 3.1.4 主函数执行生…

『运维备忘录』之 SSH 命令详解

运维人员不仅要熟悉操作系统、服务器、网络等知识,甚至对于开发相关的也要有所了解。很多运维工作者可能一时半会记不住那么多命令、代码、方法、原理或者用法等等。这里我将结合自身工作,持续给大家更新运维工作所需要接触到的知识点,希望大…

C++Qt:noteBookPro_01

一、创建项目 选择Qt Widgets 常用的是QWidgets和MainWindow。两者的区别: QWidgets用于简单的窗口,没有内置的菜单栏、工具栏和状态栏。适用于简单专用的应用程序,不需要复杂的界面组件。 MainWindow是包含完整的菜单栏、工具栏和状态栏的主…

入门级10寸加固行业平板—EM-I10J

亿道信息以其坚固耐用的智能终端设备而闻名,近日发布了一款理想入门级 10 英寸加固平板电脑—I10J。 EM-I10J​​ 这是一款 10 英寸的平板电脑,主要运行 Windows 10操作系统,带有硬化塑料外壳,具有 IP65 防水防尘功能和 MIL-STD 8…

unity学习(19)——客户端与服务器合力完成注册功能(1)入门准备

逆向服务器用了三天的时间,但此时觉得一切都值,又可以继续学习了。 服务器中登录请求和注册请求由command变量进行区分,上一层的type变量都是login。 public void process(Session session, SocketModel model) {switch (model.Command){ca…

nvm安装配置环境

前言 对于前端开发人员来说,多个项目可能用的不同的node版本,如何方便快速的转换版本,nvm版本管理工具的出现,解决这个问题。 实战 1. 搜索nvm版本,我用的1.1.2,下载后直接安装。 2.在d盘建立nvm空文件…

网络IO模型

前言 本篇博客主要讲解一下网络IO模型。我们常见的网络模型分为 阻塞IO模型,非阻塞IO模型,IO复用模型,信号驱动IO模型,异步IO模型。下面我详细的介绍一下这五个IO模型。 阻塞IO模型 ​ 所谓阻塞IO就是当应用A发起读取数据申请时&…

Nginx 正向代理、反向代理

文章目录 前言1. 正向代理1.1 概念1.2 逻辑图1.3 使用场景 2. 反向代理2.1 概念2.2 逻辑图2.3 使用场景 前言 正向代理主要是用来解决访问限制问题;反向代理则是提供负载均衡、安全防护等作用 1. 正向代理 1.1 概念 正向代理是一个位于客户端和目标服务器之间的代理…

红衣大叔讲AI:从OpenAI发布首个视频大模型Sora,谈2024年视觉大模型的十大趋势

OpenAI宣布推出全新的生成式人工智能模型“Sora”。据了解,通过文本指令,Sora可以直接输出长达60秒的视频,并且包含高度细致的背景、复杂的多角度镜头,以及富有情感的多个角色。 OpenAI发布首个视频大模型Sora,一句话生…

CSS-布局-MDN文档学习笔记

CSS布局 查看更多学习笔记:GitHub:LoveEmiliaForever MDN中文官网 介绍CSS布局 正常布局流简介 正常布局流是指在不对页面进行任何布局控制时,浏览器默认的 HTML 布局方式 当你使用 css 创建一个布局时,你正在离开正常布局流 …

引入成熟的Pytest自动化测试框架

虽然我们能使用脚本编写自动化测试框架,但没有必要重复找车轮子,引入成熟的自动化测试框架即可, Pytest是目前最成熟、功能最全面的Python测试框架之一,简单灵活、易于上手,可完全兼容其他测试框架如unitest&#xff…

简单介绍数据结构的基本概念

数据结构的基本概念 常用术语 数据 数据(Data)是客观事物的符号表示,是所有能输入到计算机中并被计算机程序处理的符号的总称。例如:整数、字符串、图形、图像、声音和动画等 数据元素 数据元素(Data Element&…

Harbor上传镜像报错413

错误截图 问题分析 Harbor前置nginx上传允许限制 解决方案 1.如果使用的是nginx则添加配置 client_max_body_size 0; (0表示无限制) 2.如果使用的是nginx-ingress则添加更改配置 ...annotations:nginx.ingress.kubernetes.io/force-ssl-redirect: &q…

Unity ScreenPointToRay 获取到的坐标不准确

👾奇奇怪怪的 🥙问题描述🥪解决方案🍿验证代码 🥙问题描述 使用:Camera.main.ScreenPointToRay 将鼠标坐标转换成射线,然后通过:Physics.Raycast 获取到射线碰撞到的坐标&#xff0…