热搜:前端 nest neovim nvim

免费部署你的单页面应用到netlify

lxf2023-06-17 02:51:49

为什么选择netlify

GithubPage问题很多,仓库域名有后面的/xxx的尾巴,访问慢,部署单页面应用很难受(不支持redirect), 而netlify很好的解决了这些问题。

  • 免费是必杀技
  • 自动部署,甚至自动执行脚本命令(eg npm run build
  • 配置文件支持redirect/rewrite以及header等其他好用的配置
  • 自定义域名,免费ssl部署
  • ...

在netlify上部署单页面应用

新建仓库

首先你需要新建一个仓库来存储你的单页面应用项目或者是编译好的dist文件,我推荐是后者,因为我们是属于产品部署,调试等需求在本地做就可以了,当然netlify是支持项目自动部署的,配置起来也很容易。

可以参考我的仓库的结构

免费部署你的单页面应用到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所在的文件夹

本网站是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。 在本网站中,您可以学习到最新的前端开发技术,了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例,让您可以快速掌握前端开发的核心技术和流程。 本网站还提供一系列实用的工具和插件,帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化,可以帮助您节省时间和精力,提升开发效率。 除此之外,本网站还拥有一个活跃的社区,您可以在社区中与其他前端开发者交流技术、分享经验、解决问题。我们相信,社区的力量可以帮助您更好地成长和进步。 在本网站中,您可以找到您需要的一切前端开发资源,让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭,一起探索前端开发的无限可能!