web

AI 帮你写的网站,为什么发给朋友就打不开

很多人用 AI 工具在本地写出了一个网站,发链接给朋友却打不开。这篇把 localhost、服务器、域名、HTTPS、部署这条链路讲清楚,从「自己能跑」到「别人能用」中间还差几步、要花多少钱。

发布时间

阅读信息

约 8 分钟

主题标签

vibe coding / localhost / 服务器

先把场景对上号

最近在南京跑了几场「一人公司」(OPC) 的线下活动,发现一个比较普遍的卡点。

很多人是这么走过来的:

  • 用 Claude ​Code、Codex、Cursor、Open Code 这类工具,让 AI 帮自己写了一个小网站
  • AI 跑完命令,提示「服务已启动,请访问 http://localhost:3000
  • 浏览器打开,确实能用
  • 把这个链接截图发到群里,朋友说:「这个我打不开。」
  • 自己换台手机一试,也打不开
  • 这一步会卡住:刚才明明能用,怎么换台设备就不行了?

如果咱们卡在这里,这一篇就是写给你的。把 localhost、服务器、域名、HTTPS、部署这条链路理顺,你就知道从「我电脑能跑」到「别人能用」中间还差几步、大概要花多少钱。

localhost = 你电脑里的「D 盘」

先说结论:

localhost 永远指的是当前这台电脑自己。

localhost127.0.0.1 写法不同,意思一样,都是「这台电脑」。

类比咱们办公里最熟的事:你电脑里有个 D 盘,存着一些文档。你跟朋友说「你打开 D 盘看一下我那个 PPT」,朋友能看到吗?看不到。因为每个人电脑里都有自己的 D 盘,他打开的是他自己的 D 盘,不是你的。

localhost 就是这种「每个人电脑里都有、只指向自己」的地址。

AI 给你的 http://localhost:3000,意思是「网站跑在这台电脑上,欢迎本机访问」,并不是「这个网站全世界都能访问,地址就叫 localhost」。朋友拿这个链接在自己手机上打开,浏览器找的是他自己手机里的 localhost——那里并没有运行任何网站。

所以这一步并不是 AI 给错了链接,而是 localhost 这个词本身就是相对的。

那能不能让朋友直接连到你电脑

技术上能,但通常不现实。

打个办公场景的比方:你在公司用过共享打印机吧?同事在工位上能直接打印;下班回到家,用手机就连不上那台打印机了。因为打印机的地址只在公司局域网里有效,出了公司就找不到。

家里的电脑就是类似的状态:

  • 它没有一个「外面世界能找到的地址」(公网 IP),国内家庭宽带普遍如此
  • 电脑一旦关机或睡眠,访问就会中断
  • 家庭宽带的上行带宽和安全防护,也不太适合对外提供服务

所以「让朋友直接连我电脑」这条路,做产品基本不会走。它适合自己折腾 NAS、远程访问家里电脑这类自用场景,不太适合给真实用户用。

服务器 = 公司里那台一直开着的电脑

「服务器」并不是什么特殊的硬件。一句话:

服务器就是一台 24 小时不关机、有公网地址、放在专业机房里的电脑。

它和你桌上那台 MacBook 在硬件上没有本质区别,区别在于使用方式:

  • 放在专业机房里,有空调、备用电源和专人维护
  • 接在运营商的骨干网上,有真正的公网地址
  • 常年开机,不睡眠、不休眠
  • 没有显示器和键盘,咱们靠远程登录去操作它

类比一下:公司里通常会有那种 7×24 小时开着的文件服务器或者企业网盘,所有同事都能连上去拿文件,因为它地址固定、永远在线。咱们说的「服务器」干的是同一件事,只是它服务的不是公司同事,而是网上的访问者。

价格上:

  • 阿里云、腾讯云的「轻量应用服务器」,新人活动经常 99 元/年起
  • 如果只是部署一个简单的前端站点,海外平台(Vercel、Netlify、Cloudflare Pages)也提供免费额度,但在国内访问可能不稳定

域名 = 网站的「昵称」

假设咱们真去阿里云租了一台服务器,平台会分配一个公网地址,类似这样:

47.98.123.45

理论上可以直接把这串数字发给朋友让他在浏览器里输,但通常不会这么做:

  • 这串数字不容易记
  • 纯数字链接看起来不像正常网站,朋友也不一定敢点
  • 换台服务器,这串数字还可能变

域名就是给这串数字起一个人能记住的名字

类比一下微信加好友:大家通常记的是「张三」「李四」这样的名字,而不是手机号。搜「张三」就能找到他,背后由微信负责对应到真正的手机号。

域名的作用类似。在浏览器里输 lifangdu.top,背后会发生:

  1. 浏览器去问一个叫 DNS 的「通讯录」:lifangdu.top 对应的是哪台机器?
  2. DNS 回答:47.98.123.45
  3. 浏览器拿着这个地址去访问对应的服务器

域名要到专门的服务商那里购买,国内常用的是阿里云、腾讯云。.com 一年大约 50~100 元,.top.xyz 这类便宜的可以低到一年十几块。域名是按年付费的固定费用,不按访问量收费。

HTTPS = 地址栏前面那把锁

留意一下平时打开的网站,地址栏前面通常都有一把小锁——这就是 HTTPS。

如果网站只挂在 http://(没有 s),浏览器会标红「不安全」,微信里点一下还会弹「该网站不安全,确定要继续访问吗」。这个提示一弹出来,多数访客会选择关掉。

http 和 https 的区别可以这样理解:

  • http 像在工作群里直接发文字——传输过程任何环节都能看到内容
  • https 像发了个加密的压缩包——别人就算截到了也看不到内容

那把「锁」是怎么加上的?需要一个东西叫 SSL/TLS 证书,可以理解成「证明这个域名是我的、咱们之间走加密通道」的官方公证。

证书现在可以免费获取:

  • Let’s Encrypt 提供免费证书,主流服务器上一两条命令就能装好
  • 海外的 Vercel、Cloudflare Pages、Netlify 等平台部署的站点,会自动带 HTTPS
  • 阿里云、腾讯云控制台里也提供免费 SSL 证书申请,配合云服务器使用

部署 = 把代码「上传」到服务器

到这一步,咱们手里有了三样东西:

  • 一台 24 小时开机的服务器
  • 一个买好的域名
  • 一张 HTTPS 证书

接下来就是把 AI 在你电脑上写好的那堆代码,搬到服务器上跑起来。这个动作有个专门的词,叫「部署」(deploy)。

类比一下:你做完一份 PPT,要让全公司都能看,得把它上传到企业网盘、或者发到工作群里——从「只在我电脑上的版本」变成「大家都能拿到的版本」。部署本质上就是这件事,对象换成了代码,目标换成了服务器。

部署有几种走法,难度差距比较大:

  • 最省事:用 Vercel、Cloudflare Pages、Netlify 这类海外平台,上传代码或连接 GitHub 仓库,平台会自动处理运行、HTTPS 和域名绑定。胜在简单,但国内访问可能不稳定,长期对国内用户做产品需要谨慎选择
  • 国内主流:买一台阿里云/腾讯云的轻量应用服务器,自己装运行环境、上传代码、配域名解析。多花一两个晚上能搭起来,遇到问题需要自己排查
  • 完全自己来:自己装系统、配防火墙、做监控。除非要长期严肃运营,否则不必走这条路

部署完之后,朋友访问的就不再是你电脑上那个网站了,而是服务器上的那一份。之后你电脑可以关机、睡眠或者用来做别的事,朋友依然能访问。

从「我能跑」到「别人能用」,差几步

把上面这些拼到一起,最朴素的流程是:

  1. AI 在你电脑上写好代码,本地能跑通
  2. 把代码部署到一个 24 小时开机的地方——通常是一台云服务器
  3. 买一个域名,解析到对应的地址
  4. 给域名配上 HTTPS 证书
  5. https://你的域名 发出去

成本大致如下,仅供参考:

路线服务器域名HTTPS一年总成本
阿里云/腾讯云轻量 + .top 域名99 元/年起5~30 元免费约 100~150 元
阿里云/腾讯云轻量 + .com 域名 + 备案99~500 元50~100 元免费约 200~600 元
海外平台 + 海外域名免费起50~100 元免费50~100 元(需要稳定的海外网络)

国内服务器 + 国内域名要走「网站备案」,需要身份证、人脸验证、网站说明,流程通常要一两周。如果是要给国内用户长期使用的产品,备案是必要的一步;如果只是临时给朋友试看,可以先选成本最低的方案跑起来再说。

看不懂?把这篇丢给你的 AI 再问一遍

读到这儿,里面可能还有一些概念你看着觉得「好像懂了又没完全懂」。一篇文章想把每个概念都展开讲细,会变得很长,所以这篇是奔着「先把大致脉络建起来」去的。

如果想再钻一下细节,比较省事的办法是把这篇文章整段复制给你的 Coding Agent(Claude ​Code、Codex、Cursor、Open Code 都行),让它针对你不懂的部分继续解释。比如:

「上面这篇文章里讲到的「DNS 解析」我没太看懂,能不能再详细说一下,最好结合我电脑打开 baidu.com 的实际过程?」

「我现在想把我用 AI 写的这个项目部署到一台阿里云轻量服务器上,按文章里说的方法,能不能一步一步带我做完?」

AI 时代学新概念的成本,比以前任何时候都低。以前学一个新东西,要么翻书、要么找懂的人请教、要么硬着头皮看官方文档;现在脑子里冒出「这是什么」的疑问,可以直接丢给 AI,按你能听懂的层次往下问。

不是计算机专业出身,并不会成为搞清楚这些概念的障碍。

vibe codinglocalhost服务器域名HTTPS部署入门科普
上一篇 别让 AI 焦虑偷走你的节奏 更多文章