草梅友仁的后花园

三分钟搭建一个 web 服务器

—

由

CaoMeiYouRen
于
阅读数: 3

by 草梅友仁

项目地址https://github.com/CaoMeiYouRen/simple-web-server

上面的打不开可以访问这个地址https://gitee.com/caomeiyouren/simple-web-server

使用

新建一个目录，然后切换到该目录

运行以下命令即可，前提是已经安装了 git

git clone https://github.com/CaoMeiYouRen/simple-web-server.git
# github有点卡，如果上不去的话也可以换成下面这个链接
git clone https://gitee.com/caomeiyouren/simple-web-server.git
# 注意以上命令只要运行一个即可

然后继续运行

npm i #下载依赖
npm run server #运行脚本

运行后可通过 http://127.0.0.1:80 来访问

运行效果

image

如果不会使用 git 的也可以参考下面的文件目录自己建一个

文件目录

  • src/ 源代码
    • app.js web 服务脚本
    • public/ web 服务器根目录
      • index.html
  • package.json npm 包配置文件

package.json

{
    "name": "simple-web-server",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "server": "node ./src/app.js"
    },
    "author": "CaoMeiYouRen",
    "license": "MIT",
    "dependencies": {
        "express": "^4.16.4"
    }
}

app.js

var express = require("express");
var app = express();//使用express框架
var path = require("path");//这个是node.js自带的路径处理模块
/** 
 * app.use("/", express.static(path.join(__dirname, "public")));
 * app.use("访问路径",express.static("要公开的目录"))
 * 下面这段的意思是通过 域名/xxx 能够访问到 public/xxx 的内容
 * 即将public目录作为静态目录公开
 * path.join(__dirname, "public")能够获取到public的绝对目录
 * 使用绝对目录作为根域名有一个好处就是能够保证找到这个目录，相对目录可能会出错
*/
app.use("/", express.static(path.join(__dirname, "public")));
var http = require("http");//导入http模块
app.get("/", (req, res) => {//当以get方式访问根目录时，返回index.html
    res.sendFile(__dirname + "/public/index.html");
});
let port = 80;//脚本运行端口为80
http.createServer(app).listen(port, () => {
    console.log("HTTP运行端口为 http://127.0.0.1:" + port);
});

index.html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>simple-web-server</title>
    <style>

    </style>
    <script>

    </script>
</head>

<body>
    <h1>HelloWorld</h1>
</body>

</html>

欢迎关注我的其它发布渠道

评论

发表回复