VS Code安装Live Server插件搭建web网页结合内网穿透实现公网访问

文章目录

    • 前言
    • 1. 编写MENJA小游戏
    • 2. 安装cpolar内网穿透
    • 3. 配置MENJA小游戏公网访问地址
    • 4. 实现公网访问MENJA小游戏
    • 5. 固定MENJA小游戏公网地址

正文开始前给大家推荐个网站,前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。[点击跳转到网站]

前言

本篇教程,我们将通过VS Code实现远程开发MENJA小游戏,并通过cpolar内网穿透发布到公网,分享给无论身在何地的好友体验由你开发的游戏的乐趣。

话不多说,下面就来教大家如何使用VS Code编写一个MENJA切块小游戏,这里我们使用VS Code并结合Live Server插件进行调试,Live Server可以实现一键安装,实现自动刷新,架设本地服务器环境。

如何使用VS Code编写一个小游戏并结合内网穿透实现远程访问

1. 编写MENJA小游戏

本篇文章的小游戏源代码地址:https://github.com/ADAMxWANG/menja

下载ZIP压缩包到本地:

image-20231205171902463

VS Code扩展中搜索Live Server,并安装

image-20231205104829266

右键index.html文件,点击Open with Live Server 弹出web界面,端口为 5500

image-20231205162407683

image-20231205105336821

接下来可以在menja文件夹下进行调试,并使用Live Server随时进行调试,实时查看开发的网页

image-20231205162747769

接下来我们要把制作好的游戏网页发布至公网,分享给好友访问。

2. 安装cpolar内网穿透

要将游戏分享给好友,首先我们需要在Linux安装cpolar内网穿透工具,cpolar是一个非常好用的工具,它可以将你的本地站点发布至公网。是Web调试开发的必备工具,通过cpolar 转发本地端口映射的http公网地址,我们可以很容易实现远程访问,而且无需自己注册域名购买云服务器.下面是安装cpolar步骤:

cpolar官网地址: https://www.cpolar.com

  • 使用一键脚本安装命令
curl -L https://www.cpolar.com/static/downloads/install-release-cpolar.sh | sudo bash
  • 向系统添加服务
sudo systemctl enable cpolar
  • 启动cpolar服务
sudo systemctl start cpolar

cpolar安装成功后,在外部浏览器上访问Linux 的9200端口即:【http://局域网ip:9200】,使用cpolar账号登录,登录后即可看到cpolar web 配置界面,结下来在web 管理界面配置即可。

image-20231016143741228

3. 配置MENJA小游戏公网访问地址

点击左侧仪表盘的隧道管理——创建隧道,创建一个MENJA小游戏的cpolar 公网地址隧道!

  • 隧道名称:可自定义命名,注意不要与已有的隧道名称重复
  • 协议:选择http
  • 本地地址:5500 (本地访问时的端口)
  • 域名类型:免费选择随机域名
  • 地区:选择China Top

点击创建

image-20231205162913957

隧道创建成功后,点击左侧的状态——在线隧道列表,查看所生成的公网访问地址,有两种访问方式,分别是 http 和 https 。

image-20231205163034816

4. 实现公网访问MENJA小游戏

使用上面的cpolar https公网地址,在任意设备的浏览器进行访问,即可成功看到小游戏界面,这样一个公网地址且可以远程访问就创建好了,使用了cpolar的公网域名,无需自己购买云服务器,即可发布到公网随时随地进行远程访问。(Tips:新域名登录,可能需要重新登陆)

image-20231205163131214

5. 固定MENJA小游戏公网地址

由于以上使用cpolar所创建的隧道使用的是随机公网地址,24小时内会随机变化,不利于长期远程访问。我一般会使用固定二级子域名,因为我希望将游戏网址发送给朋友玩时,可以直接使用简单好记的固定公网地址进行访问,不用每天都更换地址访问,可以一直愉快的享受游戏。

固定二级子域名长这样(例如:MENJA.cpolar.cn),该地址为固定地址,不会随机变化。

注意需要将cpolar套餐升级至基础套餐或以上,且每个套餐对应的带宽不一样。【cpolar.cn已备案】

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

5f9c95aa2f400d49a0515b73da833d7

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

f22eed666d7c9f88db05f89f915958f

返回登录cpolar web UI管理界面,点击左侧仪表盘的隧道管理——隧道列表,找到所要配置的隧道,点击右侧的编辑

eb372d40f1adb6a6dbb85ea47a2a360

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

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

点击更新(注意,点击一次更新即可,不需要重复提交)

image-20231205163504701

更新完成后,打开在线隧道列表,此时可以看到公网地址已经发生变化,地址名称也变成了固定的二级子域名名称的域名

image-20231205163654863

最后,我们使用固定的公网地址访问游戏网页,可以看到访问成功,这样一个固定且永久不变的公网地址就设置好了。

现在我们可以把这个通过VS Code编写的web网页或者游戏网页,通过cpolar生成的固定地址分享给你的好朋友们随时随地来进行远程游戏啦~

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

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

相关文章

性能测试-Jmeter常用元件基础使用

一、Jmeter元件 #线程组 添加HTTP请求 #配置元件 配置元件内的元件都是用于进行初始化的东西 #监听器 监听器主要是用来获取我们使用取样器发送请求后的响应数据相关信息 #定时器 定时器主要用来控制我们多久后执行该取样器(发送请求) #前置处理器 前置处…

算法学习系列(四十二):最短路模型

目录 引言一、迷宫问题二、武士风度的牛三、抓住那头牛 引言 关于这个最短路问题还是得要好好刷题见题才行啊,不然这个其实模板都是差不多的,就是可能怎么把它转化为 B F S BFS BFS 是个问题,以及能不能想到用也是一个问题,其实…

安卓面试准备汇总

java相关 面试-java基础相关-CSDN博客 android 基础相关 安卓基础面试题-CSDN博客 kotlin相关 android pms,cms,wms相关知识 android fragmework层的知识 项目相关的

【P1957】语句解析

语句解析 题目背景 木有背景…… 题目描述 一串长度不超过 255 255 255 的 PASCAL 语言代码,只有 a , b , c a,b,c a,b,c 三个变量,而且只有赋值语句,赋值只能是一个一位的数字或一个变量,每条赋值语句的格式是 [变量]:[变量…

【Python循环3/5】条件循环语句

目录 导入 条件循环 边界条件 while循环 死循环 while循环与for循环的区别 总结 知识图谱 导入 我们已经学习了如何利用for语句实现代码重复执行的循环结构。通过遍历列表,输出其中的每一个元素。 for循环就像是排队办事,一个个进入,轮…

爬虫逆向实战(35)-MyToken数据(MD5加盐)

一、数据接口分析 主页地址:MyToken 1、抓包 通过抓包可以发现数据接口是/ticker/currencyranklist 2、判断是否有加密参数 请求参数是否加密? 通过查看“载荷”模块可以发现有一个code参数 请求头是否加密? 无 响应是否加密&#xf…

实名制接口-身份核验-PHP 身份证实名认证接口代码

通过身份证实名制,可以确保公民的身份信息得到保障。有效防范各类犯罪行为,如电信诈骗、走私、假冒伪劣等,维护社会秩序和公序良俗,提高社会治安水平。促进信息共享,不同行业和部门之间可以实现信息互通共享&#xff0…

JDBC的概念

一.JDBC概念: 其实JDBC就像是翻译官,就像是你去到国外是不是听不懂当地人再讲什么?Java就相当于是你,数据库就是本地人,然后JDBC就是那个翻译官,它提供了一套标准的方法和工具,让Java程序可以与…

HarmonyOS(鸿蒙)快速入门

一:下载开发工具 鸿蒙的开发工具叫DevEco 下载点击 其他部分都一直next 就行,这个页面出现的install 建议都点击install 然后单独选择安装目录 可能存在的问题 就是之前安装nodejs(比如自己开发web或者RN等情况)版本低 等情况 所以建议你单独安装一次 …

string的使用和模拟实现| 细致到strcpy ,strstr,strcmp都不放过

string的使用和模拟实现 string的成员变量string的构造方法用法无参的构造方法的实现全缺省的构造参数的实现 strcpy的模拟实现为什么这里的_size要1?为什么这里是默认传空字符串? 赋值运算符重载 析构函数遍历字符串operator[]使用传统c语言字符串下标遍历的缺点 …

【820复试】C语言题目错题

文章目录 1.若有代码段2.有以下语句定义3.算式 3<<2|3 的结果是&#xff08;&#xff09;——15 【重要】4.下面有关C的类和C里面的struct的描述&#xff0c;正确的有&#xff1f; ABCD5.以下叙述中正确的是&#xff08;&#xff09; D6.若有定义&#xff1a;char s\[3][…

【Linux系统编程】进程程序替换

介绍&#xff1a; 进程程序替换是指将一个进程中正在运行的程序替换为另一个全新的程序的过程&#xff0c;但替换不是创建新进程&#xff0c;只是将对应程序的代码和数据进行替换。具体来说&#xff0c;这个替换过程涉及将磁盘中的新程序加载到内存结构中&#xff0c;并重新建立…

防火墙常用功能配置

防火墙&#xff1a;为了限制不同区域之间的流量通信。默认有一条拒绝所有的策略。 现在的防火墙主要作用&#xff1a;是区域隔离和访问控制。 安全防护是核心特性 路由器&#xff1a;ACL列表&#xff0c;控制流量 入侵防御&#xff1a;网络攻击 文件过滤&#xff0c;内容过滤&…

登高作业安全绳佩戴识别系统---豌豆云

登高作业安全绳佩戴识别系统基于AI人工智能机器视觉分析识别技术&#xff0c;登高作业安全绳佩戴识别系统通过安装于现场的监控摄像头。 实时检测高空作业工作人员的安全绳佩戴情况。一旦系统检测到高空作业人员未佩戴安全绳或安全带&#xff0c;它会立即启动抓拍功能。 将违…

【数学】第十三届蓝桥杯省赛C++ A组/研究生组《爬树的甲壳虫》(C++)

【题目描述】 有一只甲壳虫想要爬上一棵高度为 n 的树&#xff0c;它一开始位于树根&#xff0c;高度为 0&#xff0c;当它尝试从高度 i−1 爬到高度为 i 的位置时有 Pi 的概率会掉回树根&#xff0c;求它从树根爬到树顶时&#xff0c;经过的时间的期望值是多少。 【输入格式…

电脑里的图片杂乱无章怎么办?使用汇帮批量重命名一键帮你解决 大量图片如何批量重命名?

当我们面临大量的图片需要重命名时&#xff0c;这无疑是一项繁琐而耗时的任务。然而&#xff0c;通过一些有效的方法和工具&#xff0c;我们可以使这个过程变得更加高效和轻松。以下介绍的这款汇帮批量重命名软件&#xff0c;能够帮助您有效地重命名大量的图片。 想要快速的进…

git checkout不同分支时,为啥会把当前分支的修改内容也带到新分支里面?

git checkout不同分支时&#xff0c;为啥会把当前分支的修改内容也带到新分支里面&#xff1f; 当你在Git中从一个分支切换到另一个分支时&#xff0c;如果没有先将当前分支未提交的改动暂存或提交&#xff0c;这些改动会被带到新分支。这是因为Git的工作目录是共享的&#xf…

【将一个数指定位上的数变为0,再求和】

判断数a的奇偶性&#xff0c;如果是奇数&#xff0c;则把数a中的偶数位全部改成0&#xff1b;如果是偶数&#xff0c;则把数a中的奇数位全部改成0 例如&#xff1a;12211是奇数&#xff0c;修改后就变成了10201&#xff1b;4212是偶数&#xff0c;修改后就变成了4010 现在给你…

C++容器适配器与stack,queue,priority_queue(优先级队列)的实现以及仿函数(函数对象)与deque的简单介绍

&#x1f389;个人名片&#xff1a; &#x1f43c;作者简介&#xff1a;一名乐于分享在学习道路上收获的大二在校生 &#x1f648;个人主页&#x1f389;&#xff1a;GOTXX &#x1f43c;个人WeChat&#xff1a;ILXOXVJE &#x1f43c;本文由GOTXX原创&#xff0c;首发CSDN&…

【玩转AI绘画】有奖活动火热进行中,参与赢取耳机键盘等好礼!

AI 绘画发展迅猛&#xff0c;各种创新插件如 animatediff、instantid、controlnet 、roop 等遍地开花&#xff0c;极大地激发了 StableDiffusion 的应用潜力。AI 绘画的使用场景不断扩展&#xff0c;如 AI 视频制作、Q 版头像生成、老照片修复、照片高清化等。腾讯云高性能应用…