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

时间：2023-07-16 03:03:01 | 来源：网站运营

时间：2023-07-16 03:03:01 来源：网站运营

前端必备技能——本地服务器的搭建&配置：虽说各种前端 Build system 均有各自的静态服务器插件提供使用，但是每次使用均需要反复启动并长时间占用一个 Terminal 窗口，并不是很方便。

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

本篇文章就简单介绍一下本地服务器的搭建与配置，这里推荐使用集成环境 XAMPP ，选择它的主要原因是因为有比较友好的控制面板哈，此外后端开发我目前一直在使用 PHP 。

该集成环境 Windows、OS X、Linux 多平台持续更新哈~

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


一、XAMPP 安装组件的选择

　　这里要简单讲一下 Windows 平台安装时的组件选择，Linux 用户可以跳过~，OS X 不太清楚哈

1. Apache 服务器组件是必选的哈，不介绍了。由于偶尔会写一点后端代码，所以我这里把 MySQL 数据库也装上了，下边的 PHPMyAdmin 是用来管理数据库的，这个集成环境的 PHP 也是必选的哈，目前已经更新到7.0.9了，据说比5快一倍2333~
2. FileZilla 是个 FTP 服务器、Mercury 是邮件服务器，含义简单明了，不过对于用来测试的本地服务器来说用处都不大。
3. Tomcat 如果有喜欢使用 JSP 的后端同学可以把 Tomcat 也勾选上~
4. Perl 通用脚本语言，这么火没用过肯定也听说过哈
5. Webbalizer 日志分析系统
6. 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 中还有一些可选参数，简单介绍一下：


1. Options：可选指令集，多个值以空格分隔，值前可用 ‘+’/'-' 表示从父目录继承指令后对所继承指令的增删，可选值‘None’、‘All’或以下组合：

　　① Indexes - 无 index.html/index.htm/index.php 等文件时是否列出文件目录

　　② FollowSymLinks - 在该目录中，服务器将跟踪符号链接

符号链接：Linux 系统中文件的快捷方式，在该目录中可以建立符号链接，以访问其他目录中的文件，配置此项以减少 Apache 调用其他系统函数检测符号链接。

　　③ Includes - 开启SSI（即让 html 文件也支持相互 include）

　　④ ExecCGI - 准许使用 CGI

　　⑤ 更多... （偷个懒，其他就不写了哈~）

2. AllowOverride：是否支持 url rewrite，值为 All 时则访问服务器时会读取目录下 .htaccess 文件以重写 url；

粗暴点解释就是：浏览器访问 a.html 文件通过 .htaccess 处理之后实际上给你的是 balabala.html 的内容，但浏览器地址栏中显示的还是 a.html，目录重写同理。

3. Require all granted/denied：是否允许访问。

三、虚拟主机的配置

　　为了更好地模拟真实的运行环境，一般推荐为每个项目配置一个独立的虚拟主机，而不是通过子目录的形式进行访问（例： http://localhost/myobject1），使用 http://myobject1.local 进行访问更加优雅自然~

　　1. 首先检查 httpd.conf 主配置文件中是否加载了虚拟主机配置文件，找到如下配置

Include conf/extra/httpd-vhosts.conf　　若该行使用‘#’号被注释，记得去掉‘#’号以加载虚拟主机配置文件。

　　2. 然后，依次点击 XAMPP 控制面板上 Apache 所在行后面的 Config → <Browse> [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 系统~）：


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）即可直接访问！

八、现在你已经有了一个自己配置的本地服务器了！赶快试一下吧！！为你的每个项目配置一个独立的虚拟主机~



OVER.