http-server 开启本地服务器

📖. 前言

在写前端页面中，经常会在浏览器运行 HTML 页面，从本地文件夹中直接打开的一般都是 file 协议，不能发送 Ajax 请求，或当代码中存在 http 或 https 的链接时，HTML 页面就无法正常打开。

为了解决这类情况，需要在本地开启一个 http 服务器，通过 IP 加端口号，来访问资源。

有一种做法，就是通过 VSCode 的插件或者通过 WebStorm 来打开，本文介绍利用 Node.js 中的 http-server，来便捷的创建一个本地服务。

一. 简介

• 一个简单的零配置命令行 http 服务器
• 足够简单易用，可用于本地测试和开发

二. 安装 Node.js

官网地址 (opens new window) ，下载官网推荐版本，并安装。

在命令行输入命令 node -v 以及 npm -v 检查版本，确认是否安装成功。

不过，本人推荐使用 nvm 进行下载并管理 Node 的多版本，具体可查看之前的文章 《Node管理》。

三. 安装 http-server

在命令行中执行如下命令，将 http-server 安装到全局，必要的情况下需要使用管理员权限安装（-g 表示安装到全局，之后所有文件夹路径下输入 http-server 都可以使用）

$ npm install -g http-server

http-server 详细介绍及参数见 官方 (opens new window)

四. 开启 http-server 服务

终端进入目标文件夹（也就是需要启动服务的文件夹），然后在终端输入如下命令：

# 只输入 http-server 的话，更新了代码后，页面不会同步更新
$ http-server -c-1

本地服务器就启动起来了，默认端口为 8080。或者直接指定固定端口启动

$ http-server ./ -p 3200

五. 关闭 http-server 服务

按快捷键 Ctrl + C，终端显示 ^Chttp-server stopped，即关闭服务成功。

六. 修改 IP 和访问端口

使用默认参数在本地启动服务之后，命令行窗口会输出如下所示的地址：

$ http-server -c-1
Starting up http-server, serving ./
Available on:
  http://127.0.0.1:8080
  http://192.168.10.50:8080
Hit CTRL-C to stop the server

端口默认是 8080，本机访问的话，两个 IP 地址都可以；手机或其他设备连接，请使用下面那个非本机环回地址访问（http://192.168.10.50:8080），并且手机或者其他设备与本机必须在同一局域网下。

我们可以通过携带参数来修改监听地址和端口：

http-server -a 127.0.0.1 -p 8090

http-server [path] [options]

• -a 参数是监听地址
• -p 参数是监听端口

七. 其它参数

参数	作用
-p 或者 –port	端口设置，默认是 8080
-a	监听地址设置默认是 0.0.0.0
-d	是否显示文件列表，默认 true
-i	显示自动索引，默认 true
-g 或者 –gzip	默认 false，当文件的 gzip 版本存在且请求接受 gzip 编码时，它将服务于 ./public/some-file.js.gz，而不是 ./public/some-file.js
-e 或者 –ext	如果没有提供默认文件扩展名（默认为 html）
-s 或者 –silent	禁止控制台日志信息输出
–cors	允许跨域资源共享
-o	启动服务后打开默认浏览器
-c	设置缓存头信息中的缓存时间（以秒为单位） 示例：-c10 是 10 秒，默认是 3600 秒，如果要禁用缓存就使用 -c-1
-U 或者 –utc	使用 UTC 格式，在控制台输出时间信息
-P 或者 –proxy	通过一个 url 地址，代理不能通过本地解析的资源
-S 或者 –ssl	使用 https 协议
-C 或者 –cert	ssl 证书文件的路径，默认是 cert.pem
-K 或者 –key	ssl 密匙文件路径
-h 或者 –help	显示帮助

八. 总结

http-server 是一个轻量级的基于 Node.js 的 http 服务器，它可以使任意一个目录成为服务器的目录，完全抛开后台的沉重工程，直接运行想要的 JS 代码。