http-server 开启本地服务器
# 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
2
本地服务器就启动起来了,默认端口为 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
2
3
4
5
6
端口默认是 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 代码。