部署 React + Vite + TypeScript 项目到阿里云 ECS

部署 React + Vite + TypeScript 项目到阿里云 ECS

一、部署步骤

1. 构建 React 应用程序

首先，在本地开发环境中构建您的项目：

• 导航到项目目录。
• 运行 npm run build 或 yarn build（取决于您使用的包管理器）。
  这会生成一个 dist 文件夹，包含生产环境下的优化静态文件（如 HTML、CSS、JavaScript）。

2. 准备服务器环境

阿里云的安全组是控制 ECS 实例网络访问的第一道防线，需确保 22 端口开放：

• 登录阿里云控制台（https://ecs.console.aliyun.com）。
• 找到您的 ECS 实例（公网 IP 为 120.79.213.148）。
• 点击实例名称，进入实例详情页面。
• 在左侧导航栏选择“安全组”，查看关联的安全组。
• 点击“配置规则” > “添加规则”，确保有以下入站规则：
  • 协议类型：自定义 TCP
  • 端口范围：22/22
  • 授权对象：0.0.0.0/0（允许所有 IP 访问）或您的特定 IP（如 47.96.60.211，参考服务器信息中的最后登录 IP）。

使用 SSH 登录到您的 ECS 实例：

• 命令：ssh user@120.79.120.120，其中 user 是您的登录用户名（通常为 root 或 ubuntu，具体取决于实例创建时的设置）。（Ubuntu操作系统用户名一般默认是root）

• 创建应用程序目录：

  • 运行：sudo mkdir -p /var/www/myapp
  • 设置权限以便后续上传文件：sudo chown -R user:user /var/www/myapp（将 user 替换为您的用户名）。

• 退出 SSH 会话以便上传文件。

3. 上传构建文件

• 使用 SCP 将本地 dist 文件夹的内容上传到服务器：
  • 命令：scp -r dist/* user@120.79.120.120:/var/www/myapp
  • 确保替换 user 为您的实际用户名。

4. 设置正确权限

• 再次 SSH 登录服务器。
• 将目录所有权更改为 Nginx 用户，以确保 Web 服务器可以读取文件：
  • 运行：sudo chown -R www-data:www-data /var/www/myapp

5. 安装和配置 Nginx

Nginx 是一个高效的 Web 服务器，适合服务静态文件：

• 更新软件包列表：sudo apt update

• 安装 Nginx：sudo apt install nginx

• 启动 Nginx 并设置为开机自启：

  • 运行：sudo systemctl start nginx
  • 运行：sudo systemctl enable nginx

• 创建并编辑 Nginx 配置文件：

  • 运行：sudo nano /etc/nginx/sites-available/myapp.conf

  • 添加以下内容：

    server {listen 80;server_name 120.79.120.120;root /var/www/myapp;index index.html;location / {try_files $uri $uri/ /index.html;}
    }
    

  • 保存并退出编辑器。

• 创建符号链接以启用站点：

  • 运行：sudo ln -s /etc/nginx/sites-available/myapp.conf /etc/nginx/sites-enabled/

• 测试 Nginx 配置是否正确：

  • 运行：sudo nginx -t

• 如果测试通过，重新加载 Nginx：

  • 运行：sudo systemctl reload nginx

6. 配置阿里云 ECS 安全组

为了允许外部访问您的网站，您需要在阿里云控制台中配置安全组：

• 登录阿里云控制台。
• 导航到 ECS 实例管理页面。
• 找到您的实例，点击“安全组”选项。
• 编辑安全组规则，添加入站规则：
  • 协议类型：自定义 TCP
  • 端口范围：80/80
  • 授权对象：0.0.0.0/0（允许所有 IP 访问，若需限制可改为特定 IP）
• 保存更改。

7. 可选：检查服务器防火墙

Ubuntu 可能使用 UFW（Uncomplicated Firewall）管理防火墙：

• 检查 UFW 状态：sudo ufw status
• 如果 UFW 处于活动状态，允许端口 80：sudo ufw allow 80/tcp
• 重新加载 UFW：sudo ufw reload
• 注意：由于阿里云 ECS 主要依赖安全组，UFW 通常可省略，但为确保无误可执行上述步骤。

8. 测试部署

• 打开浏览器，访问 http://120.79.120.120，检查您的 React 应用程序是否正常显示。
• 如果网站无法访问，请检查：
  • 安全组规则是否正确配置。
  • Nginx 服务是否运行（可运行 sudo systemctl status nginx 检查）。
  • 服务器日志（/var/log/nginx/error.log）是否有错误。

二、可能遇到的问题

2.1 尝试通过 SSH 连接阿里云 ECS 服务器时遇到 Connection timed out 错误

这通常表明客户端无法与服务器的 22 端口（SSH 默认端口）建立连接。导致该问题的可能原因包括：

1. 阿里云安全组未开放 22 端口：阿里云 ECS 使用安全组控制网络访问，如果未配置允许 22 端口的入站规则，SSH 连接会被阻止。
2. 服务器防火墙阻止了 22 端口：Ubuntu 服务器上的防火墙（如 UFW 或 iptables）可能限制了 22 端口的访问。
3. 网络问题：客户端或服务器端的网络不稳定，或阿里云 ECS 实例所在的地域网络存在限制。
4. SSH 服务未运行：服务器上的 SSH 服务（通常是 sshd）可能未启动或配置错误。
5. 公网 IP 绑定或实例状态问题：ECS 实例的公网 IP 可能未正确绑定，或者实例处于停止/重启状态。
6. 客户端网络限制：您本地的网络（如公司网络或防火墙）可能限制了出站 SSH 连接。

2.2 解决方案：确保 SSH 连接稳定

1. 检查阿里云安全组设置

阿里云的安全组是控制 ECS 实例网络访问的第一道防线，需确保 22 端口开放：

• 登录阿里云控制台（https://ecs.console.aliyun.com）。
• 找到您的 ECS 实例（公网 IP 为 120.79.213.148）。
• 点击实例名称，进入实例详情页面。
• 在左侧导航栏选择“安全组”，查看关联的安全组。
• 点击“配置规则” > “添加规则”，确保有以下入站规则：
  • 协议类型：自定义 TCP
  • 端口范围：22/22
  • 授权对象：0.0.0.0/0（允许所有 IP 访问）或您的特定 IP（如 47.96.60.211，参考服务器信息中的最后登录 IP）。
• 如果规则缺失，添加并保存。
• 注意：若只允许特定 IP 访问，需动态更新规则以匹配您的客户端 IP（尤其当您使用动态 IP 时）。

2. 检查服务器防火墙

Ubuntu 服务器可能运行 UFW 或其他防火墙，需确保 22 端口未被阻止：

• 使用阿里云控制台的“远程连接”功能（VNC）登录服务器（避免直接 SSH，以防无法连接）。
• 检查 UFW 状态：
  • 运行：sudo ufw status
  • 如果显示 Status: active，检查是否有允许 SSH 的规则。
  • 若无，添加规则：sudo ufw allow 22/tcp
  • 重新加载防火墙：sudo ufw reload
• 如果未使用 UFW，检查 iptables：
  • 运行：sudo iptables -L -n
  • 确保 INPUT 链允许 22 端口的 TCP 流量。
• 优化建议：为安全起见，可限制 SSH 访问的来源 IP，例如：
  • sudo ufw allow from <您的客户端IP> to any port 22

3. 验证 SSH 服务状态

确保服务器上的 SSH 服务正常运行：

• 通过 VNC 登录服务器。
• 检查 SSH 服务：
  • 运行：sudo systemctl status ssh 或 sudo systemctl status sshd
  • 如果服务未运行，启动它：sudo systemctl start sshd
  • 确保开机自启：sudo systemctl enable sshd
• 检查 22 端口是否在监听：
  • 运行：sudo netstat -tuln | grep 22 或 sudo ss -tuln | grep 22
  • 应看到类似 tcp 0 0 0.0.0.0:22 的输出，表示 22 端口正在监听。
• 如果修改了 SSH 配置（/etc/ssh/sshd_config），重启服务：
  • 运行：sudo systemctl restart sshd

4. 检查网络和 ECS 实例状态

• 确认实例运行状态：
  • 在阿里云控制台中，检查实例是否处于“运行中”状态。
  • 如果实例已停止，启动它。
• 验证公网 IP 绑定：
  • 确认公网 IP（120.79.213.148）仍绑定到您的实例（在“网络与安全” > “弹性公网 IP”中查看）。
• 网络连通性测试：
  • 从本地运行：ping 120.79.213.148
  • 如果 ping 失败，可能是网络问题或阿里云限制了 ICMP 流量，但这不一定影响 SSH。
  • 使用 telnet 测试 22 端口：telnet 120.79.213.148 22
  • 如果连接失败，说明 22 端口未开放或被阻止。

5. 检查客户端网络

您的本地网络可能限制了 SSH 连接：

• 如果您在公司或学校网络中，防火墙可能阻止了出站 22 端口流量。
  • 尝试切换到个人网络（如手机热点）并重试 SSH。
• 如果您的客户端 IP 是动态的，可能需要更新安全组规则以匹配新 IP。
  • 检查当前 IP：访问 https://www.whatismyipaddress.com/。
  • 更新安全组规则以允许新 IP。

6. 提高 SSH 连接稳定性

为避免未来连接不稳定，可采取以下措施：

• 使用固定公网 IP：

  • 如果您的客户端 IP 经常变化，考虑为客户端获取静态 IP，或在安全组中使用更广的 IP 范围（例如 47.96.60.0/24，需谨慎）。

• 启用 Keep-Alive：

  • 编辑 SSH 客户端配置文件（本地电脑的 ~/.ssh/config）：

    Host aliyunHostName 120.79.213.148User rootServerAliveInterval 60ServerAliveCountMax 3
    

  • 这会定期发送保持连接的数据包，防止因网络空闲而断开。

• 更换 SSH 端口（可选，增加安全性）：

  • 编辑 /etc/ssh/sshd_config，将 Port 22 改为其他端口（如 Port 2222）。
  • 重启 SSH 服务：sudo systemctl restart sshd
  • 更新安全组规则以允许新端口。
  • 连接时指定端口：ssh -p 2222 root@120.79.213.148

• 监控 ECS 网络：

  • 在阿里云控制台的“云监控”中，查看实例的网络流量和状态，排除区域网络问题。

7. 故障排查

如果问题仍未解决：

• 检查服务器日志：
  • 查看 SSH 日志：sudo tail -f /var/log/auth.log 或 /var/log/secure
  • 查找连接失败的相关错误。
• 重启实例：
  • 在阿里云控制台中重启 ECS 实例，排除临时问题。
• 联系阿里云支持：
  • 如果安全组和防火墙配置正确但仍无法连接，可能是阿里云网络限制或实例问题，提交工单获取帮助。

参考资料

• 阿里云文档：配置安全组
• Ubuntu 官方：UFW 防火墙配置
• DigitalOcean：排查 SSH 问题

三、附加说明

• 用户名确认：阿里云 ECS Ubuntu 实例的默认用户名通常为 root，但也可能在创建实例时设置为 ubuntu 或其他名称。若不确定，可在控制台查看实例详情或回忆创建时的设置。
• HTTPS 设置：当前步骤使用 HTTP（端口 80），若需启用 HTTPS，可参考后续教程安装 Let’s Encrypt 并配置 SSL（例如 DigitalOcean 的相关指南）。
• 客户端路由：React 应用可能使用客户端路由（如 React Router），Nginx 配置中的 try_files $uri $uri/ /index.html; 确保路由正常工作。

四、参考资料

• DigitalOcean: 如何在 Ubuntu 上使用 Nginx 部署 React 应用程序
• 阿里云文档: 配置安全组规则