码迷,mamicode.com
首页 > Web开发 > 详细

手把手教你使用 netlify 实现前端的 自动部署 + HTTPS

时间:2018-05-19 23:51:35      阅读:486      评论:0      收藏:0      [点我收藏+]

标签:开源工具   nod   这一   command   strong   教你   选择   FQ   显示   

随着开源工具越来越多,特别是nodejs构建微服务器之快,实现前端自动化部署越来越简单了,有可能【10行js代码+10行sh脚本+设置github的webhook】就能实现,但是如果你和我一样,就是“懒”(此处为褒义??),连这些都不想自己做,那该怎么办呢?这个时候我发现了这款好工具—netlify,下面我就来讲讲它究竟有多好用吧^_^

 

一、使用github或者gitlab登陆netlify

首先,打开netlify网站(https://app.netlify.com/)

技术分享图片

然后使用github或者gitlab账号登录。

技术分享图片

 

二、根据github/gitlab仓库创建网站

点击New site from Git按钮:

技术分享图片

根据你的仓库所在平台选择,以下三选一:

技术分享图片

选择你需要部署的仓库:

技术分享图片

设置部署选项,包括三点:

  1. 部署分支(对应下图中 Branch to deploy):

    顾名思义就是你的git仓库的分支,默认选择为master分支

  2. 打包命令(对应下图中 Build command):

    就是你的打包命令,诸如 npm run build,gulp build 之类;如果本身已是静态文件,不需打包编译,这一栏则不填

  3. 打包后目录(对应下图中 Publish directory):

    即执行完打包命令之后静态文件所在目录,诸如 dist,_site 之类;如果本身已是静态文件,这一栏则不填

技术分享图片

完成之后点击途中 deploy site 按钮

 

三、设置域名,绑定域名

进行完第二步,我们可以看到自动化部署已经开始运行了,而且过不多久,我们的网站就已经可以利用netlify域名就行访问了,如下图:

技术分享图片

可以看到netlify为我们随机生成了一个netlify下的域名,这里我们可以更改其前缀,并绑定到我们自己的域名下:

>> 更改netlify域名前缀:

首先,点击上图中 Site settings 按钮,然后在下方点击 Change site name 按钮,然后在弹出框中输入自己需要更改的前缀名,点击保存即可,如下图所示:

技术分享图片

>> 绑定到自己的域名下:

首先,点击上上图中 Domain settings 按钮,然后在下方点击 Add custom domain 按钮,然后在弹出框中输入自己需要绑定的完整域名,点击保存,如下图所示:

技术分享图片

这个时候会显示 !Check DNS configuration,因为我们还没有设置域名解析到netlify服务器,所以这个时候需要到你自己域名的相应服务商网站登录之后在需要绑定的域名下添加一条CNAME解析,解析的主机记录即对应的netlify域名值(这里即 codernie.netlify.com)

ok,过一会儿就可以使用自己的域名访问自己的网站啦

 

四、生成HTTPS证书,实现HTTPS访问

第四部中的Domain settings 中往下拉,可以看到 HTTPS 几个大字母:

技术分享图片

点击 Verify DNS configuration 按钮,待它变成下方绿色按钮之后,再点击:

技术分享图片

然后在弹出框中点击确认,过一会儿之后就可以使用https访问你的小站啦:

技术分享图片

看到自己的小站前面可以有绿色的安全字样,是不是很酷炫,而且很放心,再也不用担心运营商在自己的网站上挂广告啦,哈哈哈。。。等等,是不是还差了点什么:

对啊,还没有强制跳转https,OK,继续

 

五、强制HTTP跳转HTTPS访问

在第四步 Domain settings 再往下翻一点,可以看到 Force HTTPS,只需点击 Force HTTPS 即可实现,是不是很方便,如下图:

技术分享图片

到这里,你的网站即使用户使用http访问,也将强制跳转至https访问啦,这下可以彻底不用担下运营商给你的用户“发红包”啦!

 

六、设置redirect

利用netlify实现自动化部署和HTTPS就写到这里了,喜欢就点个赞啦。

 

手把手教你使用 netlify 实现前端的 自动部署 + HTTPS

标签:开源工具   nod   这一   command   strong   教你   选择   FQ   显示   

原文地址:https://www.cnblogs.com/codernie/p/9062104.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!