Web Basics

建站基础

VPS、服务器、域名、前端、后端……想建网站或部署AI应用?这些概念必须先搞懂。

什么是服务器?

服务器(Server)就是一台24小时不关机的电脑,专门用来存放网站、运行程序、处理请求。

💻你的电脑
  • 关机就断网
  • 只有你一个人用
  • 在家里,别人访问不到
  • 配置有限
🖥️服务器
  • 24小时不关机
  • 可以同时服务几万人
  • 在数据中心,全球可访问
  • 配置可以很强

你打开任何一个网站(百度、淘宝、Google),背后都有一台(或几千台)服务器在运行。

💡 一句话理解

服务器 = 一台放在机房里的电脑,专门用来给别人提供服务。


什么是VPS?

VPS = Virtual Private Server(虚拟专用服务器)。就是从一台大服务器上切出来的一小块,专门给你用。

🖥️一台物理服务器
✂️虚拟化技术切割
📦VPS 1(你的)
📦VPS 2(别人的)
📦VPS 3(别人的)

虽然是"切出来的一小块",但对你来说跟一台独立服务器没区别

  • 有自己的 IP 地址
  • 可以自由安装任何软件
  • 可以重启、关机
  • 有 root(管理员)权限
  • 别人看不到你的数据

VPS 能做什么?

🌐
建网站
部署你的个人网站、博客、企业官网
🤖
部署AI应用
运行AI模型、搭建Agent、API服务
🔧
搭建服务
VPN、网盘、数据库、邮件服务器
💼
跑业务
爬虫、自动化、定时任务、SaaS后端

VPS vs 其他方案

方案说明价格自由度适合
虚拟主机共享一台服务器,只能放网站几十元/年纯静态网站、WordPress博客
VPS虚拟化的独立小服务器几十~几百元/月⭐⭐⭐⭐个人网站、AI应用、小项目
云服务器(ECS)阿里云/腾讯云/AWS的VPS几百元/月起⭐⭐⭐⭐⭐企业应用、生产环境
独立服务器一整台物理服务器都是你的几千元/月⭐⭐⭐⭐⭐大型应用、高流量
Vercel/Netlify免费托管前端网站免费⭐⭐静态网站、前端项目
Railway/Render免费托管后端服务有免费额度⭐⭐⭐小型后端、API服务
🎯 怎么选?

新手练手 → Vercel(免费部署前端)
个人项目 → VPS(便宜、自由)
企业生产 → 云服务器 ECS(稳定、可扩展)


为什么需要VPS?

如果你只是写了个网页,想让全世界都能访问,你需要一台一直在线的电脑来放它。这就是VPS。

💻你写的网站代码
📤上传到VPS
🖥️VPS 24小时运行
🌐别人输入域名
👀看到你的网站

VPS vs 本地电脑

💻用本地电脑当服务器
  • 关机就断网
  • 家里断电就挂了
  • 带宽小,访问慢
  • 没有公网IP
  • 不安全
🖥️用VPS
  • 24小时不关机
  • 机房有备用电源
  • 带宽大,访问快
  • 有固定公网IP
  • 专业安全防护

怎么买VPS?

国内厂商(需要备案)

厂商最低价格特点
阿里云~50元/月国内最大,生态完善
腾讯云~40元/月学生优惠,轻量服务器
华为云~50元/月企业级

海外厂商(不需要备案)

厂商最低价格特点
Vultr$2.5/月按小时计费,随时删除
BandwagonHost$49/年便宜稳定,适合新手
RackNerd$10/年超便宜
AWS Lightsail$3.5/月亚马逊出品

购买流程

📝注册账号
⚙️选配置
🐧选系统
💳付款
🔑拿到IP+密码
🔗SSH连接

新手推荐配置:1核CPU + 1GB内存 + 20GB硬盘 + Ubuntu系统。够跑个人网站和小型AI应用。


什么是域名?

域名(Domain)就是你网站的"名字",比如 google.combaidu.com

为什么需要域名?

VPS 的地址是一串数字,比如 46.151.33.195。没人记得住。域名就是给这串数字起个好记的名字。

👤用户输入
🌐luckcclove.xyz
🔄DNS解析
🖥️46.151.33.195
👀显示网站

域名的结构

🏷️
顶级域名(TLD)
.com / .cn / .xyz / .io / .net
🌐
二级域名
google.com / baidu.com
📎
子域名
mail.google.com / blog.baidu.com

常见顶级域名

.com — 最通用.cn — 中国.xyz — 便宜.io — 科技公司.dev — 开发者.ai — AI公司.net — 网络.org — 组织

怎么注册域名?

域名注册商

注册商.com 价格特点
Cloudflare~$10/年成本价,无溢价,自带CDN和DNS
Namesilo~$10/年便宜,免费隐私保护
阿里云万网~55元/年国内最大,.cn域名首选
腾讯云~55元/年和腾讯云服务器集成好
GoDaddy~$12/年全球最大,但续费贵
🔍搜索域名
📋查是否被注册
🛒加入购物车
💳付款购买
🎉域名是你的了!
🎯 推荐

域名注册首选 Cloudflare(成本价,无溢价)。服务器和域名可以在不同平台买,没关系。


DNS 解析

DNS(Domain Name System)= 域名和IP地址之间的"电话簿"。

当用户输入域名,DNS 服务器会告诉你这个域名对应哪个 IP 地址。

👤用户输入域名
问DNS:这个域名的IP是?
📋DNS回答:46.151.33.195
🌐浏览器访问这个IP
📄服务器返回网页

常见的DNS记录类型

类型作用例子
A记录域名 → IPv4地址example.com → 46.151.33.195
AAAA记录域名 → IPv6地址example.com → 2606:4700::
CNAME记录域名 → 另一个域名www.example.com → example.com
MX记录邮件服务器收邮件用

什么是前端?

前端(Frontend)= 用户能看到、能摸到的部分。网页的样式、按钮、动画、图片……都是前端。

前端三件套

📄
HTML
网页的骨架。标题、段落、图片、链接。
🎨
CSS
网页的样式。颜色、字体、布局、动画。
JavaScript
网页的行为。点击、滑动、请求数据。

前端框架(让开发更快)

ReactVueNext.jsNuxtSvelteAngular

前端是什么?用餐厅比喻

前端 = 餐厅的装修和菜单。你看到漂亮的装修、精美的菜单、友好的服务员——这些都是"前端"。


什么是后端?

后端(Backend)= 用户看不到的部分。处理数据、存数据库、运行逻辑……都在后端。

后端做什么?

  • 处理请求:用户点"登录",后端验证用户名密码
  • 读写数据库:保存用户信息、查询商品列表
  • 业务逻辑:计算价格、发送邮件、生成报表
  • 调用AI:把用户的问题发给 OpenAI API,返回结果

后端技术

Node.jsPythonJavaGoPHPRust

后端是什么?用餐厅比喻

后端 = 厨房。你在外面看不到厨房里发生了什么,但没有厨房就做不出菜。


前端 vs 后端

🎨前端(Frontend)
  • 用户能看到的部分
  • HTML + CSS + JavaScript
  • 负责:样式、交互、动画
  • 像餐厅的装修和菜单
  • 运行在用户的浏览器里
⚙️后端(Backend)
  • 用户看不到的部分
  • Node.js / Python / Java
  • 负责:数据处理、业务逻辑
  • 像餐厅的厨房
  • 运行在服务器上

一个完整的请求流程

👆用户点击按钮
📤前端发送请求
⚙️后端处理逻辑
💾读写数据库
📥后端返回数据
🖥️前端渲染页面

举个例子:用户登录

👤用户输入账号密码
📄前端:校验格式
📤发请求给后端
💾后端:查数据库验证
📥返回登录结果
🖥️前端:跳转到首页

什么是全栈?

全栈(Full Stack)= 前端 + 后端都会。一个人能搞定整个网站。

🎨
前端 Frontend
HTML/CSS/JS + React/Vue/Next.js
⚙️
后端 Backend
Node.js/Python + API + 业务逻辑
💾
数据库 Database
MySQL/PostgreSQL/MongoDB
🖥️
服务器 Server
VPS + Nginx + Linux
💡 AI 时代的全栈

以前学全栈要好几年。现在用 Cursor + AI,一个人几天就能搞定前后端。理解概念比记语法更重要


怎么部署网站?

部署(Deploy)= 把你的代码上传到服务器,让全世界都能访问。

免费部署方案(前端)

平台特点适合
VercelNext.js 官方推荐,一键部署Next.js / React 项目
Netlify静态网站托管,免费CDN静态网站、博客
Cloudflare Pages免费、快速、全球CDN静态网站
GitHub PagesGitHub 免费托管个人项目、文档

VPS 部署流程

🛒买VPS
🔗SSH连接
⚙️装环境
📤上传代码
🌐配Nginx
🔗绑域名
🔒装SSL证书

Nginx 是什么?

Nginx(读作"engine-x")= 网站的门卫。当用户访问你的域名时,Nginx 负责:

  • 接收用户的请求
  • 判断请求哪个网站(一台VPS可以放多个网站)
  • 把请求转发给对应的程序
  • 把结果返回给用户

从零建站完整流程

🌐① 买域名
🖥️② 买VPS
🔄③ DNS解析
💻④ 写代码
🚀⑤ 部署
🎉⑥ 上线!

详细步骤

  1. 买域名:在 Cloudflare 或 Namesilo 注册,~$10/年
  2. 买VPS:在 Vultr 或 BandwagonHost 购买,$3-5/月
  3. DNS解析:在域名管理面板添加 A 记录,指向 VPS 的 IP
  4. SSH连接VPS:用终端 ssh root@你的IP
  5. 安装环境:Node.js / Python / Nginx
  6. 上传代码:用 git clone 或 scp 上传
  7. 配置Nginx:设置域名和端口映射
  8. 安装SSL证书:用 Let's Encrypt 免费证书(https)
  9. 完成!输入域名就能访问你的网站

AI 应用怎么部署?

纯前端 AI 应用(调用 OpenAI API)

如果你的 AI 应用只是前端调 API,不需要VPS

💻前端代码
🚀部署到 Vercel
🎉免费!

有后端的 AI 应用

如果需要后端处理(数据库、用户系统、Agent):

🎨前端 → Vercel
⚙️后端 → VPS
💾数据库 → Supabase
🤖AI → OpenAI API

用 Docker 部署(推荐)

Docker = 把你的应用打包成一个"集装箱",在任何服务器上都能跑。

📝写 Dockerfile
🔨构建镜像
📤上传到服务器
▶️docker run
运行中!

常见问题

Q: VPS 和云服务器有什么区别?

本质一样,都是虚拟化的服务器。VPS 通常指小厂商的小机器;云服务器指阿里云/腾讯云/AWS 的大平台产品,更稳定、可扩展。

Q: 域名和VPS必须在同一家买吗?

不需要。域名在 Cloudflare 买,VPS 在 Vultr 买,完全没问题。只要在 DNS 里把域名指向 VPS 的 IP 就行。

Q: 不会 Linux 能用 VPS 吗?

可以。现在有很多图形化面板(比如 1Panel宝塔面板),点几下鼠标就能装环境、部署网站。但建议学基本的 Linux 命令。

Q: 前端和后端哪个更重要?

都重要。没有前端,用户看不到东西;没有后端,网站没有功能。AI 时代,全栈能力最有价值

Q: 我应该先学前端还是后端?

🎨先学前端
HTML/CSS/JS
React/Next.js
⚙️再学后端
Node.js/Python
🎉全栈!

Q: 建一个网站要多少钱?

方案费用说明
最省钱0 元Vercel 免费部署 + 免费域名(.vercel.app)
个人项目~100 元/年域名 $10 + VPS $3/月
正经网站~500 元/年域名 + 云服务器 + SSL
企业级几千~几万/年高配服务器 + CDN + 数据库