本章节主要通过2种方式(http-server
和node-static
)开通服务访问静态HTML。
在浏览器上的静态HTML不能通过ftp的方式去访问,所以一般访问服务器上的静态资源都是通过服务的方式去访问静态HTML。
配置和注意事项
服务器:阿里云学生机
服务启动工具:http-server 、node-static
注意: 本章的前提是你的静态资源不是vue和react等工程化构建完成的。因为他们已经自带好了启动服务,按照相关的启动命令和阿里云安全组端口配置即可访问到。
Start
- init
node -v // 检查是否安装node
// 初始化当前项目
npm init // 初始化,配置package.json文件,按照要求填写相关信息,一直回车也可以(不建议)
为啥要初始化node项目?
因为http-server
和node-static
都是通过node来启动服务然后指向静态资源文件来访问。
2.http-server
npm i http-server // 安装 http-server,i是install的缩写
http-server -p 端口号 // 启动服务 不用-p 端口号的话,默认是8080
浏览器访问: 公网ip:端口号 // 注意路径问题
// 例子
http-server -p 1234 // 启动服务,端口号为1234
浏览器访问: xx.xx.xx.xx:1234即可
3.node-static
根据这个node-static简介
- 在当前资源下创建index.js(文件夹名称随意)
index.js
var static = require('node-static');
var file = new static.Server('./'); // "./"是资源的路径,如果你的index.js是跟资源同一个文件夹就可以这么写
require('http').createServer(function (request, response) {
request.addListener('end', function () {
file.serve(request, response);
}).resume();
}).listen(1234); // 端口号一般建议4位跟相关服务类端口号区别开。
启动服务
node index.js
浏览器访问对应的ip即可
浏览器访问: xx.xx.xx.xx:1234即可
注意事项
有的人通过上述命令可能会无法访问,目前根据我碰到的原因来看可能是因为阿里云的安全组配置
限制了端口号,需要在阿里云安全组配置
上加入端口号。
End
用http-server
和node-static
都是根据node来启动服务的,注意资源路径和端口号就可以初步使用,个人更建议node-static
可配性更高。
有问题请评论,看到会回复。