一条命令开启一个 WebServer

第三阶段的内容 重学网络编程（HTTP、TCP、WebServer）通过 WebServer 来逐步学习网络相关内容，整个知识是一个闭环。今天主要内容是学习 WebServer 的基本使用。

在第二阶段结束的时候，我们布置一个实践内容 用前端仿写朋友圈 。你完成了吗？如果你已经完成，非常不错，今天的内容会让你的朋友圈锦上添花。

好不容易写好了一个朋友圈，哪么如何才能在手机上查看？

在很早以前我写 Hybrid 系列文章的时候，介绍过在 Mac 上如何开启一个 WebServer，把写好的页面部署到 WebServer 上并可以通过 「ip+端口」 的形式访问。我们讲两种方法来开启 WebServer。

mac 自带的 WebServer

mac 自带了一个 WebServer Apache，可以使用命令来开启关闭 WebServer：

开启 apache: sudo apachectl start重启 apache: sudo apachectl restart关闭 apache: sudo apachectl stop

打开终端窗口，输入  sudo apachectl start，便可以开启 webServer，在浏览器中输入 127.0.0.1 。 会打开一个默认的网页： It works。

把第二阶段的实践内容放到 /Library/WebServer/Documents 这个目录下。实践代码可以在 https://github.com/lefex/FE 自行下载。代码在：/FE/第二阶段/作业/rensq/moments 这个目录下。这是 @rensq 实现的朋友圈，当然你可以把自己的实现放到这个目录下，便可以通过 127.0.0.1 这个 ip 地址来访问具体的页面，最终目录结构如下：

在浏览器中输入：http://127.0.0.1/index.html 便可以访问朋友圈网页。效果如下：

在 /Library/WebServer/Documents 下的所有文件都可以访问，也就是说这个目录下的文件都可以通过浏览器进行访问。你可以试试输入：http://127.0.0.1/images/qrcode.png 。

总的来说在 Mac 上开启一个 WebServer 并不难，但是对于我们这一阶段的学习非常不利，这个请求过程比较黑盒，我们想要知道各个阶段的具体实现。所有我们需要通过其它方式来启动一个 WebServer，方便查看源码。这就不得不介绍另一个工具 FIS3。

FIS3

FIS3 , 为你定制的前端工程构建工具。解决前端开发中自动化工具、性能优化、模块化框架、开发规范、代码部署、开发流程等问题。

通俗地讲它就是一个工具，服务于前端项目。我们今天的重点是 WebServer，而 Fis3 提供了一个默认的 WebServer，非常好用，而且简单。首先需要安装 Fis3。

安装 Fis3 前需要安装 Node，它的出现对前端开发来说是「颠覆性」的，使得 JavaScript 可以用来开发 Sever，而且它的生态十分强大，很多功能一个中间件即可搞定。Node 自身提供了 HTTP 模块，而且开源，这就使得我们后续学习 HTTP 协议提供了很大的参考价值。可以到 Node 官网下载安装 https://nodejs.org/zh-cn/。

Node 使用 npm（node package manager）来管理第三方代码，可以理解为 iOS 中的 pod。安装 Node 后，npm 会自动被安装。安装完 Node 后，在终端输入命令测试是否安装成功：

wsyMac:WebServer wsy$ node -vv8.2.1wsyMac:WebServer wsy$ npm -v5.3.0

通过 npm 来安装 Fis3 ，在终端执行命令：

npm install -g fis3

如果安装过程中出现问题，可以参考 http://fis.baidu.com/fis3/docs/beginning/install.html 。

到此所有需要安装的工具都准备就绪 。下面通过 Fis3 来开启一个 WebServer，达到与 mac 的 WebServer  同样的效果。同样以第二阶段的实践内容为例，进入 /FE/第二阶段/作业/rensq/moments 这个目录 执行：


1.通过 fis3 server start 开启 WebServer；

2.通过 fis3 release 把相关代码部署到 WebServer；

3.根据提示在浏览器输入 http://127.0.0.1:8080/；

➜  moments git:(master) fis3 server start
 [INFO] Currently running fis3 (/usr/local/lib/node_modules/fis3/)
 Starting fis-server .. at port [8080]
 [INFO] Browse http://127.0.0.1:8080/
 [INFO] Or browse http://192.168.8.107:8080/
➜  moments git:(master) fis3 release
 [INFO] Currently running fis3 (/usr/local/lib/node_modules/fis3/)
 Ω ....... 56ms➜  moments git:(master)

大功告成，具体效果如下：

通过 fis3 server open 可以打开 WebServer 所在目录。效果如下：

更多关于 Fis3 的内容可以看官方文档。相信你和我一样比较好奇，为什么通过 ip + 端口就可以访问 WebServer 下的内容呢？想了解具体的原理，我们不得不一步一步来探索 Fis3 的实现。

讲了这么多那么 WebServer 究竟是个什么东西呢？我觉得可以把它粗略地看做是一个通过 HTTP 协议访问网络资源的服务。也就是说网络中有一些资源，比如网页、图片、文件，这些资源可以通过 HTTP 协议来访问，WebServer 维护了一个服务给这些 HTTP 做出响应。

总结

上面介绍了两种方式来启动 WebServer。我们的重点并不是学习如何启动一个 WebServer，而是学习它的原理。Fis3 是我们学习 HTTP 和WebServer 的一个突破口，我们会顺着这条线索逐步深挖它的具体实现。其实 Fis3 中的 WebServer 是基于 Express 这个 Web  框架来实现的，我们客户端请求的 Server 接口可以通过它来实现。下一节内容我们通过它来实现一个接口。大家加油！！！

今天的打卡指令（任选一条）：

1.谈谈你对 WebServer 的理解，在实际工作中有没有使用过 ？

2.直接打卡；

3.WebServer 和 HTTP 有什么关系，谈谈你的看法？

---

推荐阅读：
第三阶段 - 重学网络编程（HTTP、TCP、WebServer）
前端从0到1：一二阶段内容汇总