如何在Windows系统安装Node.js环境并制作html页面发布公网远程访问？

news2024/11/15 2:07:50

文章目录

  • 前言
  • 1.安装Node.js环境
  • 2.创建node.js服务
  • 3. 访问node.js 服务
  • 4.内网穿透
    • 4.1 安装配置cpolar内网穿透
    • 4.2 创建隧道映射本地端口
  • 5.固定公网地址

前言

Node.js 是能够在服务器端运行 JavaScript 的开放源代码、跨平台运行环境。Node.js 由 OpenJS Foundation（原为 Node.js Foundation，已与 JS Foundation 合并）持有和维护，亦为 Linux 基金会的项目。Node.js 采用 Google 开发的 V8 运行代码，使用事件驱动、非阻塞和异步输入输出模型等技术来提高性能，可优化应用程序的传输量和规模。这些技术通常用于资料密集的即时应用程序。

Node.js 大部分基本模块都用 JavaScript 语言编写。在 Node.js 出现之前，JavaScript 通常作为客户端程序设计语言使用，以JavaScript 写出的程序常在用户的浏览器上运行。Node.js 的出现使 JavaScript 也能用于服务端编程。Node.js 含有一系列内置模块，使得程序可以脱离 Apache HTTP Server 或 IIS，作为独立服务器运,下面将介绍如何简单几步实现远程公共网络下访问windwos node.js的服务端。

1.安装Node.js环境

官网下载node.js,我们选择64位一键安装

https://nodejs.org/zh-cn/download/

image-20230302141011787

安装好后我们打开cmd,输入命令有正常出来版本号，表示安装成功,一键安装版,默认会配置环境变量。

node -v

image-20230302150424377

2.创建node.js服务

这里我们在本地创建一个简单的nodejs服务，创建一个贪吃蛇页面小游戏来进行演示。

首先在本地创建一个文件夹，并在文件夹中新建2个文件，一个是js文件和一个html文件，需要放在同个目录下，然后使用vscode打开。

  • game.html文件
  • nodetest.js文件

image-20230302155043387

在game.html添加如下html代码并保存，以下代码是一个html页面小游戏(贪吃蛇)

<!DOCTYPE html>
<html>
<head>
	<title>贪吃蛇</title>
	<meta charset="UTF-8">
	<meta name="keywords" content="贪吃蛇">
	<meta name="Description" content="这是一个初学者用来学习的小游戏">
	<style type="text/css">
	*{margin:0;}
	.map{margin:100px auto;
		height:600px;
		width:900px;
		background:#00D0FF;
		border:10px solid #AFAEB2;
		border-radius:8px;
	}
	</style>
</head>
 
<body>
<div class="map">
<canvas id="canvas" height="600" width="900">
	
</canvas>
</div>
 
<script type="text/javascript">
 //获取绘制工具
	/*
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d");//获取上下文
	ctx.moveTo(0,0);
	ctx.lineTo(450,450);*/
	var c=document.getElementById("canvas");
    var ctx=c.getContext("2d");
    /*ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(450,450);
    ctx.stroke();
    */
 
    var snake =[];//定义一条蛇，画蛇的身体
    var snakeCount = 6;//初始化蛇的长度
	var foodx =0;
	var foody =0;
    var togo =0;
    function drawtable()//画地图的函数
    {
 
 
    	for(var i=0;i<60;i++)//画竖线
    	{
    		ctx.strokeStyle="black";
    		ctx.beginPath();
    		ctx.moveTo(15*i,0);
    		ctx.lineTo(15*i,600);
    		ctx.closePath();
    		ctx.stroke();
    	}
        for(var j=0;j<40;j++)//画横线
    	{
    		ctx.strokeStyle="black";
    		ctx.beginPath();
    		ctx.moveTo(0,15*j);
    		ctx.lineTo(900,15*j);
    		ctx.closePath();
    		ctx.stroke();
    	}
    	
    	for(var k=0;k<snakeCount;k++)//画蛇的身体
			{
			ctx.fillStyle="#000";
			if (k==snakeCount-1)
			{
				ctx.fillStyle="red";//蛇头的颜色与身体区分开
			}
			ctx.fillRect(snake[k].x,snake[k].y,15,15);//前两个数是矩形的起始坐标，后两个数是矩形的长宽。
			
			}
			//绘制食物	
    		ctx.fillStyle ="black";
	     ctx.fillRect(foodx,foody,15,15);
	     ctx.fill();
    	
    }
 
    
    function start()//定义蛇的坐标
    {
    	//var snake =[];//定义一条蛇，画蛇的身体
        //var snakeCount = 6;//初始化蛇的长度
		
		for(var k=0;k<snakeCount;k++)
    		{
    			snake[k]={x:k*15,y:0};
    			
            }
			
		  drawtable();
          addfood();//在start中调用添加食物函数
 
    }
 
    function addfood()
	{
	foodx = Math.floor(Math.random()*60)*15; //随机产生一个0-1之间的数
	foody = Math.floor(Math.random()*40)*15;
		
		for (var k=0;k<snake;k++)
		{
			if (foodx==snake[k].x&&foody==sanke[k].y)//防止产生的随机食物落在蛇身上
			{	
			addfood();
			}
		}
	
	
	}	
    		
   function move()
   {
	switch (togo)
	{
	case 1: snake.push({x:snake[snakeCount-1].x-15,y:snake[snakeCount-1].y}); break;//向左走
	case 2: snake.push({x:snake[snakeCount-1].x,y:snake[snakeCount-1].y-15}); break;
	case 3: snake.push({x:snake[snakeCount-1].x+15,y:snake[snakeCount-1].y}); break;
	case 4: snake.push({x:snake[snakeCount-1].x,y:snake[snakeCount-1].y+15}); break;
	case 5: snake.push({x:snake[snakeCount-1].x-15,y:snake[snakeCount-1].y-15}); break;
	case 6: snake.push({x:snake[snakeCount-1].x+15,y:snake[snakeCount-1].y+15}); break;
	default: snake.push({x:snake[snakeCount-1].x+15,y:snake[snakeCount-1].y});
	}
    snake.shift();//删除数组第一个元素
   	ctx.clearRect(0,0,900,600);//清除画布重新绘制
   	isEat();
	isDead();
	drawtable();
   } 			
   
   function keydown(e)
   {
   switch(e.keyCode)
		{
         case 37: togo=1; break;
		 case 38: togo=2; break;
		 case 39: togo=3; break;
		 case 40: togo=4; break;
		 case 65: togo=5; break;
		 case 68: togo=6; break;
		}
   }
   
   function isEat()//吃到食物后长度加1
   {
    if(snake[snakeCount-1].x==foodx&&snake[snakeCount-1].y==foody)
   {
		addfood();
		snakeCount++;
		snake.unshift({x:-15,y:-15});
   }
   
   }
   //死亡函数
   function isDead()
   {
    if (snake[snakeCount-1].x>885||snake[snakeCount-1].y>585||snake[snakeCount-1].x<0||snake[snakeCount-1].y<0)
		{
        

		window.location.reload();
		}
   }
   
    document.onkeydown=function(e)
{
	keydown(e);
 
} 
window.onload = function()//调用函数
{ 
	start();
	setInterval(move,150);
	drawtable();
	
	
 
}
</script>
</body>
</html>

nodetest.js文件添加如下js代码，以下代码意思是开启一个http服务,设置监听3000端口号

const http = require('http');

//加载文件模块
const fs = require("fs");


const hostname = '127.0.0.1';
//端口
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/html');
  
  fs.readFile('./game.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}/`);
});

3. 访问node.js 服务

当我们编写好相关代码后,我们开始启动服务.在vscode控制台输入命令【注意需要进入到相应的文件目录下执行命令】

node .\nodetest.js

image-20230302170633966

有正常返回提示服务在本地3000端口下，我们打开浏览器,访问http://127.0.0.1:3000/,出现贪吃蛇界面表示成功【游戏控制:键盘上下左右键】

image-20230302171105342

4.内网穿透

这里我们使用cpolar来进行内网穿透，支持http/https/tcp协议，不限制流量，无需公网IP，也不用设置路由器，使用简单。

4.1 安装配置cpolar内网穿透

cpolar官网：https://www.cpolar.com/

访问cpolar官网，注册一个账号，然后下载并安装客户端，具体安装教程可以参考官网文档教程。

  • windows系统：在官网下载安装包后，双击安装包一路默认安装即可。
  • linux系统：支持一键自动安装脚本，详细请参考官网文档——入门指南

20230130105715

4.2 创建隧道映射本地端口

cpolar安装成功后，在浏览器上访问本地9200端口http://localhost:9200，使用cpolar邮箱账号登录。

20230130105810

点击左侧仪表盘的隧道管理——创建隧道，创建一个指向本地3000端口的http隧道

  • 隧道名称：可自定义命名，注意不要与已有的隧道名称重复
  • 协议：选择http
  • 本地地址：3000
  • 域名类型：免费选择随机域名
  • 地区：选择China vip

点击创建

image-20230302171633772

隧道创建成功后，点击左侧的状态——在线隧道列表,查看所生成的公网地址，然后复制地址

image-20230302171740715

打开浏览器器,我们使用上面公网地址进行访问,至此,我们成功将本地·node.js 服务发布到了公网地址

image-20230302171817498

5.固定公网地址

由于以上使用cpolar所创建的隧道使用的是随机公网地址，24小时内会随机变化，不利于长期远程访问。因此我们可以为其配置二级子域名，该地址为固定地址，不会随机变化。

  • 保留一个二级子域名

登录cpolar官网，点击左侧的预留，选择保留二级子域名，设置一个二级子域名名称，点击保留,保留成功后复制保留的二级子域名名称

image-20230302172317079

保留成功后复制保留的二级子域名地址

image-20230302172454064

  • 配置二级子域名

访问http://127.0.0.1:9200/，登录cpolar web UI管理界面，点击左侧仪表盘的隧道管理——隧道列表，找到所要配置的3000隧道，点击右侧的编辑

image-20230302172856768

修改隧道信息，将保留成功的二级子域名配置到隧道中

  • 域名类型：选择二级子域名
  • Sub Domain：填写保留成功的二级子域名

点击更新

image-20230302172806823

更新完成后,打开在线隧道列表,此时可以看到公网地址已经发生变化,地址名称也变成了保留过的二级子域名名称,将其复制下来

image-20230302172935943

然后使用固定http地址打开浏览器访问

image-20230302173012863
访问成功，现在这个公网地址是固定的了，不会随机变化。成功通过cpolar内网穿透，实现在外远程访问nodejs服务，无需公网IP ，也不用设置路由器。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1516169.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Pygame教程06：Event事件的类型+处理方法+监听鼠标事件

Pygame教程06：Event事件的类型+处理方法+监听鼠标事件

------------★Pygame系列教程★------------ Pygame教程01&#xff1a;初识pygame游戏模块 Pygame教程02&#xff1a;图片的加载缩放旋转显示操作 Pygame教程03&#xff1a;文本显示字体加载transform方法 Pygame教程04&#xff1a;draw方法绘制矩形、多边形、圆、椭圆、弧…
阅读更多...
Redis到底是单线程还是多线程！，【工作感悟】

Redis到底是单线程还是多线程！，【工作感悟】

无论你是做 Python&#xff0c;PHP&#xff0c;JAVA&#xff0c;Go 还是 C#&#xff0c;Ruby 开发的&#xff0c;都离不开使用 Redis。 大部分程序员同学工作中都有用到 Redis&#xff0c;但是只限于会简单的使用&#xff0c;对Redis缺乏整体的认知。 无论是在大厂还是在中小…
阅读更多...
Java面试题之线程

Java面试题之线程

1. 进程和线程的区别 进程是资源分配的基本单位&#xff1b;线程是任务调度执行的基本单位&#xff1b;进程的创建和销毁消耗的资源都比线程要多&#xff1b;多个进程之间的内存资源是独立的&#xff1b;在一个进程中多个线程之间的内存资源是共享的&#xff1b; 一个进程中包…
阅读更多...
Shell常用脚本：文件或目录一键同步到多台服务器

Shell常用脚本：文件或目录一键同步到多台服务器

注意&#xff1a; 将本地文件&#xff0c;同步到【/opt/module/script/xsyncByFileIp.txt】里面的目标机器 xsyncByFile.sh #!/bin/bash# 入参参数个数 argsCount$#if(($argsCount0)); thenecho "同步失败&#xff1a;请输入待同步的文件或者目录" exit; fiecho &q…
阅读更多...
分享几个Google Chrome谷歌浏览器历史版本下载网站

分享几个Google Chrome谷歌浏览器历史版本下载网站

使用selenium模块的时候&#xff0c;从官网下载的谷歌浏览器版本太高&#xff0c;驱动不支持&#xff0c;所以需要使用历史的谷歌浏览器版本 &#xff0c;这里备份一下以防找不到了。 驱动下载地址&#xff1a;https://registry.npmmirror.com/binary.html?pathchromedriver 文…
阅读更多...
低代码与AI：构建面向未来的智能化应用

低代码与AI：构建面向未来的智能化应用

引言 在当今数字时代&#xff0c;技术的快速发展为各行各业带来了前所未有的机遇和挑战。企业和组织面临着如何迅速开发和交付高质量应用的需求&#xff0c;同时还需要应对日益复杂的业务需求和用户期望。在这样的背景下&#xff0c;低代码与人工智能&#xff08;AI&#xff0…
阅读更多...
打卡学习kubernetes——了解k8s基本概念

打卡学习kubernetes——了解k8s基本概念

目录 1 Container 2 Pod 3 Node 4 Namespace 5 Service 6 Label 7 Annotations 8 Volume 1 Container Container(容器)是一种便携式、轻量级的操作系统级虚拟化技术。它使用namespace隔离不同的软件运行环境&#xff0c;并通过镜像自包含软件的运行环境&#xff0c;从而…
阅读更多...
如何打造“标准化的仓库”？4个环节5大方面看这里...

如何打造“标准化的仓库”？4个环节5大方面看这里...

仓库管理&#xff0c;在保障企业物流运作效率、降低运营成本、提高客户服务质量等方面发挥着不可替代的作用。标准化、规范化管理作为仓库管理中的重要手段&#xff0c;不仅能够提高管理效率&#xff0c;还能够有效地降低管理风险&#xff0c;使仓库运作更加安全、稳定、高效。…
阅读更多...
数据结构：图及相关算法讲解

数据结构：图及相关算法讲解

图 1.图的基本概念2. 图的存储结构2.1邻接矩阵2.2邻接表2.3两种实现的比较 3.图的遍历3.1 图的广度优先遍历3.2 图的深度优先遍历 4.最小生成树4.1 Kruskal算法4.2 Prim算法4.3 两个算法比较 5.最短路径5.1两个抽象存储5.2单源最短路径--Dijkstra算法5.3单源最短路径--Bellman-…
阅读更多...
VScode（Python）使用ssh远程开发（Linux系统树莓派）时，配置falke8和yapf总结避坑！最详细，一步到位！

VScode（Python）使用ssh远程开发（Linux系统树莓派）时，配置falke8和yapf总结避坑！最详细，一步到位！

写在前面&#xff1a;在Windows系统下使用VScode时可以很舒服的使用flake8和yapf&#xff0c;但是在ssh远程开发树莓派时&#xff0c;我却用不了&#xff0c;总是出现问题。当时我就开始了漫长的探索求知之路。中间也请教过许多大佬&#xff0c;但是他们就讲“能用不就行了&…
阅读更多...
51、WEB攻防——通用漏洞验证码识别复用调用找回密码重定向状态值

51、WEB攻防——通用漏洞验证码识别复用调用找回密码重定向状态值

文章目录 回显状态判断用户名重定向验证码回显显示验证码简单机制验证码复用验证码智能识别验证码接口调用安全修复建议 回显状态判断 request前端判断不安全&#xff08;前端接收验证的返回值来进行判断)&#xff0c;使用burp的Response to this request可以抓取返回包~ 这种…
阅读更多...
C#，数值计算，希尔伯特矩阵（Hilbert Matrix）的算法与源代码

C#，数值计算，希尔伯特矩阵（Hilbert Matrix）的算法与源代码

Hilbert, David (1862-1943) 1 希尔伯特（Hilbert） 德国数学家，在《几何学基础》中提出了第一套严格的几何公理（1899年）。他还证明了自己的系统是自洽的。他发明了一条简单的空间填充曲线，即埃里克魏斯汀的数学世界，即希尔伯特曲线，埃里克魏斯汀的数学世界，并证明了不…
阅读更多...
OpenCASCADE开发指南＜七＞：OCC 中的数学基本类型和数学算法

OpenCASCADE开发指南＜七＞：OCC 中的数学基本类型和数学算法

1 标准对象的集合容器 在处理现实问题时&#xff0c;经常将问题抽象成一个数学模型&#xff0c;接着对模型求解&#xff0c; 然后将解提取出来以解决现实问题。 其实在 CAD 软件中&#xff0c; 主要解决的就是数学模型。因此&#xff0c;本节将描述 OCC 的数学基本类型和数学算…
阅读更多...
短剧小程序开发：探索剧情新纪元，随时随地畅享精彩短剧

短剧小程序开发：探索剧情新纪元，随时随地畅享精彩短剧

随着移动互联网的快速发展&#xff0c;人们对碎片化时间的利用越来越高效。短剧小程序应运而生&#xff0c;为用户带来了一种全新的娱乐方式。我们致力于开发一款功能丰富、体验优越的短剧小程序&#xff0c;让您随时随地畅享精彩剧情。 短剧小程序将汇聚众多优质短剧资源&…
阅读更多...
科技成果鉴定测试如何进行?第三方检测机构进行鉴定测试的好处

科技成果鉴定测试如何进行?第三方检测机构进行鉴定测试的好处

科技成果鉴定测试&#xff0c;作为科技领域中一项重要的质量检验手段&#xff0c;具有广泛的应用范围。旨在为科技成果的研发者和使用者提供客观、科学、权威的鉴定结果&#xff0c;从而评估科技成果的技术水平和市场竞争力。 　　科技成果鉴定测试是对科技成果进行系统、全面的…
阅读更多...
【小工具】一键美化nvidia-smi，查看GPU运行状态，无须配置

【小工具】一键美化nvidia-smi，查看GPU运行状态，无须配置

pip install nvitop可以在远程console看&#xff0c;是动态的。 鼠标滚轮控制显示哪个进程。
阅读更多...
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：Web）上篇

鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：Web）上篇

提供具有网页显示能力的Web组件&#xff0c;ohos.web.webview提供web控制能力。 说明&#xff1a; 该组件从API Version 8开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。示例效果请以真机运行为准&#xff0c;当前IDE预览器不支持。 需要权…
阅读更多...
大型污水处理站运维公司怎么选择

大型污水处理站运维公司怎么选择

大型污水处理站运维公司的选择是关乎环境保护和城市发展的重要决策。在如今污水治理领域日益重要的背景下&#xff0c;选择一家专业的运维公司对于确保污水处理站的高效运行、提高处理效果和保护环境具有关键意义。那么&#xff0c;我们应该如何选择适合自己的大型污水处理站运…
阅读更多...
OpenCV读取tensorflow神经网络模型：SavedModel格式转为frozen graph的方法

OpenCV读取tensorflow神经网络模型：SavedModel格式转为frozen graph的方法

本文介绍基于Python的tensorflow库&#xff0c;将tensorflow与keras训练好的SavedModel格式神经网络模型转换为frozen graph格式&#xff0c;从而可以用OpenCV库在C 等其他语言中将其打开的方法。 如果我们需要训练并使用一个神经网络模型&#xff0c;一般情况下都是首先借助Py…
阅读更多...
如何保证缓存与数据库的双写一致性？（史上最全）

如何保证缓存与数据库的双写一致性？（史上最全）

目录 一、面试官心理分析 1. Cache Aside Pattern 2. 最初级的缓存不一致问题及解决方案 3. 比较复杂的数据不一致问题分析 一、面试官心理分析 你只要用缓存&#xff0c;就可能会涉及到缓存与数据库双存储双写&#xff0c;你只要是双写&#xff0c;就一定会有数据一致性的问…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023