文章目录
- [💻 如何用废弃电脑变成服务器搭建 Web 网站（公网访问零成本）](#💻 如何用废弃电脑变成服务器搭建 Web 网站（公网访问零成本）)
-
- 一、背景与目标
-
- [✅ 本文目标：](#✅ 本文目标：)
- 二、准备工作（软硬件需求）
-
- [🧱 1. 硬件需求](#🧱 1. 硬件需求)
- [🧰 2. 软件环境准备](#🧰 2. 软件环境准备)
- [三、快速搭建一个 Flask + Vue 的 Web 网站](#三、快速搭建一个 Flask + Vue 的 Web 网站)
-
- [✅ 第1步：创建 Flask 后端项目](#✅ 第1步：创建 Flask 后端项目)
- [✅ 第2步：创建 Vue 前端项目](#✅ 第2步：创建 Vue 前端项目)
- [四、免费实现公网访问：Cloudflare Tunnel 全流程](#四、免费实现公网访问：Cloudflare Tunnel 全流程)
-
- [❓ 1. 什么是 Cloudflare Tunnel？](#❓ 1. 什么是 Cloudflare Tunnel？)
- [✅ 2. Cloudflare Tunnel 实战步骤](#✅ 2. Cloudflare Tunnel 实战步骤)
-
- [（1）注册 Cloudflare 账号](#（1）注册 Cloudflare 账号)
- （2）添加站点
- [（3）下载并安装 `cloudflared` 工具](#（3）下载并安装
cloudflared工具) - [（4）登录 Cloudflare](#（4）登录 Cloudflare)
- [（5）创建 tunnel 并绑定本地服务](#（5）创建 tunnel 并绑定本地服务)
- 五、自动化部署建议
-
- [✅ Windows：](#✅ Windows：)
- [✅ Linux：](#✅ Linux：)
- 六、常见问题排查
- 七、总结与后续拓展
-
- [🎯 后续你可以拓展部署的项目：](#🎯 后续你可以拓展部署的项目：)
💻 如何用废弃电脑变成服务器搭建 Web 网站（公网访问零成本）
一、背景与目标
你是否有一台吃灰的旧笔记本电脑？你是否想搭建一个自己的网站，甚至把它放到网上给别人访问？传统方式可能需要花钱买服务器、配置公网 IP、操作麻烦。而我们今天要做的，是：
用你手边的废弃电脑（比如旧笔记本），搭建一个本地服务器，并使用 Cloudflare Tunnel 免费实现公网访问，0成本上线一个 Web 网站！
✅ 本文目标：
- 把一台废弃电脑（Windows/Linux）变成一台 后端 Flask + 前端 Vue 的 Web 服务器
- 0 花费实现公网访问（不需要买公网 IP，不需要租服务器）
- 可用于搭建资源站、博客站、API服务、自用管理系统等
二、准备工作（软硬件需求）
🧱 1. 硬件需求
| 名称 | 要求 |
|---|---|
| 废旧笔记本 | 建议内存≥4G，系统 Win10 或 Ubuntu |
| 网络 | 稳定联网即可（支持 IPv4 即可） |
| 电源 | 建议插电使用，避免中断 |
如果是台式电脑，也一样适用。
🧰 2. 软件环境准备
我们需要以下软件环境：
| 目的 | 软件 |
|---|---|
| 后端开发 | Python3 + Flask |
| 前端开发 | Node.js + Vue CLI |
| 公网访问 | Cloudflare Tunnel 工具 cloudflared |
| 其他 | Git（可选）、浏览器、命令行 |
三、快速搭建一个 Flask + Vue 的 Web 网站
我们先搭建一个最简单的 Flask + Vue 项目，用于后面上线演示。
✅ 第1步：创建 Flask 后端项目
bash
mkdir myserver && cd myserver
python -m venv venv
source venv/bin/activate # Windows用 venv\Scripts\activate
pip install flask创建一个 app.py：
python
from flask import Flask, jsonify
app = Flask(__name__)
@app.route('/')
def hello():
return jsonify({"msg": "你好，来自 Flask 的后端！"})
if __name__ == '__main__':
app.run(host='0.0.0.0', port=5000)然后运行：
bash
python app.py浏览器访问 http://localhost:5000，你应该能看到一段 JSON 文本：{"msg": "你好，来自 Flask 的后端！"}
✅ 第2步：创建 Vue 前端项目
确保你已经安装了 Node.js，建议版本 ≥ 16。然后执行：
bash
npm install -g @vue/cli
vue create my-frontend
cd my-frontend
npm run serve这时 Vue 默认监听 http://localhost:8080，你可以把它改成请求 Flask 后端的数据，后续我也会配合 Cloudflare Tunnel 展示如何整合。
四、免费实现公网访问：Cloudflare Tunnel 全流程
这部分我们重点讲清楚两个问题：
❓ 1. 什么是 Cloudflare Tunnel？
Cloudflare Tunnel 是 Cloudflare 提供的一种"内网穿透"方案：
- 本质上它在你的电脑与 Cloudflare 网络之间建了一个"隧道"；
- 外部用户访问 Cloudflare 提供的网址，Cloudflare 再转发到你电脑上的 Flask 服务；
- 整个过程是加密安全的，并不暴露你的真实 IP，也不需要配置路由器！
简而言之，它是一个免费的公网访问神器。
✅ 2. Cloudflare Tunnel 实战步骤
（1）注册 Cloudflare 账号
打开 https://dash.cloudflare.com，用邮箱免费注册一个账号。
（2）添加站点
你可以用自己已有的域名，也可以用 Cloudflare 提供的临时域名（推荐后者，零成本）。
建议添加一个网站，如 yourname.cf，不一定需要备案，用作演示即可。
（3）下载并安装 cloudflared 工具
这是 Cloudflare 提供的命令行工具，用来开启 tunnel：
-
Windows 版本：
https://developers.cloudflare.com/cloudflared/install-windows/ -
Linux 安装命令：
bash
wget https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-amd64.deb
sudo dpkg -i cloudflared-linux-amd64.deb安装完成后，检查是否成功：
bash
cloudflared --version（4）登录 Cloudflare
bash
cloudflared login运行后会自动打开一个浏览器，选择你在 Cloudflare 添加的网站即可。
（5）创建 tunnel 并绑定本地服务
例如我们要将本地的 Flask 服务（5000端口）暴露到公网：
bash
cloudflared tunnel create flask-server然后：
bash
cloudflared tunnel route dns flask-server flask.yourname.cf最后运行：
bash
cloudflared tunnel run flask-server这时你就可以通过 https://flask.yourname.cf 访问到你电脑上的 Flask 项目啦！
五、自动化部署建议
为了让 tunnel 在电脑重启后也能自动运行，可以设置以下方式：
✅ Windows：
创建一个 bat 文件 start_tunnel.bat：
bat
@echo off
cloudflared tunnel run flask-server然后设置任务计划，开机自动运行即可。
✅ Linux：
可以用 systemd 服务或 nohup + cron，更稳定。
bash
nohup cloudflared tunnel run flask-server > tunnel.log &六、常见问题排查
| 问题 | 解决方法 |
|---|---|
| tunnel 运行后打不开 | 检查 Flask 是否运行，或端口是否设置正确 |
| 提示未登录 Cloudflare | 再次运行 cloudflared login 绑定账号 |
| 本地网络不通 | 检查防火墙设置或端口是否被占用 |
七、总结与后续拓展
通过本文，你已经掌握了如何用旧电脑：
- 快速搭建 Web 服务（Flask + Vue）
- 使用 Cloudflare Tunnel 实现 0 成本公网访问
- 项目部署到线上、支持访问、无需公网 IP！
🎯 后续你可以拓展部署的项目：
- Flask + Vue 做成资源下载站、后台管理系统
- Jupyter Notebook 在线访问（远程学习）
- 文件管理系统、个人博客系统等