最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

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

XAMPP教程 中文小张 996浏览 0评论

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

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

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

该集成环境 WindowsOS XLinux 多平台持续更新哈~

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

一、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 所在行后面的 ConfigApache (httpd.conf),打开 Apache 主配置文件 httpd.conf

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

该目录将作为服务器的根目录使用。默认情况下,在浏览器中输入http://localhosthttp://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 地址与端口,端口默认为 80IP 只要是内部回送地址就 OK,但不要用 127.0.0.1,这个是给根目录预留的哈,简单将一下其中的参数:

 

DocumentDirectory 和根目录配置一样,指虚拟主机所指向的目录。这里在 Directory 中重写了可选命令‘-Indexes’,代表目录中没有索引文件的时候禁止显示文件列表;

ServerName – 虚拟主机名称,备注一样的存在~

DirectoryIndex – 目录索引文件,就是首页入口 index.htmldefault.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 即可启动!~\(≧▽≦)/~

推荐将 ApacheMySQL(如果你需要的话)安装为系统服务,这样每次系统启动的时候就会自动加载主机服务,免去了手动启动的麻烦,依次点击每行最前面的大红叉即可安装为系统服务。

七、赶紧写个栗子测试一下吧~

1. 写个 index.html 放入虚拟主机所在目录(即上文中的 D:/DinoWeb/HelloWorld

2、直接在浏览器地址栏中输入 Hosts 配置中所填的虚拟域名( )即可直接访问!

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

转载请注明:XAMPP中文组官网 » 前端必备技能——本地服务器的搭建&配置

您必须 登录 才能发表评论!