Nodejs搭建本地http服务器，通过【内网穿透】实现远程访问

news2024/11/30 4:59:55

前言

1.Node.js下载

2.创建node服务器

3.打开node服务器

4.内网穿透实现远程访问

4.1安装cpolar

4.2创建隧道（网站）

4.3固定公网地址

前言

今天我们学习一个有意思的东西，那就是内网穿透。在此之前我有一些关于html、CSS和JavaScript相关的文章来教大家如何去做一个简单的网页，那既然有了网页，那怎么把这些网页给发布出去给别人访问呢？今天我们就通过内网穿透来实现这个功能，下面接着看。

1.Node.js下载

Node.js 是一个开源和跨平台的 JavaScript 运行时环境。它是几乎任何类型项目的流行工具！ Node.js 在浏览器之外运行 V8 JavaScript 引擎（Google Chrome 的内核）。这使得 Node.js 非常高效。 Node.js 应用在单个进程中运行，无需为每个请求创建新线程。

下载地址：下载 | Node.js (nodejs.org)

根据自己电脑操作系统去直接下载安装就行了。

安装完成之后，cmd进入到命令提示符，输入以下指令。

node -v

如果显示以下的情况，就说明安装成功了。

2.创建node服务器

创建一个node服务器，就要用到已有的网页html代码和JavaScript来去实现。首先在VScode创建一个文件夹作为目录，然后分别放置html和JavaScript代码文件，如下图所示：

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Code</title>
    <style>
        body{
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>

<body>
<canvas id="myCanvas"></canvas>
<script>
    const width = document.getElementById("myCanvas").width = screen.availWidth;
    const height = document.getElementById("myCanvas").height = screen.availHeight;
    const ctx = document.getElementById("myCanvas").getContext("2d");
    const arr = Array(Math.ceil(width / 10)).fill(0);
    const str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".split("");

function rain() {
    ctx.fillStyle = "rgba(0,0,0,0.05)";
    ctx.fillRect(0, 0, width, height);
    ctx.fillStyle = "#0f0";
    arr.forEach(function (value, index) {
        ctx.fillText(str[Math.floor(Math.random() * str.length)], index * 10, value + 10);
        arr[index] = value >= height || value > 8888 * Math.random() ? 0 : value + 10;
    });
}

setInterval(rain, 30);
</script>
</body>
</html>

显示效果如下：

1696150004782

JavaScript服务器代码


const http = require('http');
 
//加载文件模块
const fs = require("fs");
 
const hostname = '127.0.0.1';
//端口
const port = 3630;
 


const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/html');
 
  fs.readFile('./rain.html', (err, data) => {
    if (err) throw err;
    console.log(data.toString);
    res.end(data);
  });
 
});
 
server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

JavaScript代码就是在端口号为3630开起服务器监听。