使用 netlify 部署你的前端应用
我前几天写了一篇文章, 如果你想搭建一个博客 ,其中提到了使用 netlify
做博客托管服务。
netlify 可以为你的静态资源做托管,就是说它可以托管你的前端应用,就像 github page
那样。不过,它不又只像 github page
那么功能单一,它可以做更多的事情
CI/CD
: 当你 push 代码到仓库的特定分支会自动部署http headers
: 你可以定制资源的http header
,从而可以做 缓存优化 等http redirect/rewrite
: 如果一个nginx
,这样可以配置/api
,解决跨域问题二级域名
: 你如果没有自己的域名,可以使用它的任意二级域名-只要没有被占用,这比github page
多仓库只能用/path
要好很多CDN
: 把你的静态资源推到 CDN,虽然是国外的https
: 为你准备证书,当然使用的是lets encrypt
Prerender
: 结合SPA
,做预渲染
它做的是整个前端部署工作流的事情,而且很多事情都是自动完成的。
年初(2019/03) 我写过一篇文章: 如何使用 docker 高效部署前端应用 。其中讲了如何使用一个 nginx
镜像优化构建前端静态资源的过程,而这只是前端部署工作流的一小部分,这种方案更加适合小型公司。
而在大型公司,基础设施更加健全,对于前端部署很有可能有一个部署平台,如同 netlify
一样: 你根本不需要构建镜像,你只需要写一个极其简单的配置文件。
本篇文章讲解如何结合 netlify
去部署你 github
上的前端应用。将以我的个人仓库 cheat-sheets 部署到 cheatsheeets.netlify.com/git 作为示例进行演示。
当然 gitlab
也可以结合 netlify
使用
- 本文地址: 使用 netlify 部署你的前端应用
- 系列文章: 个人服务器运维指南
新建站点
新建站点
使用 github
授权登录 netlify 。在主页点击 New site from git
按钮,新建站点
选择一个仓库
构建选项
build command
: 如何生成静态文件,一般会是npm run build
publish directory
: 静态文件目录,一般会是public/dist
等
另外也可以作为配置文件,参考下一节
部署成功
配置二级域名
此时通过 cheatsheeets.netlify.com/git 访问页面,成功部署
配置文件
配置文件可以配置你的 http 的 header
, rewrite
, redirect
等,可以参考 官方文档
以下我是的博客 shfshanyue/blog 的配置文件
[build]base = ""publish = ".vuepress/dist"command = "npm run build"[[headers]]for = "/*"[headers.values]cache-control = "max-age=7200"[[headers]]for = "/assets/*"[headers.values]cache-control = "max-age=31536000"
//前端学习裙:950919261
build.publish
build.command
另外,我把 /assets/*
做了永久缓存,因为里边都是带了 hash 值的静态文件
配置 api 解决跨域问题
另外,如果你的前端应用需要配置代理服务器,比如 /api
与 /graphql
,可以设置 redirects
。算是替代了一部分 nginx
的功能
[[redirects]]from = "/graphql/"to = "https://graphql.shanyue.tech"status = 200force = trueheaders = {X-From = "Netlify"}
使用 netlify 部署你的前端应用相关推荐
- netlify 部署vue_如何构建和部署无服务器功能以进行Netlify
netlify 部署vue 介绍 (Introduction) It is a good software engineering practice to separate portions of y ...
- netlify 部署vue_如何使用Netlify构建和部署网站-全面的教程
netlify 部署vue Netlify helps developers quickly roll out static websites. Learn how to use Netlify in ...
- netlify 部署 github page, 使用https域名
原文链接: netlify 部署 github page, 使用https域名 上一篇: pr 输出 立体声 下一篇: js 区分鼠标左右键点击 netlify 官网 https://app.netl ...
- 基于sentry的前端错误监控日志系统(部署sentry服务器/前端项目部署)-让前端最快的定位到生产问题
基于sentry的前端错误监控日志系统(部署sentry服务器/前端项目部署)-让前端最快的定位到生产问题 背景 在这越来越发达的网络时代,web应用也是越来越复杂,尤其是前端的开发,也是越来越受重视 ...
- 使用nginx部署多个前端项目
常见3种方法来实现在一台服务器上使用nginx部署多个前端项目的方法. 基于域名配置 基于端口配置 基于location配置 基于域名配置 基于域名配置,前提是先配置好了域名解析.比如说你自己买了一个 ...
- 使用Netlify部署博客
文章目录 github 项目部署 自定义域名 原先博客是部署在 githubPages 上的,稍微设置一下就能实现自动化部署和启用 https,还是蛮方便的,但是使用国内网络访问 githubPa ...
- 使用Netlify部署静态网站
之前写了一篇文章是关于在树莓派上部署Hexo的博客,但树莓派难免会出故障,所以将网站放在另一个地方会更安全一点. 前一篇:https://fitswcblog.com/%E6%A0%91%E8%8E% ...
- 如何使用netlify部署vue应用程序
什么是Netlify? Netlify是一个现代网站自动化系统,其JAM架构代表了现代网站的发展趋势.所谓JAM,就是指基于客户端JavaScript.可重用API和预构建Markup标记语言的三者结 ...
- 基于sentry的前端错误监控日志系统(部署sentry服务器/前端项目部署)-让前端最快的定位到生产问题...
背景 在这越来越发达的网络时代,web应用也是越来越复杂,尤其是前端的开发,也是越来越受重视. 所以在我们前端开发完成后,会有一些列的web应用的上线验证,如自测.QA测试.code review 等 ...
最新文章
- Windows程序设计:MFC 、Winform 和 WPF 比较
- [Swift]LeetCode468. 验证IP地址 | Validate IP Address
- 10行代码AC——7-2 说反话-加强版 (20 分)——解题报告
- python super用法
- 有法院被执行人记录还能贷款吗?
- javascript中动态添加事件!!
- Prometheus Alertmanager报警组件
- understand 4 for linux register key code 随意、任性拥有。。。。
- 【C语言】学生打卡系统(完整代码)
- 区块链开发教程系列【加精】
- 辨别尸体死亡时间! [转]
- 工作缺点和不足及措施_个人工作存在的不足和改进措施_个人工作存在问题和整改方案...
- 21天攻克PET核心词汇,加油!
- oracle 抽样_oracle优化手段--统计信息导出和抽样提取数据
- html+css实现三角形的三种方法
- HTML <kbd> 标签
- android 百度 全景图,百度地图全景图
- 面向隐私计算的联邦学习激励机制与效率优化研究
- “全球朋友,全球品牌,全球服务”民间全球沙龙在深圳举办;
- matlab论文图示例代码,MATLAB数字水印 源代码+毕业论文
热门文章
- 使用树莓派(raspberry pi)搭建网站(nginx+php+mysql+ddclient)
- 《Python编程从入门到实践》读后感
- 携职教育:注会和中级哪个在体制内有用?
- 专题测试02·一元函数微分学【李艳芳全程班】
- Office 365系列之二:注册全球版微软Office 365
- 数据挖掘易犯的11大错误与数据分析技能
- uni-app引入阿里巴巴矢量库(iconfont)图标
- 短视频账号矩阵系统技术源码分享/技术搭建架构
- 2021年SIEM魔力象限领导者-Exabeam
- 基于MediaPipe的手势识别 --安卓部分