阿里云ECS部署前端项目？-云计算HECS

在阿里云 ECS（Elastic Compute Service）上部署前端项目是一个常见的需求，适用于 Vue、React、Angular 等构建的静态网站。下面是完整的部署流程和建议。

🧩 一、准备工作

1. 购买并配置好阿里云 ECS 实例

操作系统推荐：CentOS / Ubuntu / Alibaba Cloud Linux
开放端口：确保开放 80（HTTP）、443（HTTPS），以及可能需要的 22（SSH）

2. 域名（可选）

如果你需要访问域名，记得将域名解析到 ECS 的公网 IP

3. 安装必要的软件

# 更新包管理器
sudo yum update -y    # CentOS/Alibaba Cloud Linux
sudo apt update -y    # Ubuntu

# 安装 Nginx
sudo yum install nginx -y   # CentOS
sudo apt install nginx -y   # Ubuntu

# 安装 Node.js 和 npm（用于构建前端项目）
curl -fsSL https://rpm.nodesource.com/setup_20.x | sudo bash -
sudo yum install -y nodejs   # CentOS
sudo apt install -y nodejs npm  # Ubuntu

# 可选：安装 Git
sudo yum install git -y

📦 二、上传并部署前端项目

方法一：本地打包后上传到服务器（推荐）

1. 在本地开发环境打包项目

进入你的前端项目目录（如 Vue 或 React 项目）：

npm run build

会生成一个 dist/ 目录（Vue/React 默认输出目录）

2. 将 dist 文件夹上传到服务器

可以使用 SCP 或 FTP 工具上传：

scp -r dist/* user@your_ecs_ip:/usr/share/nginx/html/

或者使用 rsync：

rsync -avz dist/ user@your_ecs_ip:/usr/share/nginx/html/

方法二：直接在服务器上 clone 并构建项目（适合 CI/CD 场景）

1. 克隆项目代码

git clone https://github.com/yourname/your-frontend.git
cd your-frontend

2. 安装依赖并构建

npm install
npm run build

3. 将构建好的文件移动到 Nginx 目录

sudo cp -r dist/* /usr/share/nginx/html/

⚙️ 三、配置 Nginx

编辑默认站点配置文件：

sudo vi /etc/nginx/conf.d/default.conf

或对于 Ubuntu：

sudo vi /etc/nginx/sites-available/default

修改内容如下：

server {
    listen       80;
    server_name  your_domain_or_ip;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ =404;
    }
}

保存退出后重启 Nginx：

sudo systemctl restart nginx

🌐 四、访问前端项目

浏览器中输入你的 ECS 公网 IP 或绑定的域名即可访问：

http://your_ecs_public_ip

🔒 五、配置 HTTPS（可选但推荐）

你可以使用 Let’s Encrypt 配合 Certbot 自动申请 SSL 证书：

sudo yum install certbot python3-certbot-nginx -y
sudo certbot --nginx

按照提示操作即可自动配置 HTTPS。

✅ 六、常用命令汇总

功能	命令
查看 Nginx 状态	`systemctl status nginx`
重启 Nginx	`systemctl restart nginx`
查看 IP 地址	`curl ifconfig.me`
查看开放端口	`firewall-cmd --list-all`（CentOS）

🧠 七、常见问题

Q: 页面访问显示 403？

A: 检查 /usr/share/nginx/html 下是否有 index.html，并确认权限：

sudo chmod -R 755 /usr/share/nginx/html
sudo chown -R nginx:nginx /usr/share/nginx/html

Q: 页面访问空白？

A: 检查是否缺少 try_files 配置，SPA（单页应用）必须加上：

try_files $uri $uri/ /index.html;

如果你提供具体的前端框架（如 Vue、React）或 ECS 系统版本，我可以给出更定制化的部署指南。需要吗？