Netlify — 前端自动化部署

1,662 阅读2分钟

Vue / Reactc 项目完成之后,传统的做法是 npm run build 把项目打包,再把整个项目上传到服务器空间,如果是一次还好,如果每次发布新版本的话,每次都要 build 打包,服务器删掉原来的文件,重新上传,非常耗费时间

Netlify 是一个前端自动化部署服务,只需要将项目推送到 github ,每次有新的版本推送,都会被 Netlify 检测到,并以非常快的速度在服务器内 build 新的版本并发布,我的项目比较小,推送到 github 的新版本,只需要30秒以内新的内容就可以发布完成

GitHub笔记

登录账号

打开官网 www.netlify.com/ 点击右上角 Log in 登录,

image-20200625215957936

点击 GitHub 登录,虽然国内能打开网站,但是登录页面确无法打开,只好~你懂的

image-20200625220134502

部署项目

点击右侧按钮 New site from Git

image-20200625220708077

下方点击 GitHub 授权Netfily 从 GitHub 获取项目

image-20200625220848963

GitHub会弹出窗口,点击下方 Install 授权,跳转输入 GitHub 密码完成授权

image-20200625221035832

选择要部署的项目

image-20200625221259731

下方选择要发布的分支,build 指令,发布项目的目录,Vue 项目的发布文件夹名为 dist,就直接填写 dist 就可以了,确认填写无误后点击下方 Deploy site

image-20200625221842763

自动打包

点击这里查看打包进度

image-20200625222034433

进入页面查看打包进度,第一次运行会下载依赖,这里需要等待些时间,

image-20200625223203995

项目发布完毕

image-20200625224529864

自定义页面地址

返回上一个面,左上角的地址,就是项目的临时网址了,这里点击下方的 2 来绑定自己的域名

image-20200625224656680

或者点击 Site settings → Domain management 右侧 Options 来编辑修改网址

image-20200625225130759

可以改成自己想要的前缀名,只要没有被占用成功修改,就可以通过这个地址打开网站了

image-20200625225311624

之后每次 GitHub 推送新版本到 master,都会被 Netlify 检测到并自动发布项目了

只有登录时会出现问题,实际测试收藏登录后的网址打开账号,还是国内打开发布的页面,速度都挺快的