[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)