最近在学习Html,小有进步变想着写一个浪漫的静态页面给女朋友浪漫一下,那么问题就来了,如何把我的网页让对网络一窍不通的女朋友看到,所以便想到了是用自己电脑作为服务器的想法.百度以后整理如下:

首先搭建本地服务器
Mac自带Apache服务器,所以比较简单
一: 打开终端

//开启apache:需要输入密码
sudo apachectl start
//重启apache:
sudo apachectl restart
//关闭apache:
sudo apachectl stop
开启成功之后用同一局域网的浏览器打开http://127.0.0.1/或者http://localhost测试一下回显示

局域网It work.png
二: 此处显示的网页在/Library/WebServer/Documents,打开文件路径

image.png
it work的网页是上图的index.html.en,以此类推,如果想要放自己的网站,可以吧文件拖入上图,类似HaiMiLove文件,此时打开http://127.0.0.1/haimilove的链接便是你自己的网页了

三:使用完成记得关闭,不然很耗费电脑性能

本地web服务映射到外网
一: 什么是ngrok
本地服务映射到外网有很多,但这里说的是通过免费ngrok内网穿透映射到外网
ngrok官网下载地址:https://ngrok.com/download
Ngrok 是一个反向代理,通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。

ngrok官网介绍.png
二: 如何使用ngrok
上面已经介绍了如何打开本地web服务,在上面的基础上开始映射到外网奥

下载

官网下载.png
解压缩,并放到一个你认为合适的地方,注意:解压缩后的二进制文件是直接使用的,所以放到一个你认为方便的地方开始用终端命令行使用它吧
2.1 使用命令行 打开文件所在位置,一下以我自己文件位置为例

cd /Users/mass

image.png
2.2 开启服务

./ngrok http localhost:80

注意,此处开启服务需要用上面的时候开启本地服务时候的端口号,如果你从来没有设置过则默认是80 ,如果不是可以在/etc/apache2/httpd.conf的网络配置文件中查看,具体的方法自行百度

修改默认路径

修改默认端口号

开启成功.png
注意:http://097df238.ngrok.io便是外网可以访问的地址,这个地址在每次开启服务都是不同的,如果想要固定地址,就得注册ngrok获得token并付费获得,具体流程在注册成功后官网介绍很详细,上图中的Account便是我注册的免费账户,通过 auth token绑定

你还可以通过 http://127.0.0.1:4040 ngrok正在运行,查看隧道请求的历史记录。您还可以检查每个请求的标题和响应,或者重播请求以加快您的开发过程。当然也可以在终端查看

流量.png
以上便是基本的搭建本地服务映射外网的基本使用,更深层次的使用方法还有很多,需要自己慢慢探寻了,有不对的地方希望能流言纠正,谢谢
---------------------
作者:海M滨
来源:CSDN
原文:https://blog.csdn.net/u012918868/article/details/80891675
版权声明:本文为博主原创文章,转载请附上博文链接!

java -Mac搭建本地服务器并映射到外网的更多相关文章

  1. Mac搭建本地服务器并映射到外网

    最近在学习Html,小有进步变想着写一个浪漫的静态页面给女朋友浪漫一下,那么问题就来了,如何把我的网页让对网络一窍不通的女朋友看到,所以便想到了是用自己电脑作为服务器的想法.百度以后整理如下: 首先搭 ...

  2. mac搭建本地服务器

    目录 基础部分 1234 启动服务器添加自定义文档到本地服务器查看自定义效果手机/其他电脑 访问本机服务器 说明:本地开发需要搭建本地服务器进行页面的调试,mac系统自带apache服务,本篇日志是针 ...

  3. 【转】使用ngrok快速地将本地Web服务映射到外网

    为什么要使用ngrok? 作为一个Web开发者,我们有时候会需要临时地将一个本地的Web网站部署到外网,以供它人体验评价或协助调试等等,通常我们会这么做: 找到一台运行于外网的Web服务器 服务器上有 ...

  4. 如何免费的将本地Web服务映射到外网

    链接地址:https://hongmaju.github.io/2018/05/13/ngrok%E5%B0%86%E6%9C%AC%E5%9C%B0Web%E6%9C%8D%E5%8A%A1%E6% ...

  5. 3 微信开发本地代理环境的搭建--实现将内网ip映射到外网

    微信公众号的开发,要搭建网站,并且随时都有可能修改网站内容进行调试,这就需要临时外网能返回本地开发环境搭建的项目进行测试,即内网映射到公网,但是好多开发者没有自己的域名和服务器,这里我们先来搭建一个本 ...

  6. Mac 搭建 SVN 服务器环境

    Mac 搭建 SVN 服务器环境 一.创建svn repository svnadmin create /path/svn/pro //仓库位置,svn是svn的目录,pro是一个版本库的目录 PS: ...

  7. iOS开发网络篇—搭建本地服务器

    iOS开发网络篇—搭建本地服务器 一.简单说明 说明:提前下载好相关软件,且安装目录最好安装在全英文路径下.如果路径有中文名,那么可能会出现一些莫名其妙的问题. 提示:提前准备好的软件 apache- ...

  8. IIS搭建本地服务器,花生壳实现外网通过域名访问网站

    配置服务器 作为一个青年,没有实力,做不出标图所示的服务器. 作为一个学生,买不起服务器 作为一个小孩,买不起域名 但别忘了 作为一个平民玩家,只要有耐心 装备迟早会做出来的 (注:感觉有钱与没钱还是 ...

  9. MacOS搭建本地服务器

    MacOS搭建本地服务器 一,需求分析 1.1,开发app(ios android)时通常需往app中切入web页面,直接导入不行,故需搭建本地的测试网站服务,通过IP嵌入访问页面. 1.2,开发小程 ...

随机推荐

  1. ant font 本地化

    要解决的问题1.antd默认iconfont指向的是阿里在公网CDN上部署的url 2.项目需要在本地进行部署,使用的是本地文件的访问方式,希望能内网/离线使用 在ant-design-pro中的配置 ...

  2. Android资源图片读取机制

    在新建一个Android项目时.在res目录下会自己主动生成几个drawable目录,drawable-ldpi,drawable-mdpi,drawable-hdpi,一直以来都对此不太清楚.图片应 ...

  3. Java学习笔记3、变量、数据类型

    标识符 常见的命名规则(见名知意) 包名全部小写 类或者接口,一个单词:首字母大写,多个单词:每个单词首字母大写. 方法或者变量:一个单词:首字母小写,多个单词:从第二个单词开始,每个单词首字母大写. ...

  4. centos无法安装vmvare-tools的问题

    不要使用 vmware 自带的 tools, 版本太老了. 从这里下载:https://github.com/rasa/vmware-tools-patches.git 直接下载或者使用下面的命令: ...

  5. list_entry(ptr, type, member)——知道结构体内某一成员变量地址,求结构体地址

    #define list_entry(ptr, type, member) \ ((type *)(() -> member))) 解释: 1 在0这个地址看做有一个虚拟的type类型的变量,那 ...

  6. CopyOnWriteArrayList操作java.lang.UnsupportedOperationException

    问题一:CopyOnWriteArrayList不能强制转换成ArrayList 解决的方法:将CopyOnWriteArrayList传入ArrayList中 ArrayList<T> ...

  7. nginx 反向代理做域名转发简单配置

    这里用的是nginx for windows 首先进入nginx配置文件,做以下配置: server { listen 80; server_name abc.com; location / { pr ...

  8. WPF自定义控件之水印文本(密码)框

    首先来讲讲创建这个控件的初衷,一个让我很郁闷的问题. 公司的客户端项目采用WPF+MVVM技术实现,在近期地推客户端的过程中遇到了一个很奇葩的问题:在登录界面点击密码框就会直接闪退,没有任何提示 密码 ...

  9. ES6中的export,import ,export default

    ES6模块主要有两个功能:export和importexport用于对外输出本模块(一个文件可以理解为一个模块)变量的接口import用于在一个模块中加载另一个含有export接口的模块.也就是说使用 ...

  10. unity prefab使用原则

    prefab可无限apply: 如果把一个模块做成了prefab,这个prefab可能在同一个scene中添加多个,甚至添加到了多个scene中.设所有这些实例为instance(1),instanc ...