前端项目部署到云服务器需要哪些步骤？-云小栈

将前端项目部署到云服务器通常包括以下几个关键步骤。以下以常见的静态前端项目（如 Vue、React、Angular）为例，使用 Nginx 作为 Web 服务器，部署到 Linux 云服务器（如阿里云、腾讯云、AWS 等）。

✅ 一、准备工作

购买并配置云服务器
- 选择云服务商（如阿里云、腾讯云、华为云等）
- 购买一台云服务器（ECS），推荐配置：Ubuntu/CentOS 系统，至少 1GB 内存
- 设置安全组规则，开放端口（如 80 HTTP、443 HTTPS、22 SSH）
获取服务器访问权限
- 获取公网 IP 地址
- 使用 SSH 登录服务器：
```
ssh root@你的服务器IP
```

✅ 二、服务器环境搭建

更新系统包

sudo apt update && sudo apt upgrade -y    # Ubuntu/Debian
# 或
sudo yum update -y                        # CentOS

安装 Nginx

sudo apt install nginx -y                 # Ubuntu/Debian
# 或
sudo yum install nginx -y                 # CentOS

启动并设置开机自启

sudo systemctl start nginx
sudo systemctl enable nginx

验证 Nginx 是否正常运行
- 浏览器访问 http://你的服务器IP
- 应该看到 Nginx 欢迎页

✅ 三、上传前端构建文件

本地构建项目
在本地项目根目录执行：
```
npm run build
```
构建完成后会生成 dist（或 build）文件夹，里面是静态资源（HTML、CSS、JS 等）。
将构建文件上传到服务器
方法一：使用 scp 命令（推荐）
```
scp -r dist/* root@你的服务器IP:/var/www/html/
```
方法二：使用 FTP 工具（如 FileZilla）
- 连接服务器，上传 dist 文件夹中的所有内容到 /var/www/html/
注意：确保目标目录存在且有写权限
```
sudo mkdir -p /var/www/html
sudo chown -R $USER:$USER /var/www/html
```

✅ 四、配置 Nginx

编辑 Nginx 配置文件

sudo nano /etc/nginx/sites-available/default   # Ubuntu
# 或
sudo nano /etc/nginx/nginx.conf                # CentOS

修改 server 块，支持单页应用（SPA）路由

server {
    listen 80;
    server_name your-domain.com;  # 可选：绑定域名

    root /var/www/html;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    # 可选：添加静态资源缓存
    location ~* .(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

测试并重载 Nginx

sudo nginx -t            # 测试配置是否正确
sudo systemctl reload nginx

✅ 五、绑定域名（可选）

购买并解析域名
- 在域名注册商处购买域名
- 添加 A 记录，指向你的服务器公网 IP

在 Nginx 中配置 server_name

server_name www.yourdomain.com yourdomain.com;

申请 SSL 证书（启用 HTTPS）
使用 Let’s Encrypt 免费证书：
```
sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com
```
完成后自动配置 HTTPS 并开启自动续期。

✅ 六、后续维护建议

设置自动部署脚本（可结合 GitHub Actions、Jenkins）
监控服务器状态（CPU、内存、磁盘）
定期备份重要数据
配置防火墙（ufw）增强安全性

✅ 总结流程图

本地开发 → npm run build → 生成 dist 文件
                     ↓
         scp / FTP 上传到服务器 /var/www/html
                     ↓
           配置 Nginx 指向该目录 + 支持 SPA
                     ↓
              开放端口，绑定域名，加 HTTPS
                     ↓
               前端网站上线成功！

如有后端 API，还需部署后端服务（如 Node.js、Java、Python 等），并通过 Nginx 反向X_X前后端请求。

需要我提供自动化部署脚本或 CI/CD 示例吗？