简介：一份面向入门开发者和网页爱好者的个人网站搭建教程，系统讲解如何让本地电脑上的站点被外网稳定访问。文档从准备条件讲起，覆盖JDK 1.8环境配置、Apache Tomcat 7安装与部署、个人网站源码整理，以及通过ngrok实现内网穿透的关键环节，并配有外网访问原理图和明细操作流程，特别提醒先启动ngrok再启动Tomcat的先后顺序，避免因启动次序颠倒导致映射失败。资源为单个doc文档，压缩包仅164KB，内容以图文步骤为主，便于边看边操作。教程结构清晰，从零到发布一条线贯穿，涵盖四类基础条件与常见注意事项，适合个人开发者、网站测试人员和学生快速完成外网访问测试与作品分享。已有1596人学习下载，能有效节省自行摸索时间，尤其适合初次接触内网穿透的初学者。
1. 个人电脑通过外网访问自己的网站：一条内网穿透隧道解决的问题
本地写好的网页，手机一开就打不开，发给朋友看效果还得先找个服务器。做个人网站、前端测试、毕设演示，都会撞上同一堵墙：自己电脑上的服务只有自己能访问。这篇文章要解决的正是这个诉求——用 JDK 1.8 把 Tomcat 7 跑起来，再把网站源码丢进 webapps，最后用 ngrok 打一条隧道，让外网用户通过一个公网 URL 直接访问你本地电脑上的网站。整套流程适合初学者，但里面埋了不少坑，比如启动顺序搞反会白折腾一小时，免费隧道域名天天变会让链接失效。我按实际经验把安装、部署、穿透、排错串成一条完整链路，照着做就能把个人网站从本机搬到公网。
2. 部署环境：装好 JDK 1.8 和 Tomcat 7，别让环境变量背锅
2.1 JDK 1.8：为什么是它，装完怎么验证
Tomcat 是 Java 写的，底层要跑 JVM，所以装 Tomcat 之前必须先装 JDK。JDK 1.8 在 Tomcat 7 语境里几乎是默认搭配，Tomcat 7 官方说明里明确支持 Java 6 到 Java 8，你装个 JDK 11 或 JDK 17 反而可能遇到兼容性警告，某些老项目在更高版本 JDK 上直接启动报错。如果你是照着一份老教程走到这一步，更别纠结版本，JDK 1.8 就是这个场景的最稳答案。
去 Oracle 官网下载 JDK 1.8 的 Windows 安装包，下载时要选对系统版本，64 位系统就选 Windows x64 的 exe。安装路径建议保持默认，比如C:\Program Files\Java\jdk1.8.0_xxx，后面配置环境变量时要用到。安装完成后，打开命令行工具，输入java -version验证，能输出类似java version "1.8.0_201"就算装好了。
java -version输出里出现java version "1.8.0_xxx"而不是java version "17.0.x"，说明 JDK 版本正确。如果提示'java' 不是内部或外部命令，说明没装好或环境变量没配。JDK 安装包通常会自动把java.exe加入系统路径，但javac.exe和JAVA_HOME很多时候不会自动配，建议手动补上，省得后面出幺蛾子。
关键参数是JAVA_HOME，指向 JDK 安装根目录，不是 bin 子目录。按照常见做法，在系统环境变量里新增JAVA_HOME=C:\Program Files\Java\jdk1.8.0_201，再把%JAVA_HOME%\bin追加到Path变量。配完后重新开一个命令行窗口，java -version和javac -version都能正常输出，环境这关才算过。
2.2 Tomcat 7：解压版和安装版的区别、启动与端口
Tomcat 7 的下载页上通常给两个版本：Windows Service Installer（安装版）和 zip 压缩包（解压版）。我用解压版，理由很直接：解压版能同时放多个不同版本的 Tomcat 在磁盘上，想换就换，不用卸载重装；安装版会注册成 Windows 服务，开机自启，对临时测试反而是一种干扰，关掉它还要去服务管理器里操作。
下载 Tomcat 7 的 zip 包后，解压到某个目录，比如D:\tomcat7。解压完的目录结构里，bin目录放启动和关闭脚本，webapps目录放网站源码，conf目录放配置文件。启动是双击bin\startup.bat，关闭是双击bin\shutdown.bat。关掉启动窗口不等于关掉 Tomcat，真正的关闭命令是 shutdown.bat，这个细节容易被初学者忽略。
启动后验证 Tomcat 是否正常运行，打开浏览器访问http://localhost:8080/，能看到默认的 Tomcat 欢迎页就说明服务跑起来了。如果打不开，先查端口是否冲突，在命令行执行：
netstat -ano | findstr :8080这个命令会列出占用 8080 端口的进程 PID。如果有其他程序占用了 8080，可以改 Tomcat 的端口，编辑conf\server.xml，找到<Connector port="8080" protocol="HTTP/1.1"，把 8080 改成 8081 或其他空闲端口。改完重启 Tomcat，再用新端口访问。我一般会顺手把端口改成 8081，因为本机跑多个 Java 服务时 8080 太容易被占用。
3. 部署网站源码：让 Tomcat 识别你的首页
3.1 把源码放进 webapps，还是一整包 war
网站源码的形态决定了部署方式。如果你的源码是一堆 HTML、CSS、JS 文件，目录结构是index.html、css\、js\这种，直接把这个文件夹拷贝到 Tomcat 的webapps\目录下，重命名为你想要的访问路径即可。如果你的源码打包成了 war 文件，Tomcat 会在启动时自动解压到同名目录，部署时把 war 包丢进 webapps 就行。
我见过不少人在这一步翻车：源码目录放到 webapps 之后，访问路径写错，一直看到 404。比如你把网站文件夹命名为mysite，放在webapps\mysite，访问地址就应该是http://localhost:8080/mysite/，不是http://localhost:8080/。根路径留给 Tomcat 自带的 ROOT 目录，除非你把自己的站点改名成 ROOT 去覆盖它。
还有一种需求是把个人站点直接挂在根路径下，我一般会这么做：先把 webapps 下的 ROOT 目录名改掉，比如改成ROOT.bak，再把自己的站点目录改名为 ROOT。这样访问http://localhost:8080/时直接进入你的网站首页，不需要加子路径。这个技巧在后续用 ngrok 穿透时挺方便，公网 URL 打进去就是站点首页，少了一层路径。
常见做法是把动态 Java 项目打成 war 包放进去，Tomcat 会自动解压。war 包的名字就是访问路径，比如myapp.war会自动解压成webapps\myapp，访问路径是/myapp。部署完想更新代码，可以直接替换目录里的文件，不必重启 Tomcat，静态资源改完刷新浏览器就能看到；改了 Java 类则必须重启。
3.2 本地访问确认：http://localhost:8080/xxx
启动 Tomcat 后，第一步是本地验证网站能跑。在浏览器输入访问地址，能正常显示首页，才能进入下一步穿透。这一步你别跳过，我见过有人 Tomcat 都没起成功，直接去开 ngrok，结果公网 URL 打开一片空白，排查了半天发现是本地服务压根没跑。
本地验证分三层：第一层看 Tomcat 进程是否存活，命令行执行tasklist | findstr java，有 java 进程说明 JVM 起来了；第二层看端口是否能连通，浏览器能打开 Tomcat 欢迎页；第三层看自己的站点能否访问，能打开首页并且样式、图片都正常，才算本地部署完成。
如果本地访问报 404，先看webapps目录下有没有站点的文件夹或 war 包。再看 Tomcat 启动日志logs\catalina.out（Windows 下可能是logs\catalina.日期.txt），里面会打印部署失败的原因，最常出现的是路径写错、端口被占、war 包损坏。日志是排错的第一入口，别一上来就怀疑 ngrok 的问题。
静态资源加载不出来，大概率是源码里的路径写成了绝对路径，比如href="/css/style.css"在子路径部署时会指向根目录，导致 404。解决方案是改用相对路径href="css/style.css"，或者在部署时保持路径层级和源码设计时一致。这个坑在 HTML 静态网页上很容易踩。
4. ngrok 端口穿透：注册、启动命令和顺序
4.1 注册隧道：ngrok 账号的用途
ngrok 做的是内网穿透：本地服务器没有公网 IP，外网用户无法直接访问，ngrok 提供一个公网入口，把外网请求转发到你本机的指定端口。它分配的 URL 形如http://xxxx.ngrok.io，在个人电脑没有公网 IP、也没有路由端口映射条件的情况下，这是最省事的方案。
使用 ngrok 需要先在官网注册账号。注册完成后，在 dashboard 里可以看到一个专属的 Authtoken，这个 token 要填到 ngrok 客户端里，客户端才能识别你的账号、建立隧道。没有这一步，ngrok 客户端会提示未认证，无法建立隧道。
ngrok 客户端支持两种模式：在线生成的隧道命令，和本地客户端ngrok http 端口号的命令。前者在网页上配置好后会自动生成一条命令让你复制；后者直接在命令行运行。我推荐用本地客户端，因为命令里可以加参数控制隧道名、域名、HTTPS 开关，调试起来更直观。
免费账号和付费账号的差异主要在隧道数量、域名固定与否、带宽限制。免费版隧道域名每次启动可能会变化，适合短时分享和测试；付费版能固定子域名，地址不变，适合长期演示。初学者先用免费版跑通流程，再考虑要不要付费。
4.2 启动命令与顺序：先隧道后 Tomcat
这是整套流程里最玄学但最关键的一个点：先启动 ngrok 隧道，再启动 Tomcat。顺序反了会出现一种诡异现象——ngrok 页面显示Tunnel Session Error，或者隧道建好了但公网 URL 打不开。
做法是：先开一个命令行窗口，运行ngrok http 8080（端口要跟 Tomcat 的server.xml里配置的端口一致），看到Forwarding那一行出现公网 URL，说明隧道建立成功。然后再双击startup.bat启动 Tomcat。此时在浏览器打开 ngrok 给出的公网 URL，就能访问到本地网站首页。
ngrok http 8080命令里8080是本地要暴露的端口，必须和 Tomcat 实际监听的端口一致。如果你在server.xml里把端口改成了 8081，这里就写ngrok http 8081，写错端口的话隧道转发过去的是一个没有任何服务在监听的端口，公网 URL 打开会直接报 502。
启动 ngrok 后，命令行窗口会进入实时日志界面，能看到每次访问公网 URL 的请求记录，包括请求路径、状态码、来源 IP。这个日志在排错时非常有用：公网能访问但显示 404，看日志里请求路径是否正确；公网打不开，先看有没有Tunnel Session Error，有就是 token 或网络的问题。
Tomcat 和 ngrok 两个窗口尽量都保持前台运行，不要最小化到托盘。ngrok 的日志窗口里如果出现黑色背景下的红色错误信息，通常是端口写错、token 失效、或者免费隧道达到数量上限，三条排查路径很明确。
4.3 原理图：隧道如何串起来
外网用户访问 ngrok 分配的公网 URL，请求到达 ngrok 的服务器，ngrok 服务器再通过隧道转发到本地 ngrok 客户端，客户端把请求转交给本地 8080 端口上监听的 Tomcat，Tomcat 处理完返回响应，响应原路返回给用户。用户感知到的只是访问了一个公网 URL，背后发生了两次转发。
这个链路里有三个关键组件：ngrok 服务器的公网入口、ngrok 本地客户端、Tomcat 的监听端口。任何一个环节断开，访问就会失败。常见断点：Tomcat 没启动或端口写错、ngrok 客户端掉线、免费隧道域名过期。
我把这个链路记成一句话：公网 URL → ngrok 服务器 → 本地 ngrok 客户端 → localhost:8080 → Tomcat → 网站源码。排错时从右往左查：先确认网站源码在本地能访问，再确认 Tomcat 的 8080 端口有响应，再确认 ngrok 客户端在线，最后才怀疑公网 URL 本身。
5. 外网访问的常见问题排查：5 条踩坑记录
5.1 公网 URL 打开 502 Bad Gateway
现象：本地http://localhost:8080能正常打开网站，但 ngrok 分配的公网 URL 访问后显示 502 Bad Gateway。
原因：ngrok 隧道建好了，但它转发到的端口上没有服务在监听。最常见的是 ngrok 命令写的端口和 Tomcat 实际端口不一致，或者 Tomcat 在 ngrok 启动之后又崩了。
解决：先关闭 ngrok，确认 Tomcat 还在运行，浏览器本地访问一次确认端口无误，再启动 ngrok 并确认命令行输出的端口参数。一条命令搞定验证：netstat -ano | findstr 8080，有 LISTENING 状态说明端口活着，再去开隧道。
5.2 免费隧道域名隔天就变
现象：昨天分享给朋友的链接还能打开，今天同一个 URL 访问直接 404，但 ngrok 客户端显示隧道正常。
原因：免费版隧道在客户端退出或电脑重启后会分配新的随机域名，旧域名随之失效。不是网站挂了，是地址变了。
解决：启动 ngrok 后，手动去客户端日志里复制最新的公网 URL，重新发给对方。要固定域名，就得用付费版节点，或者注册时选固定的子域名方案。我把这个习惯写进了流程：每次启动 ngrok 后，第一件事就是把新的 URL 复制到记事本，分享时直接粘新地址。
5.3 Windows 防火墙弹窗拦截
现象：ngrok 客户端显示隧道正常，但公网 URL 访问超时，本地访问完全没问题。
原因：Windows 防火墙拦截了 ngrok 客户端的入站连接，隧道握手失败。
解决：在防火墙弹窗出现时点允许，或者手动在「Windows Defender 防火墙」里的「允许应用通过防火墙」中把 ngrok.exe 勾上，专用网络和公用网络都勾。如果已经点了取消，去防火墙设置里手动添加即可。这个坑在第一台 Windows 电脑上最常见，换电脑后建议先检查这一步。
5.4 Tomcat 启动窗口一闪而过
现象：双击startup.bat，黑色窗口闪现一下就消失，Tomcat 没启动。
原因：Java 环境变量没配好，Tomcat 找不到JAVA_HOME或JRE_HOME，启动脚本执行失败后窗口自动关闭。
解决：先确认java -version能正常输出；再确认JAVA_HOME变量指向的是 JDK 安装目录而不是 bin 子目录；最后在命令行手动执行%CATALINA_HOME%\bin\startup.bat，不要双击，这样能看到完整的报错信息。我用这个方式定位过好几次问题，错误信息里会明确提示缺哪个环境变量。
5.5 局域网内手机能访问，外网还是打不开
现象：手机连着同一个路由器的 Wi-Fi，访问http://局域网IP:8080能打开网站；但把 ngrok 公网 URL 发给朋友，对方打不开。
原因：ngrok 隧道本身没问题，但免费版节点在某些网络环境下被运营商拦截或限速，公网可达性差。这不代表你的配置错了，是免费服务的通病。
解决：换 ngrok 的备用节点（客户端启动时选不同的 region），或者换一个穿透服务对比测试。如果网站只是给几个人临时看，还可以用 ngrok 的 TCP 隧道模式搭配 SSH 访问来绕过 HTTP 干扰，但复杂度会高一些。初学者不建议折腾，直接换节点重试。
6. 进阶用法：固定域名、HTTPS 和临时访问控制
6.1 用固定子域名让链接长期有效
免费版 ngrok 每次启动分配的域名是随机的，不适合长期分享。如果你只是自己测试，每次复制新 URL 无所谓；但如果你要把链接发给导师或客户，地址三天两头变会很尴尬。常见做法是在 ngrok 的命令里直接指定子域名参数，前提是账号有对应权限：
ngrok http 8080 --subdomain=mysite命令里的mysite是你要用的子域名前缀，最终的公网 URL 形如http://mysite.ngrok.io。如果子域名被占用或账号等级不够，命令会报错。免费账号通常不支持自定义子域名，这才是很多教程里让你直接复制网页生成的命令的原因。
6.2 让网站自带 HTTPS 访问
现代浏览器对 HTTP 越来越不友好，某些浏览器会在地址栏标红提示不安全。ngrok 客户端默认会给公网 URL 同时分配 HTTP 和 HTTPS 两个地址，日志里的Forwarding行会显示两行，一行是http://xxx，一行是https://xxx。直接把 HTTPS 的地址分享出去就行，证书由 ngrok 自动处理。
ngrok http 8080 --host-header=rewrite--host-header=rewrite这个参数解决的是 Host 头校验问题。某些网站应用会校验请求的 Host 字段，ngrok 转发时如果不重写 Host 头，Tomcat 可能返回 400 或 403。我一般启动 ngrok 都顺手带上这个参数，省得遇到应对问题。
6.3 临时访问控制的取舍
ngrok 的免费隧道本质上是把本机端口暴露到公网，任何人都能通过 URL 访问。NGINX 或 Tomcat 层面不加控制的话，等于把你的网站裸奔在公网。我一般测试完就关掉 ngrok，不留过夜。还有一个习惯：分享链接前先在浏览器用两个不同的设备访问一遍，确认页面渲染正常再发出去。
这套流程走通之后，我每次做前端演示都固定走一条路线：确认本地端口 → 启动 ngrok 带上 rewrite 参数 → 复制 HTTPS URL → 用手机流量验证一次再发链接。从那以后，演示前临时翻车的概率少了一大半，希望帮到你。
本文还有配套的精品资源，点击获取
