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.mzph.cn/news/689304.shtml

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

相关文章

Python兼职跳过血泪史直接分享干货及平台推荐

文章目录 Python兼职种类:接私活注意事项:接单报价方式:简单公式:项目工时\*日薪+紧急程度+报价国内远程工作平台 学python能兼职挣钱吗?怎么挣钱? Python兼职种类: …

PyCharm 主题和字体 (Scheme Editor Font)

PyCharm 主题和字体 [Scheme & Editor Font] References Scheme & Editor Font File -> Settings -> Editor -> Colors & Fonts -> Font Show only monospaced fonts: 只显示等宽字体。编程时使用等宽字体效果较好。 References [1] Yon…

DockerFile的应用

DockerFile的应用 一、介绍1 构建的三步骤2 构建的过程 二、常用命令三、DockerFile案例1 创建DockerFile文件2 使用DockerFile文件构建镜像3 启动容器并验证 四 DockerFile添加数据卷 一、介绍 DockerFile是用来构建Docker镜像的构建文件,是由一系列命令和参数构成…

负载均衡下webshell连接nginx解析漏洞、sql注入第一关

首先搭建环境找到php较低的版本改一下账号密码输入?id1 正常 输入?id1 报错 .0 输入?id1-- 正常 判断是字符型注入,闭合方式是 id是1后台看是数据表里第一行 查询id1出错前端打印出了报错信息语法错误这里是找到了库名,接下来是找表名这个方法是…

php基础学习之匿名函数

匿名函数 描述 允许临时创建一个没有指定名称的函数,使用匿名函数可以方便地创建一次性或临时的功能块。 语法 function (){ //函数体 }; 样例 (注:匿名函数定义后,需要将其赋值给一个变量,然后通过该变量来调用 这种调…

Navicat连接openGauss 5.0.0 企业版数据库

引言 在当今互联网时代,数据成为企业和组织的重要资产。为了更好地管理和分析数据,数据库管理工具起到至关重要的作用。openGauss是一款开源关系型数据库管理系统,提供了高性能、高可用性和可扩展性,它还具有安全性和数据保护的特…

(二十)springboot实战——springboot使用redis的订阅发布机制结合SSE实现站内信的功能

前言 在前面的章节内容中,我们介绍了如何使用springboot项目实现基于redis订阅发布机制实现消息的收发,同时也介绍了基于SSE机制的单通道消息推送案例,本节内容结合redis和sse实现一个常用的实战案例——站内信。实现系统消息的实时推送。 …

并发编程-基础知识

多线程概念 1 线程 是进程中的一个执行单元,负责当前进程中任务的执行。一个进程在其执行过程中,会产生很多个线程。 2 进程 是指内存中运行的一个应用程序,每个进程都有自己独立的内存空间;进程也是程序的一次执行过程&#xff…

Unity求物体关于平面镜像对称后坐标以及旋转

前言:如题,我在已知一个平面L和物体A,我希望得到镜像后的物体B的位置和旋转。 效果: 推导: 首先我们需要知道物体的对称坐标A,我们现在能已知A坐标以及平面L的法线,如果我们能得到B的坐标&…

Camtasia Studio2024中文汉化版下载安装激活图文教程

Camtasia studio 2024是一款功能强大的屏幕录制和视频编辑软件。它可以帮助用户轻松地记录电脑屏幕上的任何操作,并可以将录制的视频进行编辑和制作成高质量的视频教程、演示文稿、培训课程等。 Camtasia studio 2024具有直观的界面和易于使用的工具,包…

Shiro-04-shiro 详细架构

详细架构 下图显示了Shiro的核心架构概念,并简要概述了每个架构: 下面我们对除了核心组件的部分做一下简单的介绍: Authentication(身份验证) 身份验证是验证用户身份的过程。 也就是说,当用户通过应用…

Java基于微信小程序的乐室预约小程序,附源码

博主介绍:✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇…

Apache Apisix网关系统历史漏洞复现分析

文章目录 前言CVE-2020-13945默认api令牌CVE-2021-45232未授权接口2.1 默认账户密码导致RCE2.2 未授权访问api接口RCE CVE-2022-24112 地址限制绕过CVE-2022-29266 JWT令牌伪造4.1 漏洞源码简析与修复4.2 漏洞环境搭建与复现 总结 前言 Apache APISIX 是一个动态、实时、高性能…

沁恒CH32V30X学习笔记02--GPIO的使用教程及2次封装驱动

gpio 概述 刚复位后,GPIO 口运行在初始状态,这时大多数 IO 口都是运行在浮空输入状态 外部中断 所有的 GPIO 口都可以被配置外部中断输入通道,但一个外部中断输入通道最多只能映射到一个 GPIO 引脚上,且外部中断通道的序号必须和 GPIO 端口的位号一致,比如 PA1(或 PB1、…

Android开机不显示bootloader界面

Turn it off in the following way LINUX\android\bootable\bootloader\edk2\QcomModulePkg\Library\BootLib\MenuKeysDetection.c 试了没有生效 --- a/QcomModulePkg/Library/BootLib/MenuKeysDetection.cb/QcomModulePkg/Library/BootLib/MenuKeysDetection.c-364,7 364,8…

[Flask]SSTI1 buuctf

声明:本篇文章csdn要我一天发两篇所以我来水的 跟ssti注入的详细知识我这里写了 https://blog.csdn.net/weixin_74790320/article/details/136154130 上面链接我复现了vulhub的SSTI,其实本质上是一道题 然后我们就用{{.__class__}}看类的类型&#xf…

css2的三大特性

css的三大特性 一.层叠性概念 二.继承性行高的继承 三. 优先级概念a标签默认蓝色继承注意事项 一.层叠性 概念 二.继承性 行高的继承 可用倍数表示三. 优先级 概念 a标签默认蓝色 继承注意事项 例子

单反sd卡照片突然没有了?原因+解决方案

在使用单反相机拍摄时,SD卡作为存储媒介,承担着存储照片的重要角色。然而,有时候我们会遇到SD卡中的照片突然消失的情况,给拍摄工作带来很大的困扰。本文将深入剖析导致这一问题的原因,并提供相应的解决方案&#xff0…

Visual Studio Code安装Oracle SQL Developer插件

Visual Studio Code,简称VS Code,是最流行的IDE之一。SQL Developer作为面向 Oracle 数据库专业人员的查询、开发和管理工具,现已可作为插件(Extension)在VS Code中安装。无需安装 Java, .NET, 和Oracle Client 。 数…

【代码整理】Pytorch从0实现图像分类pipeline

文章目录 引言1.数据集读取部分dataloader.py1.1.分类数据集的数据组织形式1.2自定义数据增强/数据预处理类1.3.重写torch.utils.data.Dataset数据集读取类1.4.模块测试样例 2.网络部分mynet.py2.1.自定义分类网络torch.nn.Module2.2.模块测试样例 3.训练/验证/测试模块runner.…