网站LOGO
博客 | 棋の小站
页面加载中
2月21日
网站LOGO 博客 | 棋の小站
记录学习,心得,状态,生活。
菜单
  • 热评
    用户的头像
    首次访问
    上次留言
    累计留言
    我的等级
    我的角色
    打赏二维码
    打赏博主
    Vercel介绍,免费、方便上线网站的首选方案
    点击复制本页信息
    微信扫一扫
    文章二维码
    文章图片 文章标题
    创建时间
  • 一 言
    确认删除此评论么? 确认
  • 本弹窗介绍内容来自,本网站不对其中内容负责。
    按住ctrl可打开默认菜单

    Vercel介绍,免费、方便上线网站的首选方案

    · 原创 ·
    技术分享 · 实用教程
    共 2465 字 · 约 3 分钟 · 427

    文章
    摘要

    本文介绍了使用Vercel轻松部署个人前端项目的优势,省去了复杂的服务器配置和运维成本。通过演示在Vercel上部署静态站点和一个简单的Flask应用,强调了其简便性和自动化特性。文章还提及Vercel支持的框架和模板,并推荐了一个基于UptimeRobotAPI的站点监测服务。

    先来说下前端项目的部署,一般来说有以下几个步骤:

    • 项目打包
    • 上传到服务器
    • 域名解析
    • SSL 证书申请
    • Nginx 配置
    • CDN 加速

    如果是公司的项目,打包之后的步骤一般有专门的运维人员负责,对前端开发者来说并没有什么负担。

    但如果是个人的项目,那不仅要有服务器,还要会申请 SSL、配置 Nginx 和 CDN 加速,学习成本很高。而且即使配置好了,后面每次修改代码之后都要重新打包并上传到服务器,很麻烦。那么这里就要邀请到今天的主角了。

    相信各位玩博客的都对Vercel再熟悉不过了。Vercel完全免费,在没有服务器的情况下,它可以非常方便地部署由NodeJS、Vue、React等框架驱动的网站。它在全球各地都部署了节点,访问速度不需要担心。唯一的缺点就是不支持数据库,不过它可以配合一些其他免费的云数据库使用。我在之前发布了一个【无服务器如何上线网站】的文章,但它是使用自己的电脑加上内网穿透从而实现在公网上也能访问自己的网站,但是这就需要电脑长期开机。当然你可以买一个服务器,但服务器的费用要比电脑的费用高很多。如果你完全没有预算购买云服务器,而恰好你的网站是静态的或者是由Vercel支持的编程语言驱动的,那Vercel绝对是你的不二之选。若你觉得速度慢,还可以外套一个CDN解决,它虽然在全球各地都有节点,但是它在中国大陆没有节点(因为需要备案)。Vercel除了可以搭建你自己的站点,还可以搭建镜像站,如Github、Python等网站,由于它们的服务器都在国外,在国内由于各种原因,访问速度会受到极大限制,这时你就可以搭建一个镜像站,将这些网站反向代理到你自定义的域名,这样就可以访问这些网站了。

    Vercel的部署也很简单,只需要将你的项目打包好上传至github仓库,然后在Vercel登录时使用Github登录,在部署项目时它就可以利用你的仓库部署项目。部署后Vercel还会自动为我们的站点应用上https,应用的是Let's Encrypt证书。

    Vercel团队为我们预设了很多好看、易用的框架,我们可以直接拿来使用。

    Vercel预设的框架Vercel预设的框架

    除此之外,Vercel还为我们提供了大量的模板,都是开箱即用的。

    Vercel预设的模板Vercel预设的模板

    我们选择上图中第二个,搭建一个照片墙试试看。

    点击之后会跳转至如下图的界面,阅读一下文档,还需要申请一个Cloudinary和Tailwind。

    Deploy界面Deploy界面

    除了官方预设的界面,还可以通过Github仓库快速部署NodeJS等项目。这里推荐一个基于UptimeRobotAPI搭建的站点监测服务,就可以使用Vercel部署。预览界面:https://status.qi1.zone

    这个项目的原仓库地址是https://github.com/imsyy/site-status,我们将它Fork到自己的仓库中。

    点击【Fork】,复制到自己的仓库中点击【Fork】,复制到自己的仓库中

    然后前往vercel.com,使用Github登录,依次点击【Add New...】 - 【Project】,在左边的仓库中选择刚刚Fork的仓库即可。

    点击Domain还可以自定义域名。这里不细讲了,本篇文章也不是教程,仅仅是介绍一下Vercel,因为我的朋友甚至不知道这个服务。

    除此之外,Vercel还可以部署自己编写的服务,只要是Web服务都可以。我们还是先将其上传至Github仓库中,再使用Vercel部署。

    我用Flask编写了一个简单的Web网页,用于在网页中输出Hello World,然后我将其上传到了我的Github仓库中。除此之外,还需要配置一下其他的文件。

    • requirements.txt:该文件包含此项目需要安装什么框架。
    • vercel.json:它相当于Nginx文件,告诉Vercel应该反代这个项目。和我之前写过的【使用Vercel搭建镜像站】一样,是一种类型的网站。

    requirements.txt

    txt 代码:
    Flask==3.0.0

    vercel.json

    json 代码:
    {
      "rewrites": [
        { "source": "/(.*)", "destination": "/api/index" }
      ]
    }

    上面是这两个文件的内容。然后使用这个仓库部署到Vercel就可以了。

    Vercel部署Flask框架Vercel部署Flask框架

    总的来说,Vercel是一款集Nginx配置、SSL申请、版本管理、自定义域名、自动安装依赖、防DDos等众多功能于一体的网站部署服务,在没有服务器时,它绝对是首选的网站上线方案。

    声明:本文由 (博主)原创,依据 CC-BY-NC-SA 4.0 许可协议 授权,转载请注明出处。

    还没有人喜爱这篇文章呢

    现在已有

    5

    条评论
    发一条!
    1. 头像
      网安冷墨寒
      • 等级:Lv.3
      • 角色:技术 · 好友
      • 在线:三月内

      厉害的嘞

      · · · 海外
      1. 头像

        · · · 河北-秦皇岛
    2. 头像
      白雾茫茫丶
      • 等级:Lv.2
      • 角色:访客
      • 在线:三月内

      Vercel部署PHP高版本会报错,不知道怎么搞,本打算把Typecho挂上去的

      · · · 河北-秦皇岛
    3. 头像
      TeacherDu
      • 等级:Lv.5
      • 角色:首页 · 好友
      • 在线:本月

      周末愉快!

      · · · 北京-北京
      1. 头像
        TeacherDu

        周末愉快!

        · · · 河北-秦皇岛
    博客logo 博客 | 棋の小站 记录学习,心得,状态,生活。
    ICP 冀ICP备2023007665号

    🕛

    本站已运行 299 天 10 小时 26 分

    🌳

    建站:Typecho 主题:MyLife

    👁️

    今日访问量:1572 昨日访问量:1607
    棋の小站 © 2024.
    网站logo

    博客 | 棋の小站 记录学习,心得,状态,生活。
     
     
     
     
    壁纸