一、整体流程（先给你一张“脑内流程图”）
本地前端项目
↓ npm run build
构建产物 dist/
↓ scp / rsync
阿里云 ECS
↓
Nginx
↓
浏览器访问公网 IP / 域名
你只要记住一句话：
阿里云 ECS = 一台远程 Linux 电脑 + Nginx
二、第 1 步：创建阿里云 ECS（前端够用版）
1️⃣ 基本配置（别纠结）
在阿里云控制台创建 ECS：
-
实例规格：1 核 2G（学习 / 前端完全够）
-
系统镜像：✅ Ubuntu 22.04 LTS
-
网络：公网 IP（一定要有）
-
登录方式：SSH 密钥（推荐）
我用的是阿里云服务器 ESC 免费试用版，有大概三个月的免费使用期限。
访问链接：
2️⃣ 安全组（非常关键）
在 安全组规则 中，放行这些端口：
| 端口 | 用途 |
|---|---|
| 22 | SSH |
| 80 | HTTP |
| 443 | HTTPS |
❗ 如果 80 不放行，你网站永远访问不了
以下步骤也可以直接通过 Workbench 远程连接
三、第 2 步：SSH 登录 ECS（前端第一次上服务器）
在你本地终端：
ssh root@你的ECS公网IP
或者（推荐）非 root 用户：
ssh fe@你的ECS公网IP
成功后你会看到：
root@iZxxxx:~#
四、第 3 步：安装 Nginx（前端运维核心）
sudo apt update
sudo apt install -y nginx
启动并验证：
systemctl status nginx
浏览器访问：
http://你的ECS公网IP
如果看到 Welcome to nginx! ✅ 说明 ECS + Nginx 已经 OK
五、第 4 步：准备前端部署目录（重要）
我们不用默认目录，自己约定一个前端目录（更专业）
sudo mkdir -p /var/www/app
sudo chown -R $USER:$USER /var/www/app
约定：
/var/www/app ← 前端网站根目录
六、第 5 步：构建前端项目（本地）
在你本地前端项目：
npm install
npm run build
生成：
dist/
├── index.html
├── assets/
七、第 6 步：上传前端产物到 ECS
方法 1：scp（最简单）
scp -r dist/* root@ECS_IP:/var/www/app/
方法 2：rsync（推荐）
rsync -avz dist/ root@ECS_IP:/var/www/app/
八、第 7 步：配置 Nginx（SPA 必会）
编辑 Nginx 配置：
sudo nano /etc/nginx/sites-available/default
替换为（Vue / React SPA 通用）：
server {
listen 80;
server_name _;
root /var/www/app;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
location ~* .(js|css|png|jpg|jpeg|gif|svg|webp)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
}
检查 & 重启 Nginx
sudo nginx -t
sudo systemctl reload nginx
九、第 8 步：验证前端网站
浏览器访问：
http://你的ECS公网IP
验证 3 件事：
- ✔ 首页能打开
- ✔ 刷新不 404
- ✔ JS / CSS 正常加载
十、常见问题（前端必踩）
1️⃣ 页面空白 / 404
- dist 是否上传？
- Nginx root 是否正确？
try_files是否配置？
2️⃣ JS 404
- Vite：
base是否为/ - Webpack：
publicPath是否正确
3️⃣ 修改代码没生效
- 浏览器缓存
- CDN（如果接了）
- index.html 是否更新
十一、你现在已经具备的能力
完成以上步骤后：
- ✅ 你能独立用阿里云 ECS 部署前端
- ✅ 你懂 Nginx 在前端里的角色
- ✅ 你已经在“前端运维”路上了
