教你如何使用Nodejs搭建HTTP web服务器并发布上线公网

news2024/12/24 8:13:18

文章目录

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

转载自内网穿透工具的文章:使用Nodejs搭建HTTP服务,并实现公网远程访问「内网穿透」

前言

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/530878.html

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

相关文章

60岁的机器视觉工程师,你还在敲代码?不想做机器视觉工程师,还可以做什么?机器视觉工程师职业生命线有多长​?

如果按程序员参加工作时间为22岁计算,平均退役年龄为35岁计算的话,程序员的职业寿命大概为14年。为什么程序员的职业生命线如此短暂呢?大致有以下几点—— 1、编程技术层出不穷,迭代速度非常快,这时候就需要我们不断的学习,不断地保持学习能力,当随着年龄的增长我们的学…

【数据结构】链表:带头双向循环链表的增删查改

本篇要分享的内容是带头双向链表&#xff0c;以下为本片目录 目录 一、链表的所有结构 二、带头双向链表 2.1尾部插入 2.2哨兵位的初始化 2.3头部插入 2.4 打印链表 2.5尾部删除 2.6头部删除 2.7查找结点 2.8任意位置插入 2.9任意位置删除 在刚开始接触链表的时候&…

86. print输出函数知识拓展(有练习题)

86. print输出函数知识拓展&#xff08;有练习题&#xff09; 文章目录 86. print输出函数知识拓展&#xff08;有练习题&#xff09;1. print函数语法2. 横着输出数字序列3. 竖着输出数字序列4. 循环输出5. 总结 1. print函数语法 print[prɪnt]&#xff1a;打印&#xff0c;…

少儿编程scratch -- 基础篇

1.开篇 花费40分钟 首先&#xff0c;我们学的是scratch(划痕&#xff09;&#xff0c;Scratch 是麻省理工学院的“终身幼儿园团队”在 2007 年 [5] 发布的一种图形化编程工具&#xff0c;主要面对全球青少年开放&#xff0c;是图形化编程工具当中最广为人知的一种&…

ShardingSphere-JDBC整合SpringBoot JPA读写分离失败

问题 最近在整合ShardingSphere JDBC和Spring Boot的时候遇到一个问题,当ORM框架使用JPA时,读写分离会失效,查询仍然走主库并不会走从库!同样的配置使用Mybatis就没有任何问题。 在查阅各种资料后,初步确定未JPA事务问题 ShardingSphere负载均衡算法 我当前使用的版本是…

FIDO认证 无密码的愿景

目录 1、简介 2、关于FIDO联盟 3、FIDO如何工作 3.1 FIDO 注册 3.2 FIDO登录 4、FIDO2 4.1 W3C WebAuthn 4.2 CTAP2 4.3 CTAP1 4.4 FIDO UAF 4.5 FIDO U2F 5、FIDO身份验证的优势 5.1 安全 5.2 便利性 5.3 隐私政策 5.4 可扩展性 1、简介 FIDO&#xff08;在线…

Python 爬虫(一):爬虫伪装

1 简介 对于一些有一定规模或盈利性质比较强的网站&#xff0c;几乎都会做一些防爬措施&#xff0c;防爬措施一般来说有两种&#xff1a;一种是做身份验证&#xff0c;直接把虫子挡在了门口&#xff0c;另一种是在网站设置各种反爬机制&#xff0c;让虫子知难而返。 2 伪装策…

【2023 · CANN训练营第一季】初识新一代开发者套件 Atlas 200I DK A2 第二章——安装Atlas 200I DK A2跑通第一个案例

准备相关软件 包括一台PC机&#xff08;空间大于10g)&#xff0c;读卡器&#xff0c;32gsd卡&#xff0c;一根网线。 具体步骤&#xff1a; 开始烧录开发板镜像&#xff1a;将sd卡插入读卡器&#xff0c;将读卡器插入PC机的USB接口&#xff0c;根据相关链接在PC机下载制卡工具…

混合云到底是什么?

大型企业不能再仅仅拥有本地系统就可以逃脱&#xff1b;因此&#xff0c;将一些数字化运营迁移到云端成为了必要。 第一步涉及选择是使用公共云还是私有云&#xff0c;或者两者都使用。使用两者是混合云。 但混合云到底是什么&#xff1f;在回答之前&#xff0c;让我们看看这…

图生图—AI图片生成Stable Diffusion参数及使用方式详细介绍

本文为博主原创文章&#xff0c;未经博主允许不得转载。 本文为专栏《Python从零开始进行AIGC大模型训练与推理》系列文章&#xff0c;地址为“https://blog.csdn.net/suiyingy/article/details/130169592”。 Stable Diffusion webui的详细安装步骤以及文生图&#xff08;txt2…

【Linux】Linux入门学习之常用命令四

介绍 这里是小编成长之路的历程&#xff0c;也是小编的学习之路。希望和各位大佬们一起成长&#xff01; 以下为小编最喜欢的两句话&#xff1a; 要有最朴素的生活和最遥远的梦想&#xff0c;即使明天天寒地冻&#xff0c;山高水远&#xff0c;路远马亡。 一个人为什么要努力&a…

Jenkins教程-Docker安装Jenkins,并构建任务等

本文主要介绍如何在docker中安装Jenkins&#xff0c;启动容器后&#xff0c;如何使用Jenkins构建自己的项目&#xff0c;创建任务等 文章目录 前言Docker安装Jenkins访问Jenkins并配置Jenkins构建项目创建任务源码管理构建触发器BuildPost Steps 设置手工触发构建 前言 参考链…

Redis集群安全加固

本博客地址&#xff1a;https://security.blog.csdn.net/article/details/130692909 一、为Redis启用密码验证 默认情况下&#xff0c;Redis不执行任何密码身份验证。能够通过IP端口连接Redis的客户端均可以直接访问Redis中的数据。在启动Redis服务时&#xff0c;通过设置req…

玩转自动化操作神器n8n之(1)n8n的简介与安装

文章目录 1. 简介 2. 安装2.1. 使用npx进行安装2.2. 使用docker进行安装 2.3. 设置端口&#xff08;可选&#xff09; 3. 登录4. 搜索工作流 1. 简介 n8n是一款强大的工作流程自动化工具&#xff0c;可以自定义想要使用的功能和应用程序。n8n基于节点能够将任何工具连接在一起…

使用插件快速生成代码

使用插件快速生成代码 咋们常说&#xff0c;授人以鱼不如授人以渔&#xff0c;在这里给大家提供一些技巧性的东西&#xff0c;方便一些新手同学可以快速上手&#xff0c;同时&#xff0c;也提高我们的开发兴趣与开发热情&#xff01; 主要讲什么呢&#xff0c;我们来学一学如何…

低代码信创开发核心技术(二):手撕灵活好用的Vue拖拉拽布局系统

前言 随着信息化时代的到来&#xff0c;软件已经成为企业和个人不可或缺的工具。然而&#xff0c;许多人在开发软件时遇到了各种问题&#xff0c;比如开发周期长、技术门槛高、成本高昂等等。为了解决这些问题&#xff0c;低代码平台应运而生。低代码平台是一种快速开发工具&a…

Golang每日一练(leetDay0067) 第十行、打家劫舍I

目录 195. 第十行 Tenth Line &#x1f31f; 198. 打家劫舍 I House Robber &#x1f31f;&#x1f31f; &#x1f31f; 每日一练刷题专栏 &#x1f31f; Golang每日一练 专栏 Python每日一练 专栏 C/C每日一练 专栏 Java每日一练 专栏 195. 第十行 Tenth Line 给定一…

PySide6/PyQT多线程之 异常情况和优先级指南

前言 在PySide6/PyQT 中使用多线程时&#xff0c;线程的优先级和异常情况处理同样是重要的概念。 本文纯理论知识&#xff0c;无实操。换句话说&#xff0c;就是水文~~ 尽管在一般情况下我们不需要过多关注线程的优先级&#xff0c;但了解它的概念对于特定场景下的多线程编程仍…

Java每日一练(20230516) 最小栈、组合总和II、相同的树

目录 1. 最小栈 &#x1f31f; 2. 组合总和 II &#x1f31f;&#x1f31f; 3. 相同的树 &#x1f31f; &#x1f31f; 每日一练刷题专栏 &#x1f31f; Golang每日一练 专栏 Python每日一练 专栏 C/C每日一练 专栏 Java每日一练 专栏 1. 最小栈 设计一个支持 push…

[入门必看]数据结构5.4:树、森林

[入门必看]数据结构5.4&#xff1a;树、森林 第五章 树与二叉树5.4 树、森林知识总览5.4.1 树的存储结构5.4.2 树、森林与二叉树的转化5.4.3 树和森林的遍历 5.4.1 树的存储结构树的逻辑结构回顾&#xff1a;二叉树的顺序存储如何实现树的顺序存储&#xff1f;树的存储1&#x…