python前端开发服务器_前端服务器搭建

[TOC]

# 简介

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

# [Server.js](https://serverjs.io/)

server.js for Node

# [serve](https://github.com/zeit/serve)

运行下列命令安装"serve"。

~~~

$ npm install –g serve

~~~

使用“serve”的典型语法是：

~~~

$ serve [options]

$ 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 服务器。

安装：

~~~

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 来监听这个文件:

~~~

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

~~~

这样，访问就可以成功加载到json数据了。

json-server 还有很多更强大的功能，如支持模拟 REST API 操作等。

# [http-server](https://github.com/indexzero/http-server)

如果你安装了node，那么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.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;

}

}

```

即可！

# 其他

VSCode 编辑器的一些扩展就有serve功能哦~，例如[LiveServer](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)

# 参考

网易推出的一款接口定义平台 https://nei.netease.com