为什么选择netlify
GithubPage问题很多,仓库域名有后面的/xxx的尾巴,访问慢,部署单页面应用很难受(不支持redirect), 而netlify很好的解决了这些问题。
- 免费是必杀技
- 自动部署,甚至自动执行脚本命令(eg
npm run build
) - 配置文件支持redirect/rewrite以及header等其他好用的配置
- 自定义域名,免费ssl部署
- ...
在netlify上部署单页面应用
新建仓库
首先你需要新建一个仓库来存储你的单页面应用项目或者是编译好的dist文件,我推荐是后者,因为我们是属于产品部署,调试等需求在本地做就可以了,当然netlify是支持项目自动部署的,配置起来也很容易。
可以参考我的仓库的结构
编辑netlify.toml文件,增加redirect,避免出现刷新后404
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
netlify链接你的仓库
在netlify中新增站点,选择Import an existing project from a Git repository, 选择github并通过认证,然后我们就能看到我们的所有仓库了,与githubPage不同,我们可以使用Private仓库来部署网站,选择我们创建好的仓库
到了下一步我们只需要将publish directory改成dist即可
接着网站就会自动进行部署,部署成功后我们可以修改默认的域名或者绑定自己的域名,然后我们就可以直接访问我们的网站了,测试后速度还可以,国内走的是新加坡的节点。
可能出现的问题
跨域问题
如果你的单页面应用请求的api出现跨域问题,需要你自行修改服务端的跨域配置(如果套了cdn那么就要修改cdn的跨域配置)
路径问题
请确保你的单页面应用的根路径是/
, 以及netlify正确的将publish directory
设置为了你的index.html
所在的文件夹