前端必备技能——本地服务器的搭建&配置

虽说各种前端 Build system 均有各自的静态服务器插件提供使用，但是每次使用均需要反复启动并长时间占用一个 Terminal 窗口，并不是很方便。

对于需要长期开发和维护的项目，搭建一个持续稳定的本地服务是很有必要的。

本篇文章就简单介绍一下本地服务器的搭建与配置。

这里推荐使用集成环境 XAMPP ，选择它的主要原因是因为有比较友好的控制面板哈，此外后端开发我目前一直在使用 PHP 。
该集成环境 Windows、OS X、Linux 多平台持续更新哈~

下载完对应平台的安装包我们就开始吧！

XAMPP 安装组件的选择
这里要简单讲一下 Windows 平台安装时的组件选择，Linux 用户可以跳过~，OS X 不太清楚哈
- Apache 服务器组件是必选的哈，不介绍了。由于偶尔会写一点后端代码，所以我这里把 MySQL 数据库也装上了，下边的 PHPMyAdmin 是用来管理数据库的，这个集成环境的 PHP 也是必选的哈，目前已经更新到7.0.9了，据说比5快一倍2333~
- FileZilla 是个 FTP 服务器、Mercury 是邮件服务器，含义简单明了，不过对于用来测试的本地服务器来说用处都不大。
- Tomcat 如果有喜欢使用 JSP 的后端同学可以把 Tomcat 也勾选上~
- Perl 通用脚本语言，这么火没用过肯定也听说过哈
- Webbalizer 日志分析系统
- Fake Sendmail 支持 PHP 发邮件的组件
  
  组件选择完之后就可以一路 Next 下去嘞,直到安装完成
修改服务器根目录指向
依次点击 XAMPP 控制面板上 Apache 所在行后面的 Config → Apache (httpd.conf)，打开 Apache 主配置文件 httpd.conf。

这里主要讲一下本地服务器根目录的设置，将 DocumentRoot 与 Directory 的路径改为你常使用的工作目录，如这里改成‘D:/DinoWeb’。

该目录将作为服务器的根目录使用。默认情况下，在浏览器中输入 http://localhost 或 http://127.0.0.1 将直接访问到这个目录

Directory 中还有一些可选参数，简单介绍一下：
- Options：可选指令集，多个值以空格分隔，值前可用 ‘+’/‘-‘ 表示从父目录继承指令后对所继承指令的增删，可选值‘None’、‘All’或以下组合：
  - Indexes - 无 index.html/index.htm/index.php 等文件时是否列出文件目录
  - FollowSymLinks - 在该目录中，服务器将跟踪符号链接
    
    符号链接：Linux 系统中文件的快捷方式，在该目录中可以建立符号链接，以访问其他目录中的文件，配置此项以减少 Apache 调用其他系统函数检测符号链接。
  - Includes - 开启 SSI（即让 html 文件也支持相互 include）
  - ExecCGI - 准许使用 CGI
  - 更多… （偷个懒，其他就不写了哈~）
- AllowOverride：是否支持 url rewrite，值为 All 时则访问服务器时会读取目录下 .htaccess 文件以重写 url；
  
  粗暴点解释就是：浏览器访问 a.html 文件通过 .htaccess 处理之后实际上给你的是 balabala.html 的内容，但浏览器地址栏中显示的还是 a.html，目录重写同理。
- Require all granted/denied：是否允许访问。
虚拟主机的配置
为了更好地模拟真实的运行环境，一般推荐为每个项目配置一个独立的虚拟主机，而不是通过子目录的形式进行访问（例： http://localhost/myobject1 ），使用 http://myobject1.local 进行访问更加优雅自然~
1. 首先检查 httpd.conf
  主配置文件中是否加载了虚拟主机配置文件，找到如下配置
  1
  Include conf/extra/httpd-vhosts.conf
  若该行使用‘#’号被注释，记得去掉‘#’号以加载虚拟主机配置文件。
2. 然后配置httpd-vhosts.conf
  依次点击 XAMPP 控制面板上 Apache 所在行后面的 Config → [Apache]，打开 Apache 所在文件夹，打开 /conf/extra 目录中的 httpd-vhosts.conf 虚拟主机配置文件。在文件末尾加上自己的虚拟主机配置：
  
  VirtualHost 指定了一个虚拟主机的 IP 地址与端口，端口默认为 80，IP 只要是内部回送地址就 OK，但不要用 127.0.0.1，这个是给根目录预留的哈，简单将一下其中的参数：
  - Document 与 Directory 和根目录配置一样，指虚拟主机所指向的目录。这里在 Directory 中重写了可选命令‘-Indexes’，代表目录中没有索引文件的时候禁止显示文件列表；
  - ServerName - 虚拟主机名称，备注一样的存在~
  - DirectoryIndex - 目录索引文件，就是首页入口 index.html、default.html 之类；
  - ErrorLog - 异常日志
  - CustomLog - 使用 httpd.conf 中默认声明的 common 日志格式来记录访问日志（说白了就是普通的访问日志不必记录的那么详细，简单点记就够用了）
设置本地 Hosts
打开系统盘 /Windows/System32/drivers/etc 目录中的 Hosts 文件，在文件最末加上如下回送 IP 指向（类似小的 DNS 系统~）：
1
127.0.0.2 hello.local
127.0.0.2 - 上文配置虚拟主机时 VirtualHost 的回送 IP
hello.local - 虚拟域名（类似于 localhost，名称随你喜欢想怎么起就怎么起~）
将 Apache&MySQL 安装为系统服务并启动
所有的配置完成后就可以启动服务了，点击每行 Action 中的 Start 即可启动！~(≧▽≦)/~

推荐将 Apache 与 MySQL（如果你需要的话）安装为系统服务，这样每次系统启动的时候就会自动加载主机服务，免去了手动启动的麻烦，依次点击每行最前面的大红叉即可安装为系统服务。
赶紧写个栗子测试一下吧~
1. 写个 index.html 放入虚拟主机所在目录（即上文中的 D:/DinoWeb/HelloWorld）
2. 直接在浏览器地址栏中输入 Hosts 配置中所填的虚拟域名（即上文的 http://hello.local ）即可直接访问！