分享几款web开发中的本地服务器

有时候，在开发某些功能时，需要模拟服务器来展示功能时，这时候我们就需要用到本地服务器来模拟。又或者在开发完成后，我们在发布网站之前都会在本地服务器上运行，测试一下网站的功能和效果的展现,测试完成后再上传到购买的主机空间正式上线使用。

那么，有什么软件或者什么插件之类的可以模拟本地服务器呢？接下来就介绍几款优秀的web本地服务器。
（以下环境基于MAC的OS X下，与Windows配置相差不大）

XAMPP / WAMPP

XAMPP 顾名思义 (Apache+MySQL+PHP+PERL)

XAMPP是利用Apache服务，能够模拟本地服务器可以取到PHP文件从而获取MySQL文件，就是说可以自己新建PHP后台文件和JSON数据文件，可以模拟一些像利用AJAX请求，向后台拿到数据，完成一个完整的请求。

下载地址：https://www.apachefriends.org/download.html

XAMPP.png

下载完成后可以看到以下的界面，点击star，在浏览器输入 http://localhost/ 就能看到首页了。

XAMPP默认的根目录是/Applications/XAMPP/xamppfiles/htdocs，把文件夹(yourProject)拖到htdocs，在浏览器输入http://localhost/yourProject，但是这样相当麻烦，这就需要配置根目录了。

配置XAMPP根目录

在XAMPP软件界面点击Manage Servers → Configure → Open Conf File 点击 YES 进入 httpd.conf文件，
command+F 搜索 “docs”，找到 DocumentRoot 和 Directory

xampp1.png

改成自己想要的目录就可以了。

我的文件夹为/Users/liangyongxin/desktop/mydemo

还有配置主机和站点这里就不多说了。各位可以百度一下。

http-server

一款基于Node.js的命令行http服务器，利用node.js开启本地服务，下载前请先自行下载node服务。

node地址：https://github.com/nodejs/node

安装方式：
​
npm install http-server -g

启动方法，直接在所在项目文件夹下开启服务：

http-server -open
hs -o  //简写也可以

http-server 地址：https://github.com/indexzero/http-server

browser-sync

一款可以让你省时的浏览器同步测试工具，开启服务后，pc端、手机端同步更新，快速查看测试效果。而且是完全免费的。

官方中文网：http://www.browsersync.cn/

github地址：https://github.com/BrowserSync/browser-sync

安装方式：
​
npm install -g browser-sync

启动方式，直接在所在项目文件夹下开启服务：

// --files "路径是相对于运行该命令的项目（目录）" 
browser-sync start --server --files "dist"

// 监听css文件 
browser-sync start --server --files "css/*.css"
// 监听css和html文件 
browser-sync start --server --files "css/*.css, *.html"

具体监听可查看官网
，有详细例子解释。一般监听整个项目文件夹。
​

总结：

开启本地服务后，系统会自动生成一个本地地址和一个外网地址

http.png

此时可以使用手机打开外网地址就可查看（可能需要同一wifi下）。

一般来说，使用以上几个本地服务器就足够了。
​