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

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

 

1、使用github或者gitlab登录netlify

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

 

 

 

 

 

 

 

而后使用github或者gitlab帐号登陆。

 

2、根据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 按钮

 

3、设置域名，绑定域名

进行完第二步，咱们能够看到自动化部署已经开始运行了，并且过很少久，咱们的网站就已经能够利用netlify域名就行访问了，以下图：

能够看到netlify为咱们随机生成了一个netlify下的域名，这里咱们能够更改其前缀，并绑定到咱们本身的域名下：

>> 更改netlify域名前缀：

首先，点击上图中 Site settings 按钮，而后在下方点击 Change site name 按钮，而后在弹出框中输入本身须要更改的前缀名，点击保存便可，以下图所示：

>> 绑定到本身的域名下：

首先，点击上上图中 Domain settings 按钮，而后在下方点击 Add custom domain 按钮，而后在弹出框中输入本身须要绑定的完整域名，点击保存，以下图所示：

这个时候会显示 ！Check DNS configuration，由于咱们尚未设置域名解析到netlify服务器，因此这个时候须要到你本身域名的相应服务商网站登陆以后在须要绑定的域名下添加一条CNAME解析，解析的主机记录即对应的netlify域名值（这里即 codernie.netlify.com）

ok，过一下子就可使用本身的域名访问本身的网站啦

 

4、生成HTTPS证书，实现HTTPS访问

第四部中的Domain settings 中往下拉，能够看到 HTTPS 几个大字母：

点击 Verify DNS configuration 按钮，待它变成下方绿色按钮以后，再点击：

而后在弹出框中点击确认，过一下子以后就可使用https访问你的小站啦：

看到本身的小站前面能够有绿色的安全字样，是否是很酷炫，并且很放心，不再用担忧运营商在本身的网站上挂广告啦，哈哈哈。。。等等，是否是还差了点什么：

对啊，尚未强制跳转https，OK，继续

 

5、强制HTTP跳转HTTPS访问

在第四步 Domain settings 再往下翻一点，能够看到 Force HTTPS，只需点击 Force HTTPS 便可实现，是否是很方便，以下图：

到这里，你的网站即便用户使用http访问，也将强制跳转至https访问啦，这下能够完全不用担下运营商给你的用户“发红包”啦！

 

6、设置redirect

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