5分钟学会如何访问服务器静态HTML

本章节主要通过2种方式(http-servernode-static)开通服务访问静态HTML。

在浏览器上的静态HTML不能通过ftp的方式去访问,所以一般访问服务器上的静态资源都是通过服务的方式去访问静态HTML。

配置和注意事项

服务器:阿里云学生机
服务启动工具:http-server 、node-static
注意: 本章的前提是你的静态资源不是vue和react等工程化构建完成的。因为他们已经自带好了启动服务,按照相关的启动命令和阿里云安全组端口配置即可访问到。

Start

  1. init
node -v  // 检查是否安装node
// 初始化当前项目
npm init // 初始化,配置package.json文件,按照要求填写相关信息,一直回车也可以(不建议)

为啥要初始化node项目?
因为http-servernode-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简介

  1. 在当前资源下创建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位跟相关服务类端口号区别开。
  1. 启动服务
    node index.js

  2. 浏览器访问对应的ip即可
    浏览器访问: xx.xx.xx.xx:1234即可

注意事项
有的人通过上述命令可能会无法访问,目前根据我碰到的原因来看可能是因为阿里云的安全组配置限制了端口号,需要在阿里云安全组配置上加入端口号。


End

http-servernode-static都是根据node来启动服务的,注意资源路径和端口号就可以初步使用,个人更建议node-static可配性更高。
有问题请评论,看到会回复。

你可能感兴趣的:(5分钟学会如何访问服务器静态HTML)