使用 netlify 部署前端应用

学习资料 1年前 (2023) ggt
0

什么是Netlify

Netlify 是美国的一家云计算公司,它的官网 Netlify 为用户提供静态网页托管功能。
简单来说,只要你准备好网页代码,不需要购买服务器甚至域名,就可以把你的页面发布到互联网上。所以从定位上来说,它非常适合个人网站搭建,因为它零经济成本、零学习成本、甚至零风险

 

市面上也有其他的静态网页托管网站,比如腾讯云的WH,阿里云的OSS,还有各种Pages服务,比如Github Pages、Gitee Pages、Coding Pages等等,多多少少我都尝试过,但总归是没有Netlify好用,下面是一个功能对比表格:

功能 Netlify 腾讯云WH 阿里云OSS GithubPages GiteePages
免费 ✔️ ✔️ 部分免费
傻瓜式 ✔️ 需要自行安装环境 需要调API ✔️ ✔️
博客系统 ✔️ ✔️ ✔️ ✔️
HTTPS ✔️ ✔️ ✔️ ✔️ 需付费
CDN ✔️ ✔️ - 需要自己配置 ✔️
绑定域名 ✔️ ✔️ - ✔️ 需付费
国内速度 ✔️ ✔️ ✔️ ✔️
国外速度 ✔️ - - ✔️ -

 

用Netlify能做些什么

最常见的就是搭建博客系统了,博客blog这个词虽然非常老了,但现在仍然是技术圈、摄影圈非常重要的一种分享方式,像国内的CSDN博客、cnblog等等国产的老牌博客网站现在仍然有巨大的流量,但爱折腾的人们谁不想要一个属于自己的博客呢?

除了博客,任何静态网站的内容都可以挂在Netlify上而且Netlify不仅支持Hexo这样的博客系统,还支持gitbookdoxygen等等各式各样的构建工具,比如我搭建的 Kiwano 官网上的用户手册和API文档,就是这两种方式生成的,最爽的是完全不需要考虑环境,只要把命令行敲上去,所有的环境都给你一键配置好。

使用 netlify 部署前端应用

写两行简单命令就可以部署gitbook

如果你喜欢折腾,还可以配合 LeanCloud 这样的前端数据库实现各种各样的需求,比如给自己的博客加一个评论系统,或者做个游戏排行榜等等。

另外,Netlify还支持AWS lambda函数(看文档居然支持Go代码)、静态表单等等,不过这些我还没有尝试。

学习使用Netlify

这不是一篇手把手教学如何使用Netlify的博客,因为这样做没有意义。
把部署网站的过程一步一步截图解释说明,会有非常大的时间局限性,很可能过个半年,Netlify的页面大改,这篇博客就没有参考意义了,而且一般网站都会有入门教程介绍,再不济网上一搜教程也有一大堆,所以我不会做这种手把手的教程之类。

但是有一些坑是我自己踩过来的,简单分享一下我使用时遇到的一些问题,也许可以帮到你。

部署网站的流程

分为两种情况,如果你平时不使用git或者github,你的网站也是一个简简单单的本地项目,那么直接把代码文件夹拖到Netlify上就可以访问了。

如果你的网站放在了 Github 上,那么你需要按下面的步骤来进行

  • 用 Github 账号登录
  • 开放仓库权限给 Netlify
  • 选择你想要部署的仓库
  • 输入你的网站部署命令,比如Hexo博客的部署命令是 hexo g
  • 输入你的网站部署目录,比如Hexo博客的部署目录是 /public
  • 部署完成

域名解析&开启HTTPS

绑定域名的步骤本身很简单,只需要在Domain Settings里点击添加域名,然后再到购买域名的服务商那里配置CNAME解析就可以了。

但是如果要为你的网站配置HTTPS,那就涉及到 Domain DNS 的配置问题了。
域名DNS是用来告诉你域名对应的服务器地址的,比如你访问 nomango.cn,DNS会告诉你这个域名的服务器实际ip地址是 220.x.x.x。

Netlify支持自动配置HTTPS,要求是必须使用Netlify提供的DNS服务,因为这样才能让它为你的域名自动配置HTTPS证书。
一般在国内购买的域名默认使用的都是国内的DNS,所以需要到域名管理页面去修改DNS服务器

使用 netlify 部署前端应用

修改DNS服务器

修改后Domain Settings的页面下方会出现开启HTTPS的提示。

是否需要备案

不需要。
域名本身是不需要备案的,只有服务器在国内的网站才需要备案。

有关备案的详细解答可以参考这篇 《腾讯云:是否需要备案》

静态资源优化

Site Settings里有一项是Asset optimization,里面可以设置CSS、JS、图片压缩,可以节省服务商和用户流量,默认不开启的,推荐开启。

 

netlify 可以为你的静态资源做托管,就是说它可以托管你的前端应用,就像 github page 那样。不过,它不又只像 github page 那么功能单一,它可以做更多的事情

  1. CI/CD: 当你 push 代码到仓库的特定分支会自动部署
  2. http headers: 你可以定制资源的 http header,从而可以做缓存优化
  3. http redirect/rewrite: 如果一个 nginx,这样可以配置 /api,解决跨域问题
  4. 二级域名: 你如果没有自己的域名,可以使用它的任意二级域名-只要没有被占用,这比 github page 多仓库只能用 /path 要好很多
  5. CDN: 把你的静态资源推到 CDN,虽然是国外的
  6. https: 为你准备证书,当然使用的是 lets encrypt
  7. Prerender: 结合 SPA,做预渲染

它做的是整个前端部署工作流的事情,而且很多事情都是自动完成的。如果你想知道大厂是如何部署前端的,那你可以看看 netlify

版权声明:ggt 发表于 2023-02-15 12:51:53。
转载请注明:使用 netlify 部署前端应用 | 我的学习信息记录

暂无评论

暂无评论...