靜態資源伺服器(部署前端專案)
前端開發中,經常遇到有些場景需要用到伺服器環境,例如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
使用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;
}
}
使用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