如何快速搭建静态资源服务器

前端开发中，常常遇到有些场景须要用到服务器环境，例如AngularJS中的路由，或者是模拟ajax获取数据等需求时，这个时候并不须要考虑到服务端逻辑，只是搭建简单的静态资源服务，所以解决方法有不少，下面介绍几种简单快捷的经常使用方式：

使用http-server

若是你安装了node，那么http-server就是个不错的选择，只须要一行命令就能够快速启动。
安装：

npm install -g http-server

在项目根目录执行：

http-server -a 127.0.0.1 -p 8000

使用static-server

static-server很相似http-server，也是基于node，安装和使用方法很类似：

npm install -g static-server

使用时只须要在项目目录下指定该项目的入口文件便可：

static-server -i index.html

下面是一些经常使用的选项：

-p, --port 指定端口启动
-i, --index 指定默认项目入口文件
-d, --debug 显示错误信息
-n, --not-found 指定404页面

详见：https://www.npmjs.com/package/static-server

使用Python

若是你安装了Python，那这个方法可能最简便了，只须要在该目录下执行命令:

python -m SimpleHTTPServer

这样就启动了一个静态web服务器，此时项目的根目录为执行命令时所在目录，默认端口是8000，若是须要指定端口，则加上端口号启动：

python -m SimpleHTTPServer 8080

使用Ruby

若是你安装Ruby，Ruby也提供了一个很简便的方式：

ruby -run -e httpd . -p 8888

使用Nginx

几乎全部的web应用在最终部署到Linux上时都会用到Nginx作反向代理服务器，因此颇有必要会用Nginx。
下载，解压，运行nginx.exe，在浏览器输入localhost或127.0.0.1，若是出现
Welcome to nginx!
则说明Nginx已经成功安装。

下面是Nginx经常使用到的命令：

nginx -s reload                // 从新加载nginx配置
nginx -s stop

若是你的需求只是实现静态资源服务，那么只须要以下简单配置便可：root表明项目的根目录，index表明默认的入口文件。

server {
    listen       80;
    server_name  localhost;

    location / {
        root   E:\Work\Workspace;
        index  index.html index.htm;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

这时候访问 http://localhost/index.html 就OK了。

使用json-server

若是你的需求只是想模拟ajax从后台获取数据，由于一般一个项目中前端开发和后台几乎是同时进行的，开发初期每每须要前端本身构造假数据来渲染页面，谷歌浏览器不在服务端环境下调试js，则会被视为跨域，从而致使没法获取本地json数据，要不就使用火狐浏览器，较好的解决方法是快速搭建一个JSON服务器,这个时候json-server就是个不错的选择了。

安装：

npm install -g json-server

在任意文件夹下建立一个json文件：如data.json:

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 },
    { "id": 2, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

在该目录下启动json-server来监听这个文件:

json-server --watch data.json

# 或者指定端口启动启动
json-server --watch data.json --port 3004

能够看到json-server默认建立了三个请求资源，分别对应了data.json中的key值，很方便，这个时候浏览器访问localhostL3000/db 就会看到当前data.json的数据了。

访问http://localhost:3000/comments/1 ，则能够获取到comments下id为1的json数据：

很神奇是吧，有了数据以后，可让json-server也做为静态资源的服务器，这样就没有跨域问题了。
json-server默认的静态资源（HTML,CSS,JS等）是在与json数据文件同级目录下的public文件夹中，你只须要建立一个名为public的文件夹，把静态资源放到public目录下，而后直接运行如下命令启动便可：

json-server data.json

假如咱们须要指定静态资源文件夹的位置，则能够经过指定目录来启动json-server便可，如指定静态资源为json数据同级目录的source文件夹下，则：

json-server data.json --static ./source

这样，访问http://localhost:3000/index.html 就能够成功加载到json数据了。

json-server还有不少更强大的功能，如支持模拟REST API操做等，更多的功能能够到json-server项目文档查看。

使用一些IDE

例如：HBuilder