使用 http-server 开启一个本地服务器

1. http-server 简介

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

在写前端页面中,经常会在浏览器运行 HTML 页面,从本地文件夹中直接打开的一般都是 file 协议,不能发送 Ajax 请求,或当代码中存在 httphttps 的链接时,HTML 页面就无法正常打开。为了解决这类情况,需要在本地开启一个 http 服务器,通过 IP 加端口号,来访问资源。

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

2. 安装 Node.js

官网地址,下载官网推荐版本,并安装。

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

3. 安装 http-server

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

npm install http-server -g

http-server 详细介绍及参数见官方

4. 开启 http-server 服务

终端进入目标文件夹(也就是需要启动服务的文件夹),然后在终端输入如下命令:

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

本地服务器就启动起来了,默认端口为 8080

5. 关闭 http-server 服务

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

6. 修改 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 参数是监听端口

7. 其他参数

参数 作用
-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 设置缓存头信息中的缓存时间(以秒为单位)
示例:-c1010 秒,默认是 3600 秒,如果要禁用缓存就使用 -c-1
-U 或者 –utc 使用 UTC 格式,在控制台输出时间信息
-P 或者 –proxy 通过一个 url 地址,代理不能通过本地解析的资源
-S 或者 –ssl 使用 https 协议
-C 或者 –cert ssl 证书文件的路径,默认是 cert.pem
-K 或者 –key ssl 密匙文件路径
-h 或者 –help 显示帮助

8. 总结

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

我的博客即将同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=k00pjjw0esy7


博文对你有帮助吗?如果有的话,想不想送我一本书呢?
  目录