将一个网页（无论是静态 HTML 还是动态网站）部署到服务器上，是前端和后端开发的基本技能。
这里为你提供一份 2026 年最新版、零基础、保姆级 的教程。我们将使用最通用的 阿里云 ECS 服务器 (Ubuntu 系统) 配合 Nginx (目前最流行的 Web 服务器) 来部署。
📋 准备工作
一台云服务器：阿里云 ECS（推荐 Ubuntu 22.04 系统）。
你的网页文件：
如果是静态页：
index.html,css/,js/,images/等文件夹。如果是 Vue/React 项目：请先在本地运行
npm run build生成dist文件夹，我们要部署的是dist里的内容。终端工具：Windows 用 PowerShell 或 Xshell，Mac/Linux 用自带终端。
🚀 第一阶段：连接服务器
获取公网 IP：在阿里云控制台找到你的实例，复制 公网 IP 地址。
远程连接：
打开终端，输入以下命令（将<IP>替换为你的真实 IP）：ssh root@<IP>
第一次连接输入
yes。输入密码（输入时不显示），回车登录。
看到
root@...:~#表示成功。
🛠️ 第二阶段：安装 Web 服务器 (Nginx)
Nginx 是用来“托管”你网页的软件，它能监听网络请求并把你的文件发给用户。
更新软件源：
apt update
安装 Nginx：
apt install nginx -y
验证安装：
输入nginx -v，如果显示版本号说明安装成功。
此时，如果你在浏览器访问http://<你的IP>，应该能看到 "Welcome to nginx!" 的默认页面。
📂 第三阶段：上传网页文件
我们需要把你的本地文件传到服务器的指定目录。Nginx 默认的网站根目录是 /var/www/html。
方法 A：使用 SCP 命令（最简单，无需额外软件）
在 你自己的电脑终端（不是服务器终端）执行：
# 语法：scp -r [本地文件夹路径] root@[服务器IP]:[服务器目标路径] # 示例：假设你的网页都在本地的 my-website 文件夹里 scp -r ./my-website/* root@<你的IP>:/var/www/html
输入服务器密码。
传输完成后，服务器上的
/var/www/html目录里就是你的网页文件了。注意：确保你的主文件名叫
index.html，否则浏览器可能找不到首页。
方法 B：使用 SFTP 工具（适合新手，可视化操作）
下载 FileZilla 或 WinSCP 软件。
主机填服务器 IP，用户名
root，密码填你的密码，端口22。连接后，左边是本地文件，右边是服务器文件。
将右边的路径切换到
/var/www/html。把左边的网页文件直接拖拽到右边即可。
⚙️ 第四阶段：配置与权限（关键步骤）
很多时候网页打不开是因为权限问题或配置文件没改。
修改文件权限：
确保 Nginx 有权限读取你的文件。在 服务器终端 执行：# 将 /var/www/html 下所有文件的所有者改为 www-data (Nginx 的运行用户) chown -R www-data:www-data /var/www/html # 赋予读取和执行权限 chmod -R 755 /var/www/html
检查 Nginx 配置（通常默认即可，如需自定义域名看下文）：
Nginx 的主配置文件在/etc/nginx/sites-available/default。
你可以用nano /etc/nginx/sites-available/default查看，确保root指向的是/var/www/html，且index包含index.html。
默认配置通常已经是正确的，如果没有特殊需求，可跳过此步。重启 Nginx：
让配置生效：systemctl restart nginx
🔒 第五阶段：开放防火墙端口
如果你之前没做过，必须去阿里云控制台开放端口。
登录阿里云 ECS 控制台 -> 实例详情 -> 安全组。
点击 配置规则 -> 入方向 -> 手动添加。
添加两条规则：
HTTP: 端口
80，授权对象0.0.0.0/0。HTTPS (可选): 端口
443，授权对象0.0.0.0/0。保存。
🧪 第六阶段：验证访问
打开浏览器，输入：
http://<你的服务器公网IP>
如果看到了你的网页，恭喜！部署成功！ 🎉
如果还是 Nginx 默认页：检查你的
index.html是否真的传进去了，文件名是否全小写。如果无法连接：检查阿里云安全组是否开了 80 端口。
🌟 进阶：如何绑定自己的域名？
如果你想通过 www.yourname.com 访问而不是 IP：
购买域名：在阿里云万网或其他服务商购买。
DNS 解析：
在域名控制台添加一条 A 记录。
主机记录：
@和www。记录值：填写你的 服务器公网 IP。
修改 Nginx 配置：
nano /etc/nginx/sites-available/default
找到
server_name一行，改为你的域名：server_name yourdomain.com www.yourdomain.com;
保存退出，重启 Nginx (
systemctl restart nginx)。备案（仅限国内服务器）：
如果服务器在中国大陆，域名必须经过 ICP 备案 才能通过 80/443 端口访问。未备案前，域名会被阻断。
临时方案：如果不备案，可以使用非标准端口（如
http://IP:8080），但体验不好；或者使用海外服务器。
💡 常见问题排查
| 问题 | 可能原因 | 解决方法 |
|---|---|---|
| 403 Forbidden | 权限不足或缺少 index 文件 | 执行 chown 和 chmod 命令；确保有 index.html。 |
| 404 Not Found | 文件路径不对 | 检查文件是否在 /var/www/html 下；检查 Nginx 配置中的 root 路径。 |
| 连接超时 | 安全组没开端口 | 去阿里云控制台安全组放行 80 端口。 |
| 图片/样式加载失败 | 路径写死了 | 检查 HTML 中引用的 CSS/JS 路径，建议使用相对路径（如 ./css/style.css）。 |
| Vue/React 刷新 404 | 单页应用路由问题 | 需要在 Nginx 配置中添加 try_files $uri $uri/ /index.html;。 |
🎁 总结
买服务器 (Ubuntu)。
装 Nginx (
apt install nginx)。传文件 (到
/var/www/html)。改权限 (
chown,chmod)。开端口 (阿里云安全组开 80)。
访问 IP 即可看到网站。
这就完成了最基础的网页部署！