零成本个人公网网站搭建全流程（服务器搭建+内网穿透+绑定域名）
<h1 id="零成本个人公网网站搭建全流程服务器搭建内网穿透绑定域名">零成本个人公网网站搭建全流程（服务器搭建+内网穿透+绑定域名）</h1><h1 id="导言">导言：</h1>
<p>一个基础的网站由三部分构成：</p>
<blockquote>
<p>1、公网域名</p>
<p>2、网页内容（html前端）</p>
<p>3、网站服务器（处理访问请求，返回数据的后端的运行环境）</p>
</blockquote>
<h2 id="例如百度网站">例如百度网站</h2>
<p><img src="https://img2024.cnblogs.com/blog/3281938/202508/3281938-20250830233755300-674736270.png" alt="image-20250830222104747" loading="lazy"></p>
<blockquote>
<p>可以直观看到的是域名www.baidu.com，和<strong>网页内容（html）</strong></p>
<p>看不到的是后端运行的<strong>百度网站服务器</strong></p>
</blockquote>
<p>我们要实现自己的网站，能让他人任意访问，就需要具备相同的构成。</p>
<p>当然，不用公网域名也可以，那样就是局域网内的网站，实际作用就很受限了</p>
<h1 id="域名获取">域名获取</h1>
<p>付费方案：在阿里云万网购买喜欢的域名</p>
<p>免费方案：注册NATPP网站，获取免费域名（域名三天到期，可免费再次申领三天，可无限续杯，但域名会变）</p>
<p><img src="https://img2024.cnblogs.com/blog/3281938/202508/3281938-20250830233756418-629993026.png" alt="image-20250830222925354" loading="lazy"></p>
<p>根据需求选择web协议</p>
<p><img src="https://img2024.cnblogs.com/blog/3281938/202508/3281938-20250830233757386-139222117.png" alt="image-20250830223454890" loading="lazy"></p>
<p>保存<strong>authtoken</strong>和域名</p>
<p><img src="https://img2024.cnblogs.com/blog/3281938/202508/3281938-20250830233758954-1995078952.png" alt="image-20250830223615080" loading="lazy"></p>
<p>至此，我们获得了可以分享给他人访问的域名</p>
<h1 id="内网穿透">内网穿透</h1>
<p>修改内网穿透配置文件</p>
<p>使用本地配置文件config.ini - NATAPP-内网穿透 基于ngrok的国内高速内网映射工具</p>
<p><img src="https://img2024.cnblogs.com/blog/3281938/202508/3281938-20250830233800022-412755278.png" alt="image-20250830225657353" loading="lazy"></p>
<p>运行内网穿透软件natapp.exe</p>
<p><img src="https://img2024.cnblogs.com/blog/3281938/202508/3281938-20250830233800614-321648521.png" alt="image-20250830224745166" loading="lazy"></p>
<p>上图是成功运行界面</p>
<h1 id="搭建网站服务器">搭建网站服务器</h1>
<h2 id="1-python-web-服务器示例flask"><strong>1. Python Web 服务器示例（Flask）</strong></h2>
<p>假设 Natapp 映射的是 <strong>5000 端口</strong>，你可以写 <code>server.py</code>：</p>
<pre><code class="language-python">from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def home():
# Flask 会去 templates/index.html 找文件并返回
return render_template("index.html")
if __name__ == "__main__":
# 用 0.0.0.0 监听所有地址，端口 80（Natapp 转发用）
app.run(host="0.0.0.0", port=80)
</code></pre>
<p>安装 Flask：</p>
<pre><code class="language-bash">pip3 install flask
</code></pre>
<p>运行：</p>
<pre><code class="language-bash">python3 server.py
</code></pre>
<p>此时本地的 80端口上已经有网站了。显示的是本地index.html网页文件</p>
<p><img src="https://img2024.cnblogs.com/blog/3281938/202508/3281938-20250830233801242-2146430783.png" alt="image-20250830224953242" loading="lazy"></p>
<p>网页内容html前端：</p>
<p>在此我就只是展示几段文字，一个图片，一个跳转按钮。由于图片是本地图片，使用预览并不能显示</p>
<p><img src="https://img2024.cnblogs.com/blog/3281938/202508/3281938-20250830233801953-613120710.png" alt="image-20250830230237133" loading="lazy"></p>
<p>图片</p>
<p><img src="https://img2024.cnblogs.com/blog/3281938/202508/3281938-20250830233803247-1866586608.png" alt="image-20250830230416504" loading="lazy"></p>
<h1 id="运行效果">运行效果</h1>
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>web服务器</td>
<td>内网穿透软件</td>
</tr>
</tbody>
</table>
<p><img src="https://img2024.cnblogs.com/blog/3281938/202508/3281938-20250830233803986-2130307830.png" alt="image-20250830230847172" loading="lazy"></p>
<table>
<thead>
<tr>
<th>电脑访问效果</th>
<th>手机访问效果</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="https://img2024.cnblogs.com/blog/3281938/202508/3281938-20250830233809557-1586260617.png" alt="image-20250830225210401" style="zoom: 50%"></td>
<td><img src="https://img2024.cnblogs.com/blog/3281938/202508/3281938-20250830233804543-1006391158.png" alt="image-20250830230943289" loading="lazy"></td>
</tr>
</tbody>
</table>
<h2 id="4-注意事项"><strong>4. 注意事项</strong></h2>
<ul>
<li>Natapp 免费版域名会变，如果你想固定一个域名，需要升级到付费版。</li>
<li>你的 Flask 程序必须一直运行，Natapp 客户端也要一直运行，否则外部无法访问。</li>
</ul>
<h1 id="杂谈">杂谈</h1>
<p>目前使用Windows PC个人电脑运行网站部署，但是个人电脑耗电较高，可以使用性能较高，稳定的做法，租个云服务器来跑网站。</p>
<p>但我有卡片电脑——泰山派（类似树莓派），运行linux系统，搭建方法基本一致，搭建运行python web服务器，运行Natapp内网穿透（linux版本）</p>
<p>也可以手机下载Termux，配置Ubuntu环境，运行python服务器和Natapp内网穿透（linux版本）</p>
<p>非常的自由哈哈</p>
<p>预想中linux卡片电脑弄个网页挂载个数据库，绘制ui界面，配合MQTT或者WebSocket，加个esp32s3+lvgl+检测传感器数据上传到网站显示，做个物联网云平台，来当毕设，感觉会挺有意思</p>
<p><em>如果各位大佬觉得该文章对您有帮助，有意思，恳请点点左下角的<strong>推荐该文</strong>，不胜感激！</em></p>
<p><img src="https://img2024.cnblogs.com/blog/3281938/202508/3281938-20250830233805586-1017198874.png" alt="image-20250830232848794" loading="lazy"> <img src="https://img2024.cnblogs.com/blog/3281938/202508/3281938-20250830233806426-1873949988.png" alt="image-20250830232858951" loading="lazy"></p>
<p><img src="https://img2024.cnblogs.com/blog/3281938/202508/3281938-20250830233807345-1825494684.png" alt="image-20250830232912607" loading="lazy"></p>
<p><img src="https://img2024.cnblogs.com/blog/3281938/202508/3281938-20250830233808162-1134429300.png" alt="image-20250830232934627" loading="lazy"></p>
<h1 id="基础代码">基础代码</h1>
<h2 id="服务器">服务器</h2>
<h2 id="python-server">python server</h2>
<pre><code class="language-python"># from flask import Flask
# app = Flask(__name__)
# @app.route("/")
# def home():
# return "<h1>Hello! 这是pyc的 服务器</h1>"
# if __name__ == "__main__":
# # 修改端口为 80，与 Natapp 配置匹配
# app.run(host="0.0.0.0", port=80)
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def home():
# Flask 会去 templates/index.html 找文件并返回
return render_template("index.html")
if __name__ == "__main__":
# 用 0.0.0.0 监听所有地址，端口 80（Natapp 转发用）
app.run(host="0.0.0.0", port=80)
</code></pre>
<h2 id="网页html">网页html</h2>
<pre><code class="language-html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>我的 Flask 网页</title>
</head>
<body>
<h1>Hello! 这是 xxx的服务器 Web 页面</h1>
</body>
</html>
</code></pre>
<h2 id="natapp-配置文件configini">Natapp 配置文件config.ini</h2>
<pre><code class="language-txt">#将本文件放置于natapp同级目录 程序将读取 段
#在命令行参数模式如 natapp -authtoken=xxx 等相同参数将会覆盖掉此配置
#命令行参数 -config= 可以指定任意config.ini文件
authtoken= #对应一条隧道的authtoken
clienttoken= #对应客户端的clienttoken,将会忽略authtoken,若无请留空,
log=none #log 日志文件,可指定本地文件, none=不做记录,stdout=直接屏幕输出 ,默认为none
loglevel=ERROR #日志等级 DEBUG, INFO, WARNING, ERROR 默认为 DEBUG
http_proxy= #代理设置 如 http://10.123.10.10:3128 非代理上网用户请务必留空
</code></pre><br><br>
来源：https://www.cnblogs.com/tianwuyvlianshui/p/19066410
頁:
[1]