使用 cpolar 内网穿透将本地 web 网站发布上线(无需服务器)

news2024/11/17 17:28:48

前言

当我们以本地电脑做服务器搭建web网站时,如何将它发布到互联网上,实现公网用户都可以访问内网的web网站就变得很重要。

这里我们以macOS系统自带的Apache为例,在本地启用Apache服务器,并通过cpolar内网穿透将其暴露至公网,实现在外公网环境下访问本地web服务,无需购买服务器,也不需要公网ip,不需要设置路由器。

文章目录

  • 前言
  • 1. 启动Apache服务器
  • 2. 公网访问本地web服务
    • 2.1 本地安装配置cpolar
    • 2.2 创建隧道
    • 2.3 测试访问公网地址
  • 3. 配置固定二级子域名
    • 3.1 保留一个二级子域名
    • 3.2 配置二级子域名
  • 4. 测试访问公网固定二级子域名

1. 启动Apache服务器

在macOS上打开终端,执行命令启动Apache服务器,提示Passwod,输入密码

sudo apachectl start

20221229150856

## Apache常用命令:

## 启动apache:  sudo apachectl start
## 重启apache:  sudo apachectl restart
## 关闭apache:  sudo apachectl stop

浏览器访问localhost(默认80端口),页面正常看到It Works!,表示服务器启动成功,局域网内可正常访问!

20221229151145

2. 公网访问本地web服务

目前web服务只能在局域网内访问,接下来我们使用cpolar内网穿透将本地web服务映射到公网,实现公网用户也可以访问到本地web服务,无需公网IP,也无需设置路由器。

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

2.1 本地安装配置cpolar

macos安装cpolar可通过homebrew包管理器进行安装,无需手动下载安装包。

  • 安装homebrew

Homebrew是一款Mac OS下的套件管理工具,拥有安装、卸载、更新、查看、搜索等很多实用的功能。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
  • 通过Homebrew包管理器安装cpolar内网穿透
brew tap probezy/core && brew install cpolar
  • token认证

登录cpolar官网后台,点击左侧的验证,查看自己的认证token,之后将token贴在命令行里

cpolar authtoken xxxxxxx

20221229152722

  • 安装服务
sudo cpolar service install
  • 启动服务
sudo cpolar service start
  • 登录cpolar web UI管理界面

在浏览器上访问本地9200端口【http://127.0.0.1:9200/】,使用cpolar账号登录。

20221229153018

登录成功后,点击左侧仪表盘的隧道管理——隧道列表,可以看到两条样例隧道(可自行编辑或者删减)

  • ssh隧道:指向本地22端口,tcp协议
  • website隧道:指向本地8080端口,tcp协议

20221229173953

2.2 创建隧道

点击左侧仪表盘的隧道管理——创建隧道,我们来创建一条隧道,将在本地80端口下的web服务映射到公网:

  • 隧道名称:可自定义,注意不要与已有隧道名称重复
  • 协议:http协议
  • 本地地址:80
  • 域名类型:免费选择随机域名
  • 地区:选择China VIP

点击创建

20221229153743

提示隧道创建成功后,页面自动跳转至隧道列表,可以看到刚刚创建成功的tunnel-1隧道,状态active,表示为正常在线,注意无需再次点击启动。

20221229153926

点击左侧仪表盘的状态——在线隧道列表,可以看到tunnel-1隧道已经有生成了相应的公网地址,一个http协议,一个https协议(免去配置ssl证书的繁琐步骤),均可以访问到本地web服务,复制公网地址。

20221229154422

2.3 测试访问公网地址

在浏览器上访问公网地址,测试访问成功,实现公网访问本地web服务。

20221229154948

3. 配置固定二级子域名

由于使用免费的cpolar所生成的公网地址为随机临时地址,24小时内会发生变化,对于需要长期访问的用户不是很方便。为此,我们可以为其配置一个容易记忆的固定二级子域名,同时提高带宽,实现更为流畅的访问。

注意需要将cpolar套餐升级至基础套餐或以上。【cpolar.cn已备案】

3.1 保留一个二级子域名

登录cpolar官网后台,点击左侧的预留,找到保留二级子域名:

  • 地区:选择China VIP
  • 二级域名:可自定义填写
  • 描述:即备注,可自定义填写

点击保留

20221229160016

提示子域名保留成功,复制所保留的二级子域名

20221229160144

3.2 配置二级子域名

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

20221229160621

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

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

点击更新

20221229160748

提示更新隧道成功,点击左侧仪表盘的状态——在线隧道列表,可以看到公网地址已经更新为保留成功的二级子域名,将其复制下来。

20221229161118

4. 测试访问公网固定二级子域名

在浏览器上访问固定二级子域名,测试访问成功,现在该公网地址不会随机变化了。

20221229161559


在这里插入图片描述

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

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

相关文章

vue国际化(多语言)

方法1:用 js-cookie 包 并且挂载在 main.js 上 1、安装 vue-i18n js-cookie 插件 npm install vue-i18n -S npm install js-cookie --save2、去检查一下你安装的 i18n 版本是不是 8.26.5 3、在 main.js 中引入 import VueI18n from vue-i18n; import cookie fro…

Echarts legend属性使用

Echarts的legend属性是对图例组件的相关配置 而legend就是Echarts图表中对图形的解释部分: 其中legend自身常用的配置属性如下: orient 设置图例的朝向 属性值: vertical // 垂直显示 或者 horizontal // 水平显示 legend: {orient: ver…

JavaScript——WebAPI(DOM)知识小结

目录 什么是WebAPI DOM API DMO树 DOM树: 选中页面元素: 事件 事件的三要素: 获取/修改元素内容 获取/修改元素属性 获取/修改表单元素属性 获取/修改样式属性 新增元素 删除元素 什么是WebAPI WebAPI是浏览器给js提供的功…

前后端 token 的使用

嗷呜, 预感又是一篇长的水文, 但是内心好激动哦 适用于前端(了解 node express 框架的人看), 想要了解后端的人看 好了, 开始废话模式 前后端 token 的使用 最近在做一个后台管理项目, 但是我一个卑微的前端我去哪里找接口的, 没有, 只好我自己写 哎, 我能有什么坏心思呢, 没有…

【React】使用Next.js构建并部署个人博客

👉 TypeScript学习:TypeScript从入门到精通 👉 蓝桥杯真题解析:蓝桥杯Web国赛真题解析 👉 个人简介:一个又菜又爱玩的前端小白🍬 👉 你的一键三连是我更新的最大动力❤️&#xff01…

Server Tomcat v9.0 Server at localhost failed to start问题

Server Tomcat v9.0 Server at localhost failed to start问题解决办法。 在我们使用eclipse启动Tomcat时,有时会出现Server Tomcat v9.0 Server at localhost failed to start 的错误提示,导致无法成功启动,下面给出出现这种问题的简单解决…

Python开发自定义Web框架

文章目录开发自定义Web框架1.开发Web服务器主体程序2.开发Web框架主体程序3.使用模板来展示响应内容4.开发框架的路由列表功能5.采用装饰器的方式添加路由6.电影列表页面的开发案例开发自定义Web框架 接收web服务器的动态资源请求,给web服务器提供处理动态资源请求…

Web项目(Vue)部署到阿里云服务器【超详细】

超详细Vue项目部署篇!!! 小白的部署之路 前段时间白嫖了一年的阿里云服务器,想着手上有个项目,那就部署上去吧。找了很多教程,没有一篇是完整细致的,对于小白的我来说太难了,然后就…

最全面的SpringBoot教程(三)——SpringBoot Web开发

前言 本文为SpringBoot Web开发相关内容介绍,下边将对静态资源管理(包括:静态资源访问,静态资源前缀,webjar,首页支持),请求参数处理(包括:Rest风格&#xff…

【微信小程序】-- 自定义组件 - 父子组件之间的通信(三十八)

💌 所属专栏:【微信小程序开发教程】 😀 作  者:我是夜阑的狗🐶 🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询! &…

也许是全网最全的 Angular 新手入门指南

文章目录Angular概述Angular程序架构Angular优势angular/cli脚手架文件加载顺序项目目录结构Angular模块NgModule 装饰器内置模块自定义模块模块的tipsAngular组件Component 元数据数据绑定脏值检测父子组件通讯投影组件Angular指令内置属性型指令内置结构型指令指令事件样式绑…

若依框架(前后端分离)打war包部署到linux

一、前端部署 1.找到ruoyi-ui目录。 2.安装依赖。 npm install 3.执行以下操作,解决 npm 下载速度慢的问题。 npm install --registryhttps://registry.npmmirror.com 4.修改vue.config.js,若后端采用的是默认8080端口,则不用修改,默认就是…

2023最新最全vscode插件精选

文章简介 本文介绍最新、最实用、最强大的 vscode 精选扩展。好用的扩展,犹如神兵利器,帮助程序员在代码的世界中,所向披靡,战无不胜! 作者介绍 随易出品,必属精品,只写有深度,有质…

vue 路由钩子

路由钩子分为三种 全局钩子: beforeEach、 afterEach、beforeResolve单个路由里面的钩子: beforeEnter组件路由:beforeRouteEnter、 beforeRouteUpdate、 beforeRouteLeave 它的三个参数: to: (Route路由对象) 即将要进入的目标…

【前端知识体系梳理(三)】Diff策略

​ 目录 🍉前言 🍉传统Diff算法 🍉React Diff 🍓🍓🍓1、tree diff 🍓🍓🍓2、component diff 🍓🍓🍓3、element diff &#x1…

前端页面项目——博客系统

目录 1.实现博客列表页 1.1 实现导航栏 1.2 实现中间版心 1.3 实现个人信息 1.4 实现博客列表 2. 实现博客正文页 3. 实现博客登陆页 4. 实现博客编辑 4.1 实现编辑区 4.2 引入编辑器 展示 1)登录页面 2)博客列表页 3)博客详情页 4&am…

【JavaScript】手撕前端面试题:手写Object.create | 手写Function.call | 手写Function.bind

🖥️ NodeJS专栏:Node.js从入门到精通 🖥️ 博主的前端之路(源创征文一等奖作品):前端之行,任重道远(来自大三学长的万字自述) 🖥️ TypeScript知识总结&…

PyQt5之进度条:QProgressBar

PyQt5之进度条:QProgressBar 在软件中,在处理特别冗长的任务时,如果没有相关的进度信息,这个等待的过程会比较考验用户的耐心,根据相关理论,进度条可以缓解用户在等待过程中的焦虑,所以&#x…

前端学习笔记(14)-Vue3组件传参

1.props&#xff08;父组件传递给子组件&#xff09;1.1 实现如果你没有使用 <script setup>&#xff0c;props 必须以 props 选项的方式声明&#xff0c;props 对象会作为 setup() 函数的第一个参数被传入&#xff1a;在子组件中&#xff1a;export default {props: {ti…

微信小程序头像昵称填写能力

1、基本介绍 微信小程序获取头像昵称的能力&#xff0c;最近又进行了一次调整&#xff0c;如果没有记错这是今年第三次调整了&#xff0c;每次调整每个开发者心中我相信都跟我一样&#xff0c;万马奔腾。。。今天写个demo体验下实际效果如何。 详细信息请见小程序用户头像昵称…