使用 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 高效部署前端應用
• 若是你只想搭建一個博客