如何快速搭建靜態資源服務器

前端開發中，常常遇到有些場景須要用到服務器環境，例如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