0%

三分钟搭建一个 web 服务器

三分钟搭建一个 web 服务器

by 草梅友仁

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

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

使用

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

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

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

然后继续运行

1
2
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
"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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!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>

本文作者:草梅友仁
本文地址: https://blog.cmyr.ltd/archives/fd373c4f.html
版权声明:转载请注明出处!

坚持原创技术分享,您的支持将鼓励我继续创作!