当前位置:   article > 正文

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

nodejs本地服务器

目录

前言

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代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Code</title>
  6. <style>
  7. body{
  8. margin: 0;
  9. overflow: hidden;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14. <canvas id="myCanvas"></canvas>
  15. <script>
  16. const width = document.getElementById("myCanvas").width = screen.availWidth;
  17. const height = document.getElementById("myCanvas").height = screen.availHeight;
  18. const ctx = document.getElementById("myCanvas").getContext("2d");
  19. const arr = Array(Math.ceil(width / 10)).fill(0);
  20. const str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".split("");
  21. function rain() {
  22. ctx.fillStyle = "rgba(0,0,0,0.05)";
  23. ctx.fillRect(0, 0, width, height);
  24. ctx.fillStyle = "#0f0";
  25. arr.forEach(function (value, index) {
  26. ctx.fillText(str[Math.floor(Math.random() * str.length)], index * 10, value + 10);
  27. arr[index] = value >= height || value > 8888 * Math.random() ? 0 : value + 10;
  28. });
  29. }
  30. setInterval(rain, 30);
  31. </script>
  32. </body>
  33. </html>

显示效果如下: 

1696150004782

JavaScript服务器代码

  1. const http = require('http');
  2. //加载文件模块
  3. const fs = require("fs");
  4. const hostname = '127.0.0.1';
  5. //端口
  6. const port = 3630;
  7. const server = http.createServer((req, res) => {
  8. res.statusCode = 200;
  9. res.setHeader('Content-Type', 'text/html');
  10. fs.readFile('./rain.html', (err, data) => {
  11. if (err) throw err;
  12. console.log(data.toString);
  13. res.end(data);
  14. });
  15. });
  16. server.listen(port, hostname, () => {
  17. console.log(`Server running at http://${hostname}:${port}/`);
  18. });

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

3.打开node服务器

在这个目录文件下,打开终端,如下图所示:

打开了终端之后,输入指令  node ./node.js 回车之后就会返回一个服务器的链接地址,复制这个地址在浏览器打开。效果如下图所示:

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

4.1安装cpolar

cpolar官网:cpolar - 安全的内网穿透工具

点击进去,下载安装coplar,后面直接下架就行了,安装到默认路径即可

安装完成了之后就用自己的邮箱先注册一个账号。 

4.2创建隧道(网站) 

进去之后就是这样子的,然后点击创建隧道。

 进入之后,就去创建一个指向本地的3630端口号的隧道

隧道名称:(自定义即可)

协议:http

本地地址:3630

域名类型:随机域名(免费域名,随机分配)

地区:选择China Top

 点击创建之后,打开在线隧道列表,我们就可以看到服务器已经生效了,有两个公网地址,如下图所示

复制网址,然后在浏览器打开,效果如下图所示,这就说明我们创建成功啦!现在你可以把你的这个网址发现给你的朋友,让他们都可以看到你的网页啦!

4.3固定公网地址

        在此之前我需要说明一下,当前创建的网站寿命只有24小时,也就是说你这个网站过24小时后就无效了,毕竟我们用的是免费的嘛(随机分配的网址),如果你还想让你这个网页能够发布出去,那就只能重新创建隧道咯。如果你想让你的网站保存下来,那就要去交点钱来保留你这个域名即可。

进入到coplar官网,点击预留,然后保留二级子域名这里,购买套餐即可。

购买了套餐之后,在创建隧道这边的域名类型就直接去点击二级子域名就行了。然后你的网站就是固定的了。

以上就是本期的内容了,是不是很有意思呢?你也写一个小网站试试吧!

分享一张壁纸:

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/花生_TL007/article/detail/461767
推荐阅读
相关标签
  

闽ICP备14008679号