《赖田捕手：番外篇》第 37 天：用 Netlify 布署前端网页 (二)

虽然他爱着所有的布署方式，Netlify 老爹心里有着特别中意的一种，那是他最年轻的布署方式，在 2019 年推出，仅有 2 年历史的 Netlify Dev。

～节录自《而 Netlify 的回音荡漾》

　　在上一篇的文章中，我们认识了一个新朋友 Netlify，他提供了托管前端静态网站以及後端无服务器运算的服务，对於我们这些非重度使用者而言，这些服务内容可以说是完全免费。事实上，Netlify 的好，除了近乎佛系的收费规则之外，在布署方式的设计上，他也是用心良苦。为了让程序设计师们可以更心无旁鹜的构思服务、撰写程序码，而不要花费过多的心思在 DevOps，他提供了三种相当轻松而且有趣的布署程序码的方式，分别是 Netlify Drop、Netlify Continuous Deployment、以及 Netlify Dev。上一篇文章，大家应该已经见识到 Netlify Drop 的方便与强大了，今天我们就来看看另外两种方式又会给我们带来什麽新的惊喜呢？

Netlify Continuous Deployment

　　所谓的 Continuous Deployment，持续布署，意指程序原始码一经改动，验证核可 / 测试通过之後，便会自动自发的布署到生产环境的服务器上，完全不经过人为干预。也就是说使用者拿到的，永远是最新一版程序码运作的结果。持续布署这个概念带来许多好处，诸如快速，安全、永远提供使用者最新最佳化的体验。因此在现今 Continuous Deployment 大行其道的当下，Netlify 怎麽会错过这种布署方式呢。
　　Netlify Continuous Deployment 的概念很简单，只要先把我们的程序码放到 GitHub、GitLab、Bitbucket 这三种版本控制系统上的任何一个，并且告诉 Netlify 我们程序码储存的位置，让 Netlify 可以读取这些程序码。接着，只要我们的程序码透过版本控制系统修改，Netlify 马上就会知道，并根据这些程序码重新建构静态网站 (以及无服务器运算函式)，然後发布到 Netlify 的服务器上。如此一来，就完成持续布署的循环，提供使用者最即时的内容 / 服务。
　　看我罗哩叭唆了一堆，实际上操作起来相当简单，同样的，Netlify 也在 Youtube 上提供了精彩的示范影片➀。想要完成持续布署吗？套一句漫画《死神》里面，潮男茶渡泰虎的千古名言：

「两分钟便可结束。」
　　-- 茶渡泰虎

　　大家可以一边欣赏 Netlify 发布的示范影片，一边看我在这里讲解分解动作。

1. 上传程序码至版本控制平台

　　首先把程序码放到版本控制服务平台 GitHub、GitLab、或 Bitbucket 当中。我只用过 GitHub，就先以 GitHub 为例子来示范。
　　这边是我想要发布的网站的程序码。由於前一阵子水情相当吃紧，大家对於水库的水量都非常关心，梅雨季那一周，不少人会在 Youtube 上观看石门水库即时影像，为的就是要知道雨到底有没有下在水库集水区。经济部水利署的官网上，公布有每日全台各地水库的水情资讯，我们今天要布署在 Netlify 上面的网站，就是以 React 网页框架为主，从经济部水利署上抓取 20 天份的资料後，以 Chart.js 绘制成图表的即时水情观测网站。由於网页内容并不是今天的重点，因此我没有打算要针对网页相关的程序码做过多的讲解。除了netlify.toml这个档案之外。

• netlify.toml

[build]
  publish="build"

[[redirects]]
  from = "/storage/api"
  to = "https://fhy.wra.gov.tw/ReservoirPage_2011/StorageCapacity.aspx"
  status = 200

　　这个档案算是 Netlify 专属的设定档➁。里面提供的资讯让 Netlify 在帮我们布署网站时可以很明确的知道我们的需求，诸如建构静态网站时，需要执行的指令 (Build command)、静态网站所存放的资料夹位置 (Build folder)、网站转址设定等等。
　　因为我用了 React 作为前端网页架构，在执行完 React 建构指令之後，静态网站会存放在build这个资料夹当中，所以有这麽一个项目：

[build]
  publish="build"

　　此外，还记得第 36 天当中，我们有介绍过 Netlify Redirects 这个功能。当时是将转址的相关设定写在_redirects这个档案里。而今天我们提供第二种作法：

[[redirects]]
  from = "/storage/api"
  to = "https://fhy.wra.gov.tw/ReservoirPage_2011/StorageCapacity.aspx"
  status = 200

　　看起来是不是也很一目了然呢？当使用者呼叫/storage/api这个网址时，Netlify Redirects 的代理服务器就会自动向https://fhy.wra.gov.tw/ReservoirPage_2011/StorageCapacity.aspx发出请求，并且回传相关回应。如此，就可以避免前端网页最困扰的跨来源资源共享 (CORS) 的问题。

【注】
若仍是要使用_redirects来定义转址需求，那_redirects这个档案必须要在build资料夹内才行。因为经过 React 编译过後的静态网站，会存放在build，而 Netlify 最後会发布出去的，也是存在build内的相关内容。

2. Netlify 建立新网站 (New Site from Git)

　　登入 Netlify，来到 Team overview 或是 Sites 分页，找到一个深蓝绿色的按钮【New site from Git】，如图一。

图一、New site from Git

2. 建立 Netlify 与版本控制平台的连结

　　至此，Netlify 知道我们想要从版本控制平台来进行连续布署了，下一步就是要选择我们放置程序码的版本控制平台，如图二。总共有三种可选：GitHub、GitLab、以及 Bitbucket。我的程序码是放在 GitHub 上面，因此选择 GitHub。点击下去之後，应该会跳出一个授权建立连结的视窗。没什麽好想的，如果想要建立 Netlify 与版本控制平台的连结，那就要授权。

图二、建立 Netlify 与版本控制平台的连结

3. 选择资源库

　　建立好 Netlify 与版本控制平台的连结之後，Netlify 应该可以读取到我们在该版本控制平台上发布的所有公开资源库，如图三。如果没有，可以到 GitHub 上个人帐号的配置做进一步的设定，如图四。我们可以选择让 Netlify 读取到所有的资源库，或是只读取特定几个资源库。我想要建立的网站，程序码是放在【netlify-continuous-deployment-ithome-demo】这个资料库当中，那麽就点选它。

图三、选择我们想布署到 Netlify 上面的资源库

图四、读取资源库设定

4. 设定建构参数 (Build Settings)

　　接着来到这整串步骤当中，唯一需要仔细考虑的地方：设定建构参数。如图五，我们一共有 5 个栏位要考虑。

图五、设定建构参数

• 【Owner】：
  　　这一栏应该是不须多做他想，用预设的自己的 Team 就可以了。除非大家是成立了一个团队，许多人一起维护这一个网站，那时才需要选择大家共同的 Team。

• 【Branch to deploy】：
  　　Netlify Continuous Deployment 一个非常强大的地方在於，即使是同一个资源库，也可以选择里面不同的分支 (Branch) 来当作布署的依据。这样做有什麽好处呢？未来大家事业越做越大的时候，就可以把资源库分成两个或更多的分支，一个是尚在开发的分支 (dev branch)，另一个是已经稳定可以投入生产的分支 (production branch)。我们可以让 Netlify Continuous Deployment 只根据生产分支的内容来布署网站，这样就不用担心尚在开发的内容影响到使用者的体验。在我所示范的资源库里，并没有这麽多不同的分支，因此我选 main 就可以了。

• 【Base directory】：
  　　程序码根目录的所在位置。Netlify 在建构我们的网站时，会尝试在指定的根目录当中寻找package.json或.nvmrc等相依性设定档，并根据其内容，帮我们安装需要的相依资源库。预设就是资源库的根目录。
  　　再进阶一点来说，如果我们的资源库里，存放有代表三个不同网站的程序码，也可以利用这个根目录的设定，来决定要发布哪一个网站。

• 【Build command】：
  　　建构指令。如果我们用了一些前端框架或是静态网站产生器 (Static Site Generator) 来撰写我们网站，那麽在发布之前，一定会需要一些建构指令来编译、产生静态网站。只要把相对应的建构指令填在这边，Netlify 就会自动帮我们建构并产生所需要的静态网站。

• 【Publish directory】：
  　　发布目录。真正要布署到 Netlify 服务器上，供使用者浏览的网站，其目录位置。我们选用的前端框架或静态网站产生器通常就直接定义了我们的建构指令以及发布目录。以我为例，如果我要用 React 这个前端框架来撰写网站，那我的建构指令就是npm run build，而 React 在建构好网站之後，会把最终的静态网站放在build这个资料夹当中，因此发布目录就是build。不同的前端框架或静态网站产生器所需要的 Build command 和 Publish directory 可以参考 Netlify 的官方文件➂。
  　　再进阶一点来说，如果我们前面已经指定一个根目录 (非资源库的根目录)，那发布目录当中也要把这个根目录一起写进来。也就是说，这个发布目录，必须要写成相对资源库根目录的位置。如果我们的根目录是dist，那发布目录必然是dist/build这一类的。

　　除了这五个栏位之外，还有一些更进阶的建构参数可供调整，大家可以参考 Netlify 官方文件的内容➃。

5. 开始布署

　　建构参数设定无误之後，按下【Deploy site】，Netlify 就会开始帮我们建构并布署网站罗。

图六、网站建构中

图七、Netlify 布署日志 (Deploy log)，若布署失败，可以参考布署日志的内容作调整

图八、享受 Netlify Continuous Deployment 为我们带来的即时水情讯息！

6. 後续设定

　　利用 Netlify Continuous Deployment 将网站发布出去之後，心里应该满满成就感。趁这个时候我们再多讲一件事。

• 【Custom domains】：
  　　利用 Netlify Continuous Deployment 发布网站，Netlify 会随机给我们一串文字、数字组合而成的网站名称。以我刚才发布的网站为例，我拿到的是nervous-yonath-ec2fda。很怪，对吧？也许一开始并不在意，但当我们在 Netlify 上面发布越来越多网站，你会开始分辨不出来什麽是unruffled-wescoff，什麽是wizardly-newton。利用改变次网域名 (subdomain name)，我们可以为我们的网站冠上更有代表性的名称。
  　　点选【Site settings】->【Domain management】，如图九，就可以看到跟网域名称相关的设定。点选【Options】->【Edit site name】，就可以更改我们的次网域名。

图九、更改次网域名

Netlify Dev

　　再来要介绍的最後一样布署方式，是 Netlify Dev。这项布署方式的诞生，起因应该是程序设计师们希望在程序码上传到 Netlify 执行布署之前，在自己手边的本机端先跑一遍，看看状况如何，有没有任何问题，接着才连接到 Netlify 上，让 Netlify 帮忙建构静态网页并布署到各地。而 Netlify 也很慷慨的实现这一个愿望，将自己的 Build Bot 透过 Netlify CLI 提供给程序设计师，让我们能够在本机端先模拟一遍 Netlify 建构网站的情形，再决定是否要发布或修改。
　　Netlify Dev 的概念大概就是如此。执行起来可能有些地方需要注意，我们就按照流程一件一件看：

1. npm install netlify-cli –g

　　为了能够执行 Netlify Dev，我们要先在本机端安装好 Netlify CLI (Netlify 命令列介面)➄。开启命令提示字元并输入：

npm install netlify-cli -g

　　开始安装 Netlify CLI。如此一来，我们就可以使用 Netlify CLI 提供的各式工具。
　　当然，为了执行npm指令，我们要确认系统中已经安装好 Node.js。

2. npm install

　　来到我们想要发布到 Netlify 的资料夹当中。这边我就一样用前面的即时水情观测网站为例子：

netlify-dev-demo
├───netlify.toml
├───package.json
├───.gitignore
├───public
│       index.html
│
└───src
    │   App.js
    │   createBody.js
    │   index.js
    │
    └───components
            ConditionSelector.js
            StorageChart.js

　　来到netlify-dev-demo资料夹当中，将需要的模组 (若还没安装) 安奘好：

npm install

　　输入这个指令，系统会按照package.json的内容安装所需的模组，完成之後会在根目录下多出一个装有所有相依模组的资料夹node_modules。

3. netlify init

　　到了这个阶段，我们所有的档案都准备好了，可以开始进行发布的动作了：

netlify init

　　输入netlify init之後，我们会依序回答几个问题，包括

• 这个 Netlify 网站是否要跟 git 资源库进行连接
• 选择这个 Netlify 网站所属的 Team
• 输入这个 Netlify 网站的网站名称 (Site name，同时也是 Subdomain name)

　　在这一次的发布示范里，我并不打算用放在 GitHub 资源库当中的程序码当作网站来源，而是想用本机端的程序码，因此第一个问题我选> Yes, create and deploy site manually。其他可以自由设定。
　　全部完成之後，看起来会像这样，并且得到 Site ID，和一串说明文字：

? Do you want to create a Netlify site without a git repository? Yes, create and deploy site manually
? Team: githubmhjao's team
Choose a unique site name (e.g. netlify-thinks-githubmhjao-is-great.netlify.app) or leave it blank for a random name. You can update the site name later.
? Site name (optional): netlify-dev-for-ithome-demo

Site Created

Admin URL: https://app.netlify.com/sites/netlify-dev-for-ithome-demo
URL:       https://netlify-dev-for-ithome-demo.netlify.app
Site ID:   795f54ef-50de-4df5-8a7d-a0fe9ece7ae1
"netlify-dev-for-ithome-demo" site was created

To deploy to this site. Run your site build and then netlify deploy

　　这麽一来，我们的网站的初始化工作算是基本完成 (但还没有发布到 Netlify 服务器上面)。

4. netlify dev

　　这就是现在要介绍的 Netlify Dev。只要利用这一个指令：

netlify dev

　　我们就可以让 Netlify CLI 在本机端模拟发布到 Netlify 服务器上的情形，模拟完成後，这个网站会在我们本机端的服务器上运作，如图十。如果有任何错误或是想要调整的地方，还可以利用这个机会先做修改。不用紧张，网站还远远没有发布出去。

图十、 Netlify Dev 让我们的网站发布到 localhost:8888

图十一、netlify dev：Site has not yet been deployed

5. netlify dev --live

　　没有发布出去的网站，可以让我们在本机端慢慢琢磨，那也可以分享给好朋友们一起欣赏吗？没问题，请使用：

netlify dev --live

　　如此一来，就会产生一串结尾是.netlify.live的网址，并将网站先放到 Netlify 上面。而我们也可以将这个网址方想给亲戚朋友们，让他们抢先一睹开发中的网站的状况。那麽网站发布出去了吗？答案是还没。

图十二、netlify dev --live：Site has not yet been deployed

6. netlify deploy

　　若看起来没问题，就可以用netlify deploy将我们的网站发布到 Netlify 上面了。和 Netlify Continuous Deployment 不同，若是在 Netlify CLI 当中，使用手动发布 (manual deploy)，那我们必须要先把该编译的都编译好，把静态网站先做出来：

npm run build
netlify deploy

　　因为我是用 React 来写的，所以先用npm run build把静态网站做出来，接着用netlify deploy把这个静态网站上传到 Netlify。完成之後，我们会拿到一个草稿网址 (Draft URL)，看起来很像是最後由 Netlify 服务器发布出来供使用者浏览的网址，但前面多了一串乱码。那麽，我们的网站正式发布出去了吗？还没。

图十三、netlify deploy：Site has not yet been deployed

7. netlify deploy --prod

　　最後的最後，要将网站透过 Netlify 服务器发布给使用者，我们要用的指令是：

netlify deploy --prod

　　要真正将网站发布出去，要加上一个标志 (flag)：--prod。
　　这时我们会拿到一个【Unique Deploy URL】，以及【Website URL】。前者是代表每一次布署的纪录，後者则是我们放在公开环境下，使用者可以浏览的网址。

图十四、netlify deploy --prod：Manual deploys

　　怎麽样？Netlify 提供的服务相当仔细又贴心吧！

　　好的，经过两篇文章，我们应该对 Netlify 越来越熟悉了，包括该怎麽发布网站，该怎麽设定参数等等。这两篇文章我们都还只是着重在前端静态网站的布署。要让 Line Bot 布署到 Netlify，我们需要的是另一种服务：後端无服务器运算。下一篇文章开始，我们就会来介绍如何使用无服务器运算 Netlify Functions 做一个免费又强大的 Line Bot。

参考资料

➀ Netlify Continuous Deployment 两分钟影片
➁ netlify.toml 官方说明文件
➂ Netlify 常用建构配置设定介绍
➃ Netlify 建构设定介绍
➄ Netlify CLI 官方文件
➆ 即时水情观测 GitHub 原始码 以及 Live demo on Netlify