Vibe Coding 新手指南

主题

部署上线完整指南 ​

部署是什么？为什么要学？ ​

你在本地电脑写好了代码，能跑了。

但是只有你自己能用。

部署就是：把代码放到服务器上，让别人通过网址访问。

小白最大的困惑 ​

小白最大的问题不是技术，而是根本不知道这些概念是什么：

  • localhost 是什么？
  • 域名和 IP 有什么关系？
  • HTTP 和 HTTPS 有什么区别？
  • 怎么让代码从"只能本地跑"变成"别人能访问"？

这些背景知识的缺失，是部署最大的障碍。

背景知识科普 ​

localhost、IP、域名的关系 ​

类比：你家的地址

  • localhost = "我家"（只有你自己知道）
  • IP 地址 = "北京市朝阳区XX路XX号"（精确地址，但难记）
  • 域名 = "王府井"（好记的名字，指向同一个地方）

对应到网站：

  • localhost（127.0.0.1） = 你的电脑

    • 只有你能访问
    • 别人访问不了

  • 服务器 IP = 47.93.123.45（示例）

    • 任何人都能访问
    • 但很难记

  • 域名 = example.com

    • 好记
    • 指向服务器 IP

怎么让别人访问？

你的电脑（localhost） → 代码上传 → 服务器（IP）
                                    ↓
                            买域名，指向这个 IP
                                    ↓
                        别人访问 example.com，就能看到你的网站

HTTP 和 HTTPS 的区别 ​

HTTP = 不安全的传输

  • 数据明文传输
  • 容易被窃听
  • 浏览器会警告"不安全"

HTTPS = 安全的传输

  • 数据加密
  • 需要 SSL 证书
  • 浏览器显示"安全"

为什么要用 HTTPS？

  • 浏览器不会警告
  • 某些功能必须 HTTPS（比如调用摄像头、地理位置）
  • 看起来更专业

怎么获得 HTTPS？

后面会讲，用 Cloudflare 可以免费获得。

我的部署方案 ​

为什么不用传统方式？ ​

传统部署要在服务器上敲很多命令，配置很复杂，出错了很难调试。

对小白来说，太难了。

我用的方案：1Panel ​

1Panel 是什么？

一个可视化的 Linux 服务器管理面板。

为什么选它？

对小白非常友好：

  • 有直观的可视化界面
  • 不用敲终端命令
  • 一台服务器可以部署多个网站
  • 点几下就能部署

1Panel 和 Docker 的关系 ​

你可能会在 1Panel 界面看到"Docker"、"容器"这些词。

Docker 是什么？

简单理解：Docker 就是把项目和环境打包在一起的工具。

类比快递：

  • 你做了蛋糕（你的项目）
  • 用保温箱装好（Docker 容器）
  • 保温箱里有温度控制（运行环境）
  • 快递到任何地方，打开就能吃（部署到服务器，启动就能跑）

1Panel 本质上用 Docker 把前后端分别跑起来。

但你不需要懂 Docker 命令，1Panel 帮你可视化操作了。

你需要学 Docker 吗？

不需要。 就像用微信不需要懂网络协议。

但要知道一点：

如果遇到问题问 AI，提到"我用 1Panel 部署的，1Panel 是基于 Docker"，AI 能给更准确的建议。

我的完整方案 ​

服务器 + 部署 + 域名管理：

海外服务器（绕开备案）
    ↓
装 1Panel（可视化部署）
    ↓
买域名
    ↓
域名托管在 Cloudflare（免费 HTTPS + CDN）
    ↓
1Panel 部署项目
    ↓
Cloudflare 添加 DNS 记录
    ↓
完成！

为什么选海外服务器？ ​

国内服务器的麻烦 ​

需要域名备案：

  • 提交各种资料
  • 等几周审核
  • 非常麻烦

海外服务器 ​

优点：

  • 不需要备案
  • 买了就能用
  • 便宜

缺点：

  • 访问速度稍慢（但用 Cloudflare CDN 可以缓解）

推荐：

国外厂商：

  • Vultr
  • DigitalOcean
  • Linode

国内大厂的海外节点：

  • 阿里云海外服务器（新加坡、香港等）
  • 腾讯云海外服务器
  • 优点：管理界面是中文，支付方便

配置：2核2G 就够用，每月 $5-10。

为什么用 Cloudflare？ ​

Cloudflare 是什么？ ​

全球最大的 CDN 和域名管理服务商。

为什么用它？ ​

我在解决 HTTPS 问题时研究到 Cloudflare，发现太方便了：

功能：

  • 免费 SSL 证书（自动 HTTPS）
  • 免费 CDN（加速访问）
  • 免费防 DDoS
  • 域名 DNS 管理

完整部署流程 ​

第1步：买服务器 ​

配置选择：

  • 配置：2核2G 够用
  • 系统：Ubuntu 22.04
  • 位置：新加坡/香港/日本（国内访问快）

拿到服务器后，记下 IP 地址。

第2步：放行防火墙/安全组 ​

这一步很重要，容易忘！

什么是安全组/防火墙？

服务器的保护机制，默认拦截所有外部访问。你要手动开放端口，才能让别人访问你的网站。

怎么放行？

阿里云/腾讯云：

  1. 控制台 → 找到你的服务器
  2. 安全组 → 配置规则
  3. 添加规则：
    • 端口：80（HTTP）
    • 端口：443（HTTPS）
    • 端口：1Panel 的管理端口（安装时会显示，比如 12345）
  4. 来源：0.0.0.0/0（允许所有人访问）

不放行的话，网站部署好了也访问不了。

第3步：安装 1Panel ​

方式1：用控制台的终端（推荐）

阿里云/腾讯云的控制台都有"远程连接"或"登录"按钮，点一下就能打开终端。

方式2：用 SSH 工具

如果要用 SSH（比如用 Vultr），参考：

SSH 是什么？ 就是远程连接到服务器。

怎么登录？

  • Windows：用 PuTTY 或 PowerShell
  • Mac/Linux：用终端，输入 ssh root@你的服务器IP

不会？问 AI："怎么 SSH 登录 Linux 服务器？我的 IP 是 XXX，用 Windows/Mac"

安装 1Panel：

终端打开后，去 1Panel 官网（1panel.cn）复制安装命令，粘贴到终端运行。

安装完会显示：

  • 访问地址：http://你的IP:12345
  • 账号密码

浏览器打开访问地址，登录 1Panel。

第4步：买域名 ​

推荐： Namecheap / GoDaddy / 阿里云

买哪里的都行，海外服务器不限制域名来源。

便宜的域名：

  • .com: $10-15/年
  • .xyz: $1-2/年（第一年）
  • .top: $3-5/年

第5步：域名托管到 Cloudflare ​

为什么托管？

域名商自带的 DNS 功能弱，Cloudflare 免费提供 HTTPS + CDN。

什么是名称服务器？

简单理解：名称服务器就是告诉全世界"你的域名在哪里管理"。

改成 Cloudflare 的名称服务器，就是把域名管理权交给 Cloudflare。

步骤：

  1. 注册 Cloudflare 账号（cloudflare.com）
  2. 添加站点，输入你的域名
  3. 选择免费计划
  4. Cloudflare 给你2个名称服务器（类似 ns1.cloudflare.com）
  5. 去域名商后台，找到"名称服务器"或"DNS 设置"，改成 Cloudflare 给的
  6. 等几分钟到几小时生效

Cloudflare 会发邮件通知"已激活"。

第6步：1Panel 部署项目 ​

前端（静态站）：

什么是静态站？ 就是 Vue/React 构建后的 HTML/CSS/JS 文件。

  1. 本地运行 npm run build（构建命令），生成 dist/ 文件夹
  2. 把 dist/ 压缩成 dist.zip
  3. 1Panel → 网站 → 创建网站 → 静态网站
  4. 上传 zip，设置域名
  5. 1Panel 自动配置好

后端（反向代理）：

什么是反向代理？ 简单说：后端服务跑在服务器内部（比如端口 8000），1Panel 帮你把外部访问转发到这个端口。

  1. 把后端代码上传到服务器（用 1Panel 文件管理，或 SFTP 工具）
  2. 1Panel 启动后端服务（服务会跑在某个端口，比如 8000）
  3. 1Panel → 网站 → 创建网站 → 反向代理
  4. 代理地址填 http://localhost:8000，域名填 api.example.com

不懂端口？ 可以理解为：服务器内部有很多"门牌号"，8000 就是其中一个。

反向代理怎么具体配置？

1Panel 界面里要填的内容，不清楚就问 AI："1Panel 反向代理怎么配置？我的后端跑在 8000 端口"

AI 会告诉你每个选项填什么。

第7步：Cloudflare 添加 DNS 记录 ​

让域名指向你的服务器。

Cloudflare 控制台 → DNS → 添加记录：

  • 类型：A
  • 名称：@ （代表根域名）
  • IPv4 地址：你的服务器 IP
  • 代理状态：已代理（橙色云朵）

如果有后端，再加一条：

  • 名称：api
  • 指向同一个 IP

等几分钟 DNS 生效。

第8步：配置 HTTPS ​

Cloudflare 自动提供免费 SSL 证书。

Cloudflare 控制台 → SSL/TLS → 选择"完全（严格）"

Cloudflare 自动颁发证书，你的网站就是 HTTPS 了。

访问 https://example.com，看到小锁图标就成功了。

小白容易搞错什么？ ​

以为 localhost 别人也能访问 ​

本地 localhost:3000 能打开，就以为别人也能访问。

不行。 localhost 只有你自己能访问，部署后要用域名或 IP。

域名解析没配置 ​

1Panel 部署好了，访问域名打不开。

原因:

  • 忘了在 Cloudflare 添加 DNS 记录
  • DNS 还没生效（要等几分钟）
  • 或者服务器防火墙没放行端口 80/443

排查：

  1. 用 ping example.com 检查是否指向你的服务器 IP
  2. 检查 Cloudflare DNS 记录是否添加
  3. 检查服务器安全组是否放行了 80 和 443 端口

HTTPS 打不开 ​

http://example.com 能打开，https://example.com 打不开。

原因: Cloudflare SSL 模式没设置。改成"完全"。

核心要点 ​

背景知识最重要

localhost、IP、域名、HTTP/HTTPS 的关系一定要搞清楚。

海外服务器绕开备案

国内服务器要备案，等几周，太麻烦。海外服务器买了就能用。

1Panel + Cloudflare

1Panel 可视化部署，Cloudflare 免费 HTTPS + CDN。对小白最友好的组合。

先用 IP 测试，再加域名

部署好先用 IP 访问测试，能访问了再配置域名。

DNS 生效要等

域名配置完不是立刻生效，要等几分钟到几小时。

部署很琐碎，但可复制

第一次跑通上述流程要花时间，但后面就是重复操作了。