使用 netlify 部署你的前端应用

我前几天写了一篇文章，若是你想搭建一个博客，其中提到了使用 netlify 作博客托管服务。

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

年初(2019/03) 我写过一篇文章: 如何使用 docker 高效部署前端应用。其中讲了如何使用一个 nginx 镜像优化构建前端静态资源的过程，而这只是前端部署工做流的一小部分，这种方案更加适合小型公司。

而在大型公司，基础设施更加健全，对于前端部署颇有可能有一个部署平台，如同 netlify 同样：你根本不须要构建镜像，你只须要写一个极其简单的配置文件。

本篇文章讲解如何结合 netlify 去部署你 github 上的前端应用。将以个人我的仓库 cheat-sheets 部署到 cheatsheeets.netlify.com/git 做为示例进行演示。

固然 gitlab 也能够结合 netlify 使用

• 本文地址: 使用 netlify 部署你的前端应用
• 系列文章: 我的服务器运维指南

若是本篇文章可以对你有所帮助，能够帮我在 shfshanyue/op-note 上点个 star

新建站点

新建站点

使用 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"
复制代码

• 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。因为服务器在国外，他可能有些慢，不过你能够试试国内厂商的 CDN

相关文章

• 如何使用 docker 高效部署前端应用
• 若是你只想搭建一个博客