简介针对个人电脑如何搭建网站并被外网访问这一常见需求这份doc文档提供了从零开始的完整指南适合刚接触网站部署、想快速实现外网分享的初学者。文档基于Windows 10环境围绕JDK 1.8、Apache Tomcat 7与ngrok内网穿透工具展开既介绍各组件的作用与下载途径也绘制了外网访问原理图并给出先启动ngrok再启动Tomcat的正确顺序避免常见配置误区。同时列明免费版ngrok的时长与带宽限制、生产环境安全提醒等注意事项帮助读者少走弯路。资源为单个doc文件大小164KB文字步骤清晰包含环境变量配置、站点源码放入webapps目录、命令行启动等关键操作指引。目前已有1596人学习浏览是个人建站和外网访问入门的一份实用参考资料。1. 内网穿透个人网站先搞清你要装的是哪三层个人电脑通过外网访问自己的网站这事说起来就一句话“把 localhost 丢到公网去”但真动手装的时候十有八九卡在“装了半天不知道哪一层没起来”。我帮人处理过太多这种翻车现场JDK 装了、Tomcat 也启动了、浏览器 localhost 也能开了结果 ngrok 一开外网全是 502。你说气不气。这套环境说穿了是三层JDK 1.8 负责跑 Java 字节码Tomcat 7 负责把网站源码变成 HTTP 服务ngrok 负责把本机的 8080 端口映射到公网域名。三层各自独立、又层层依赖装的时候最忌讳的就是“我全装好了再一起启动”——顺序错了、端口占了、环境变量没生效任何一个环节都能让你的网站稳稳趴在黑匣子里出不去。这篇笔记适合两类人一是刚写完个人网站、想发给别人看看效果的开发者二是卡在“本地能开、外网打不开”这个坎上、需要一套能跑通的完整方案的运维新手。我下面写的内容全部按我自己实际装过的顺序来版本就锁定 JDK 1.8 Tomcat 7 ngrok这三个版本组合是最稳的后面我会解释为什么不追新。2. 装 JDK 1.8版本选择和两个最容易写错的路径2.1 为什么是 1.8而不是 9、11、17Tomcat 7 这个版本只认 Java 6、7、8你给它配一个 JDK 11启动的时候 directoy 直接报UnsupportedClassVersionError那是真的欲哭无泪。Java 版本向下兼容做得不错但 Tomcat 7 的代码是上古时期写的对高版本 JDK 的模块化支持很差跑起来一堆反射警告搞不好还会内存溢出。所以别纠结就是 JDK 1.8。下载的时候认准 Windows x64 版本文件名一般是jdk-8u211-windows-x64.exe这种格式。Oracle 官方那个下载页面现在要登录才能拿国内镜像站也能下但一定要校验一下文件大小和哈希免得不小心拿到被塞了东西的安装包。安装路径我建议直接放C:\Java\jdk1.8.0_211不要用默认的C:\Program Files\Java\...因为 Program Files 中间有空格后面配环境变量的时候容易写错虽然现在 Windows 能识别带空格的路径但保不准哪个老脚本就翻车了。2.2 环境变量配置JAVA_HOME、PATH、CLASSPATH 分别怎么填安装完 JDK 之后最关键的一步是配置环境变量。右键“此电脑” → 属性 → 高级系统设置 → 环境变量在系统变量里操作。先新建JAVA_HOME变量值填你的 JDK 安装根目录不带\bin后缀JAVA_HOME C:\Java\jdk1.8.0_211然后是PATH这个最容易写错。找到系统变量里的 Path点编辑在最后面追加两行注意不要删掉原来的任何内容%JAVA_HOME%\bin %JAVA_HOME%\jre\bin最后是CLASSPATH这个变量现在说实话不是必须的但是老教程都会配我也建议配上省得哪天跑老项目的时候踩坑CLASSPATH .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar配完环境变量关掉所有命令行窗口重新开一个然后执行java -version验证。能看到java version 1.8.0_211就说明 JDK 层已经通了。我一般还会顺手执行一下javac -version因为有些极简安装包只装了 JRE 没装 JDK 编译器Tomcat 虽然只需要 JRE 就能跑但你的网站源码如果是 .java 文件需要编译没 javac 就白搭。3. 部署 Tomcat 7webapps 目录的玩法决定网站能不能起来3.1 下载解压和基础目录结构Tomcat 7 不需要安装下载 zip 压缩包解压就能用。下载的时候注意区分apache-tomcat-7.0.xx-windows-x64.zip和apache-tomcat-7.0.xx.tar.gzWindows 下用 zip 那个。解压路径也建议不要带空格和中文我一般放在D:\apache-tomcat-7.0.108这样的位置。解压完后你会看到这样几个关键目录目录名作用bin存放启动和停止脚本startup.bat 和 shutdown.bat 在这里conf核心配置目录server.xml 改端口就在这里webapps网站部署目录把源码丢进来就能访问logs日志目录排查问题第一眼看这里temp临时文件目录启动时生成的中间文件Tomcat 启动前还要配一个环境变量CATALINA_HOME这个变量名不要写错Tomcat 内部脚本全靠它定位自己的家目录。新增系统变量CATALINA_HOME D:\apache-tomcat-7.0.108然后在 PATH 里加上%CATALINA_HOME%\bin这样你在任意目录下都能直接敲startup.bat启动 Tomcat不用每次先 cd 到 bin 目录。3.2 把网站源码放进 webapps 的两种姿势网站源码丢进 webapps 有两种玩法一种是直接丢文件夹另一种是丢 WAR 包。直接丢文件夹是最直观的比如你的网站首页是 index.html 或 index.jsp那就新建一个文件夹比如叫myweb把网站文件全部放进去目录结构大概是D:\apache-tomcat-7.0.108\webapps\myweb\index.html D:\apache-tomcat-7.0.108\webapps\myweb\css\style.css D:\apache-tomcat-7.0.108\webapps\myweb\js\main.js D:\apache-tomcat-7.0.108\webapps\myweb\WEB-INF\web.xml如果是 WAR 包直接把.war文件丢到 webapps 目录下Tomcat 启动的时候会自动解压部署。注意 WAR 包的名字就是访问路径比如myweb.war解压后叫myweb访问地址就是http://localhost:8080/myweb/。接下来启动 Tomcat进到 bin 目录双击startup.bat或者命令行执行startup.bat。第一次启动建议用命令行方式因为窗口里会直接打印日志能看到启动进度。等到出现Server startup in [xxxx] milliseconds就说明启动成功这时候浏览器访问http://localhost:8080/myweb/能看到你的网站首页说明 Tomcat 层已经通了。3.3 改端口8080 被占用的处理方案Tomcat 默认端口是 8080但这个端口太容易被其他程序抢了最常见的就是别的 Java 服务或者某些开发工具占用了它。启动后浏览器访问http://localhost:8080/却打不开先别急着怀疑 Tomcat 坏了执行一下netstat -ano | findstr 8080看看是谁占着这个端口。找到占用进程的 PID 后打开任务管理器找到对应进程确认没用的就结束掉。还有一种做法是直接给 Tomcat 换端口编辑conf\server.xml找到这段配置Connector port8080 protocolHTTP/1.1 connectionTimeout20000 redirectPort8443 /把port8080改成port8090或别的空闲端口然后重启 Tomcat。改端口有个副作用你得记住后面 ngrok 映射的端口也要跟着改成一样的不然外网请求转发过来Tomcat 根本不认。4. 注册并配置 ngrok内网穿透的账号、客户端和启动顺序4.1 ngrok 账号注册和免费版限制说明ngrok 是做内网穿透的老牌工具了原理说起来很简单ngrok 客户端在你本机和 ngrok 服务器之间建立一条加密隧道服务器分配一个公网域名所有对这个域名的请求都会被转发到你本机的指定端口。外网用户访问的时候实际上是在访问 ngrok 的服务器服务器再通过隧道把请求送到你的 Tomcat 上。首先去 ngrok 官网注册一个账号免费版即可。注册的时候注意ngrok 官网有时访问不太顺畅如果打不开界面就换个时段再试。注册完成后在后台能看到你的 authtoken这是一串很长的 token 字符串复制保存好后面要用。4.2 下载客户端和鉴权一条龙ngrok 客户端下载下来是一个压缩包解压后只有一个可执行文件。放到一个干净目录比如D:\tools\ngrok建议跟 Tomcat 目录不要混在一起。打开命令行先切换到 ngrok 所在目录执行鉴权命令ngrok authtoken 你的token字符串看到Authtoken saved to configuration file就说明鉴权成功。这个 token 是绑定你账号身份的它会自动写入 ngrok 的配置文件以后不用每次都执行。如果你换了电脑或者删了配置文件就得重新跑一遍这条命令。4.3 启动顺序先 ngrok 还是先 Tomcat这是整套环境里最容易翻车、也最玄学的一个点。官方启动文档一般是让你先启动本地服务再启动 ngrok 客户端。但实际操作下来我发现一个规律先启动 Tomcat等它完全起来且能正常访问再启动 ngrok这样最稳。如果你先开 ngrokngrok 检测不到本机端口有服务在监听它会给你一个隧道地址但访问的时候全是 502你得完全退出 ngrok 重新来一遍很烦。所以正确的启动顺序是先执行startup.bat启动 Tomcat确认http://localhost:8080/myweb/能正常打开再另开一个命令行窗口进入 ngrok 目录执行映射命令ngrok http 8080如果你的 Tomcat 改过端口了比如改成 8090那这条命令就改成ngrok http 8090。执行成功后会进入 ngrok 的交互界面上面显示一个Forwarding地址格式是https://xxxxxx.ngrok.io和http://xxxxxx.ngrok.io两个。这个地址就是你的公网访问入口。有个小细节要提醒ngrok 客户端窗口要保持开着一关隧道就断了。而且免费版的 ngrok 每次启动都会分配一个新的随机域名所以你得在每次启动后把你最新的那个网址发给要看网站的人。5. 踩坑与排查15 个让网站打不开的致命细节5.1 现象外网访问显示 502 Bad Gateway这个报错我在帮人排查的时候见得最多。现象是 ngrok 和 Tomcat 都显示正常本地 localhost 也能打开网站但外网访问 ngrok 给的地址却报 502而且切到 http 协议也一样。原因不是 ngrok 服务器挂了而是 ngrok 客户端在建立隧道的时候本地端口服务响应超时或不存在。排查顺序是这样先看 ngrok 客户端界面里有没有红色报错信息有的话一般是dial tcp 127.0.0.1:8080: connect: connection refused这句话直接告诉你它连不上本机 8080。这时候回过来想一下Tomcat 是不是真的启动完了如果 Tomcat 是刚启动还没完全 readyngrok 就开了隧道那请求过来 Tomcat 根本没在监听。解决做法是重启一遍流程严格按“Tomcat 先起 → 本机验证 → ngrok 后起”的顺序来。如果还不通执行netstat -ano | findstr 8080确认 Tomcat 监听的是不是 8080有些机器上之前的 Java 服务残留还占着端口没释放。5.2 现象Tomcat 启动后命令行窗口一闪而过这个属于新手必踩的坑。双击 startup.bat 后黑窗口闪了一下就消失了Tomcat 完全没有启动的迹象去浏览器访问 localhost 也是打不开。原因是 startup.bat 执行过程中报错了但窗口关闭太快看不到错误信息。我也被这个坑折磨过好几次后来养成了一个自救习惯编辑bin\startup.bat文件在最后一行加上一句pause这样窗口就不会自动关闭你就能看到具体的报错内容。最常见的报错是CATALINA_HOME环境变量没配置对或者JAVA_HOME指向的路径里根本不存在 java.exe。还有人的 JAVA_HOME 配到了C:\Java\jdk1.8.0_211\bin这错得很隐蔽因为单看路径好像没问题但 JAVA_HOME 的规范值是根目录而不是 bin 目录。5.3 现象ngrok 启动报错找不到命令有次一个开发者跑来找我说 ngrok 一启动就报ngrok 不是内部或外部命令。他这个肯定是没进到 ngrok 目录就直接敲命令了Windows 不像某些 Linux 发行版那样会自动把当前目录加到 PATH 里。解决做法很简单要么先cd D:\tools\ngrok再执行命令要么把 ngrok 目录手动加到 Path 环境变量里。我一般选后者因为这样后面写批处理启动脚本的时候更方便。5.4 现象网站能访问但图片和样式全丢了这是一个很容易被忽略的坑。现象是页面文字能出来但 CSS 样式错乱、图片全部裂开。打开浏览器开发者工具报错全是 404路径指向/myweb/css/style.css但实际文件在WEB-INF下面藏着。根本原因是项目结构不对。很多新人把 web.xml、class 文件、jar 包和 HTML、CSS 全部扔在一个平级目录里然后 Tomcat 就按照 Servlet 规范来处理了。记住Tomcat 里 webapps 下每个应用的WEB-INF目录是受保护的浏览器永远无法直接访问WEB-INF下面的东西。你的 HTML、CSS、JS 这些静态资源必须放在 webapps\myweb 根目录下或者根目录的子目录里就是不能塞进 WEB-INF。这时候把文件挪出来重启 Tomcat 就正常了。5.5 现象免费版 ngrok 域名每次启动都变这不是配置错误而是免费版的固有机制。每次 ngrok 客户端重启分配的域名都会随机变化也就是说你发给别人的链接在 ngrok 重启后就失效了。解决办法是注册 ngrok 官方那个提供固定域名的付费方案或者接受每次分享新网址的现实。还有一个临时办法启动 ngrok 后赶紧把新域名通过聊天工具发出去别拖。注意免费版 ngrok 带宽和并发都有限制演示、联调够用千万别拿它跑生产环境流量被别人打满是小隧道被封是大的。6. 验证跑通外网访问前的六步自检法装完这套环境后我每次都会强制走一遍下面这个验证流程按顺序来缺一步都不行。这套方法救过我很多次从“不知道哪里坏了”进化到“看一眼就知道哪里坏了”。第一步验证 Java 环境。命令行执行java -version输出必须是 1.8 开头。如果输出的是 17 或者 21说明你 PATH 里有新版 JDK 把老的顶掉了Tomcat 可能会起不来。第二步验证 Tomcat 端口监听。执行netstat -ano | findstr 8080看到 LISTENING 状态说明 Tomcat 进程在跑。这一步比看 startup.bat 窗口有没有闪退更可靠因为窗口有时候会僵在那里但不报错。如果这里啥都没有直接去D:\apache-tomcat-7.0.108\logs\catalina.out或今天的 catalina.日期.log 文件看最后几十行你会发现真正的原因。第三步验证本地网站可访问。浏览器打开http://localhost:8080/myweb/页面必须正常渲染样式图片齐全。如果你改了端口就用你改的端口测。这一步不过绝对不往下走。第四步验证 ngrok 隧道状态。看 ngrok 客户端界面的Forwarding那行确认显示的端口和 Tomcat 监听端口一致。有个很隐蔽的问题是你映射写的是 8080但 Tomcat 实际起在 8090ngrok 客户端看着是正常运行外网全挂。第五步外网访问实测。拿手机切到蜂窝网络访问 ngrok 给你的域名别在电脑上测试——因为电脑本机访问 ngrok 的地址流量走的是本地回环测不出隧道转发的真实效果。手机访问能打开页面才是真的通了。第六步收尾蹲坑。测试完了记得把 ngrok 进程关掉不然你的电脑会一直维护一条公网隧道耗电倒是小事主要是不安全——任何人都可以通过那个链接摸到你本机的 8080 端口。那以后我每次演示完都强制自己按六步走一遍java 版本、端口监听、本地访问、检查端口映射、手机外网验证、关掉 ngrok。步骤不多但每一步都卡一个常见的坑顺序错了就可能白折腾半天。希望这篇笔记也能帮你在装这套环境的时候少走点弯路。本文还有配套的精品资源点击获取