使用 Netlify 免费托管前端项目
随着一些云服务的发展与兴起，应用部署及上线的成本越来越低，甚至可以实现零成本部署。本系列文章将介绍如何使用薅羊毛的方式来搭建各个项目。
目前，首先更新在博客中，见: https://shanyue.tech/no-vps/
❞本系列的第一篇文章 如何使用免费服务搭建一个博客 (opens new window)[1]，其中提到了使用 netlify 做博客托管服务，本篇文章对其做简单介绍。
netlify (opens new window)[2] 可以为你的静态资源页面进行托管服务，就是说它可以托管你的前端应用，如同 github page 一般。不过，它不又只像 github page 那么功能单一，它可以做更多的事情
「它做的是整个前端部署工作流的事情，而且很多工作都是自动化完成。」
以前我写过一篇文章: 如何使用 docker 高效部署前端应用 (opens new window)[3]。其中讲了如何使用一个 nginx 镜像优化构建前端静态资源的过程，而这只是前端部署工作流的一小部分，这种方案更加适合小型公司。
而在大型公司基础设施更加健全，对于前端部署很有可能有一个部署平台，如同 netlify 一样：
「你根本不需要构建镜像，你只需要写一个极其简单的配置文件，甚至不需要配置文件，你仅仅只需去某个 UI 页面进行点点点就可以完成前端系统的整个部署流程。」
本篇文章讲解如何结合 netlify 去部署你 github 上的前端应用。将以我的个人仓库 cheat-sheets (opens new window)[4] 部署到 https://cheatsheeets.netlify.com/git (opens new window)[5] 作为示例进行演示。
❝与 Netlify 相似功能的 Vercel (opens new window)[6] 同样备受推荐，而且它的网络速度更快，UI 界面更加友好，将在以后章节对它进行简单介绍
❞新建站点
以下大都是下一步操作一点到底，截图进行演示，如不感兴趣，可以跳过。仅仅构建选项时，需要注意一下，在 Vercel 及一些 Serverless 解决方案中，构建选项都是最为重要的。
新建站点
使用 github 授权登录 netlify (opens new window)[7]。在主页点击 New site from git 按钮，新建站点
新建站点选择一个仓库
from github配置 netlify选择一个仓库构建选项
- build command: 如何构建生成静态文件资源，一般会是 npm run build
- publish directory: 静态文件资源目录，一般会是 public/dist 等目录
另外也可以作为配置文件，参考下一节
选择一个仓库部署成功
部署成功配置二级域名
配置二级域名此时通过 https://cheatsheeets.netlify.com/git (opens new window)[8] 访问页面，成功部署
配置文件
配置文件可以配置你的 http 的 header，rewrite，redirect等，可以参考 官方文档 (opens new window)[9]
以下我是的博客 shfshanyue/blog (opens new window)[10] 的配置文件
[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"
- build.publish: 静态文件目录
- build.command: 如何生成文件的命令
另外，我把 /assets/* 做了永久缓存，因为里边都是带了 hash 值的静态文件
配置 api 解决跨域问题
另外，如果你的前端应用需要配置代理服务器，比如 /api 与 /graphql，可以设置 redirects。算是替代了一部分 nginx 的功能
[[redirects]]from = "/graphql/"
to = "https://graphql.shanyue.tech"
status = 200
force = true
headers = {X-From = "Netlify"}
小结
如果你有个人博客，个人作品或者应用，那么你可以试一下 netlify。目前就有很多示例项目或者官方文档部署在 netlify 上，如大名鼎鼎lodash 的官网: https://lodash.com (opens new window)[11]
相关文章
- 如何使用 docker 高效部署前端应用 (opens new window)[12]
- 如果你只想搭建一个博客 (opens new window)[13]
❝
Original URL: https://shanyue.tech/no-vps/deploy-fe-with-netlify.html
❞Reference
[1]如何使用免费服务搭建一个博客 (opens new window):http://shanyue.tech/no-vps/if-you-want-a-blog.html
[2]netlify (opens new window):https://www.netlify.com/
[3]如何使用 docker 高效部署前端应用 (opens new window):https://shanyue.tech/op/deploy-fe-with-docker.html
[4]cheat-sheets (opens new window):https:///shfshanyue/cheat-sheets
[5]https://cheatsheeets.netlify.com/git (opens new window):https://cheatsheeets.netlify.com/git
[6]Vercel (opens new window):https://vercel.com/
[7]netlify (opens new window):https://www.netlify.com/
[8]https://cheatsheeets.netlify.com/git (opens new window):https://cheatsheeets.netlify.com/git
[9]官方文档 (opens new window):https://docs.netlify.com/configure-builds/file-based-configuration/#headers
[10]shfshanyue/blog (opens new window):https:///shfshanyue/blog
[11]https://lodash.com (opens new window):https://lodash.com/
[12]如何使用 docker 高效部署前端应用 (opens new window):https://shanyue.tech/op/deploy-fe-with-docker.html
[13]如果你只想搭建一个博客 (opens new window):https://shanyue.tech/no-vps/if-you-want-a-blog.html