静态web server

1. 你一定遇到过

我们想要快速的预览一个网页的时候，有时候我们打开它，浏览器会把他当做文件打开。

比如 test/index.html 当我们把index.html拖动到浏览器里，他总是以 file://path/to/your/file.html 以本地文件协议形式打开。

如果这样我们无法让他执行javascript、css……有时候他就像一个文本。

这里的问题就是，我们希望他可以作为一个 web server的形式打开。

2. 静态server有啥用

1）快速预览前端产物

本文给出一些一行代码打开静态server的方法。

他的作用就像一个开发server，或者一个 Nginx，默认当前目录作为资源目录，首页就是返回index.html，并且以相对当前目录的形式加载资源。

用这种方式，可以预览构建完的 前端静态文件。

2）共享目录

当然如果你在一个有文件的目录下，启动了静态server，并且开放给局域网。别人可以从你这里下载文件，看起来就像一个提供下载的服务器。

好了，搓搓手，让我们开始吧

一、细数那些一行启动静态server的方法

1. Nodejs

如果你用过 React的脚手架 create-react-app

在你第一次执行 yarn run build 的时候，一定看到过

.....

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  yarn global add serve
  serve -s build

Find out more about deployment here:

  https://cra.link/deployment

✨  Done in 17.14s.

这里的 serve就是一个 node的工具，

// 全局安装
yarn global add serve 

// 目标路径下使用
serve -s build

默认打开是 0.0.0.0:5000 对局域网开放访问。想了解更多可以 serve --help

2. Python

简单介绍一下 Python2的一笔带过。

1) Python2

python -m SimpleHTTPServer 8000 .

2) Python3

相信没什么人使用Python2了，还是讲讲Python3吧。

python -m http.server

python3 -m http.server -b 0.0.0.0 5000

-m 是 -m mod : run library module as a script (terminates option list) 启动内部的包。这里就比Node的要好一点，Node是单独去安装一个程序。如果单独安装，其实就不方便了。

Python3已经是大多数操作系统、发行版的标配了，我们不需要单独安装。Python3内置了很多小程序。其中 -m就是指定启动这些程序。

默认http://0.0.0.0:8000/ ， 可以 需要使用 -b 参数（也就是bind）手动指定一下 host，末尾跟上port。

3. Ruby

和Python类似，Ruby也已经是所有发行版的标配了。Ruby也有内置小程序。

ruby -run -ehttpd

# . 就是本地目录的意思，忽视它会报错
ruby -run -ehttpd . -p8000

ruby -run -ehttpd . -b0.0.0.0 -p8000

ruby的命令更有趣一点，这里要解释下。ruby -r 意思是 ruby require 这里后面要跟上一个库，这样就可以导入这个库。这里是un库。连起来竟然是 -run 读起来就像是 run，有意思的巧合。

-e 后面跟上执行的command，也就是ruby语句。连起来就是 -r 先引入 un库 -e 接着执行 httpd . -p8000

un库就是 un.rb ，这里面最有用的就是提供了一个 httpd 可以用来启动静态server

默认端口 port=8080

un.rb doc

ruby -run -e httpd -- [OPTION] DocumentRoot

--bind-address=ADDR         address to bind
--port=NUM                  listening port number
--max-clients=MAX           max number of simultaneous clients
--temp-dir=DIR              temporary directory
--do-not-reverse-lookup     disable reverse lookup
--request-timeout=SECOND    request timeout in seconds
--http-version=VERSION      HTTP version
-v  

二、其他方式

其他通过安装的方式就很多了。就不细细写了。几乎每个web server 都有快速启动的方法，不过有点麻烦。