搭建本地服务器的方法小结

　　学习前端，搭建一个本地服务器用来测试代码还是很重要的，不仅可以避免使用Chrome浏览器时，出现不支持File协议的Ajax请求的大坑（Firefox是支持的），还能够用来测试移动端的情况。下面通过搜索互联网上的资料，总结了五个搭建本地服务器的方法。

　　1、SublimeServer

　　我平时使用的编辑器是Sublime text3，而SublimeServer则是Sublime text的一款插件，安装后运行即可使用。注意，安装插件之前需要先安装Package Control。Sublime text 3的Package Control的安装方法如下：

　　点击View->Show Console打开控制台（快捷键Ctrl+`），在控制台中复制如下代码回车即可安装Package Control。若不成功，自行搜索下载安装文件手动安装方法。Package Control安装方法

安装完毕后点击Preferences->Package Control，在弹出来的窗口中输入Install Package回车，再在输入框中输入SublimeServer搜索，回车或点击安装。安装完成后，在Sublime text中打开整个文件夹，点击Tools->SublimeServer->start SublimeServer，本地服务器开启。在需要打开的页面中，右键点击View in SublimeServer就可以在浏览器访问到本地服务器了，使用Chrome也可以支持本地文件的Ajax请求。注意，该方法仅适合静态页面。

2、Tomcat服务器

MAC配置Tomcat方法此为MAC配置方法，windows配置方法不再赘述，到以下地址下载后再自行配置。

　　下载安装Tomcat服务器即可。下载地址为：http://tomcat.apache.org。

　　下载安装完成后，运行Tomcat并启动服务器，访问地址，若能成功显示服务器，则表示服务器开启成功。将项目文件放在Tomcat安装目录的webapps目录下，浏览器中输入http://localhost:8080项目地址，即可访问。将Tomcat配合eclipse使用可以访问动态页面。

将前端项目转换为动态的web项目，随后端项目一起丢入tomcat，即可运行前后端

这个方案省去了在本地安装和配置nginx，但是也只适用于开发阶段项目的部署运行和调试，真正在生产环境通常前后端项目会部署在不同的服务器。

• 如果是Intellij Idea,在导入前端项目之后，右键项目 add framework support --> web application，这时将会把前端项目转换为一个javaweb项目，然后将静态资源放在生成的web目录下即可。
• 如果是eclipse，可以新建一个javaweb项目然后将静态资源放入web或者webcontent目录下，或者直接先导入前端项目，然后通过 project facts 将项目转换为dynamic web项目并勾选 js等相关配置。

然后，运行项目时把后端的war包和前端的war包一同添加到 deployment中运行即可。

　　3、Node.js

　　使用Node.js搭建本地服务器需要先安装Node.js，安装地址为：https://nodejs.org/en/。并且建立一个server.js文件，简单版代码如下：

windows下快速搭建nodeJs本地服务器

MAC搭建本地服务器

　　将项目文件和server.js文件放在设置的根目录下，运行命令处理程序，输入node 根目录名\server.js，出现如下图的“服务器开启成功”后（若出现防火墙，选择允许访问），同样在浏览器中输入地址http://localhost:设定的端口号/项目地址，即可访问。

　　4、Window系统自带的IIS功能

　　此方法我没有尝试，具体实现可以自行搜索，仅限于Window系统使用。

　　5、XAMPP软件

　　XAMPP是集Apache+MySQL+PHP+PERL为一体的建站集成软件包，下载地址为：https://www.apachefriends.org/zh_cn/index.html。本地服务器是它的其中一个功能，安装完成后，可根据此教程建立服务器。教程为：https://www.jianshu.com/p/27e7a9ab5976。相似的软件还有WAMP，同样也是一款集成软件。

　　以上的方法除了访问地址http://localhost:8080（或其他端口号）/x项目地址外，将localhost：端口号改为本机的IP地址，同样可以访问，使用移动设备访问时就需要用IP地址的方法。