[TOC] # 簡介 前端開發中，經常遇到有些場景需要用到服務器環境，例如AngularJS中的路由，或者是模擬ajax獲取數據等需求時，這個時候并不需要考慮到服務端邏輯，只是搭建簡單的靜態資源服務，因此解決方法有很多，下面介紹幾種簡單快捷的常用方式： # Server.js https://serverjs.io/ server.js for Node # polka https://hub.fastgit.org/lukeed/polka # live-server https://github.com/tapio/live-server ~~~ npm install -g live-server ~~~ # serve https://github.com/zeit/serve 運行下列命令安裝 serve ```shell $ npm install –g serve ``` 使用 serve 的典型語法是： ```shell $ serve [options] <path-to-files-or-folders> $ serve -o Documents/ /*自動打開本地地址，請使用`-o`標志。*/ $ serve -p 1234 Documents/ /*將通過端口1234*/ $ serve Documents/Papers/notes.txt /*想提供文件而不是提供文件夾*/ $ serve -i Downloads/ /*除Downloads目錄以外*/ $ serve -l Documents/ /*只能本地用戶訪問，不能使用ip地址訪問。*/ $ serve --ssl Documents/ /*通過https訪問*/ $ SERVE_USER=ostechnix SERVE_PASSWORD=123456 serve --auth /* 現在用戶需要輸入用戶名（即本例中的ostechnix）和密碼（123456）來訪問這些共享內容。*/ $ serve help /*其他功能查看幫助*/ ``` 同樣，想通過網絡從遠程系統訪問共享目錄，請在瀏覽器的地址欄中輸入`http://192.168.43.192:5000`。把`192.168.43.192` 換成你系統的IP地址。 # json-server https://www.npmjs.com/package/json-server 想模擬ajax從后臺獲取數據，因為一個項目中前端開發和后臺幾乎是同時進行的，初期往往需要前端構造假數據來渲染頁面，較好的解決方法就是使用 json-server 快速搭建一個JSON 服務器。 安裝： ```shell yarn global add 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 來監聽這個文件: ```shell 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 目錄下，然后直接運行以下命令啟動即可： ```shell json-server data.json ``` 假如我們需要指定靜態資源文件夾的位置，則可以通過指定目錄來啟動 json-server 即可，如指定靜態資源為 json 數據同級目錄的source文件夾下，則： ```shell json-server data.json --static ./source ``` 這樣，訪問就可以成功加載到json數據了。 json-server 還有很多更強大的功能，如支持模擬 REST API 操作等。 # http-server [http-server](https://github.com/indexzero/http-server) 也是個不錯的選擇，只需要一行命令就可以快速啟動。 安裝： ~~~ yarn global add http-server http-server -a 127.0.0.1 -p 8000 ~~~ # [static-server](https://www.npmjs.com/package/static-server) static-server 很類似 http-server，安裝和使用方法很相似： ~~~ yarn global add static-server ~~~ 使用時只需要在項目目錄下指定該項目的入口文件即可： ~~~ static-server -i index.html //-p, --port ~~~ # Python 這個方法可能最簡便了，只需要在當前目錄下執行一下 Python 命令: ~~~ python -m SimpleHTTPServer ~~~ 這樣就啟動了一個靜態 web 服務器，此時項目的根目錄為當前目錄，默認端口是 8000，如果需要指定端口，則加上端口號啟動： ~~~ python -m SimpleHTTPServer 8080 ~~~ # Nginx 幾乎所有的 web 應用在最終部署到 Linux 上時都會用到Nginx 做反向代理服務器，所以很有必要會用 Nginx。 下載，解壓，運行 nginx，在瀏覽器輸入`localhost`或`127.0.0.1`，如果出現 ``` Welcome to nginx! ``` 則說明Nginx已經成功安裝。 下面是Nginx常用到的命令： ```shell 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; } } ``` 即可！ # 其他 VSCode 編輯器的一些擴展就有serve功能哦~，例如[LiveServer](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)