Mac电脑使用 Tabby 部署前端项目到阿里云服务器完整教程

📌 目录

准备工作
连接服务器
上传项目文件
[配置 Nginx](#配置 Nginx)
更新已发布的项目
常用命令速查
常见问题排查

1. 准备工作

你需要有的东西

项目	说明
服务器 IP	例如：`47.108.199.28`
服务器用户名	通常是 `root`
服务器密码	例如：`xxxxx`
本地项目	打包好的 `dist` 文件夹（Vue/React 构建产物）
Tabby 终端工具	已安装好

📌 注意：本教程假设服务器上已经安装好了 Nginx。如果没有安装，请先联系运维或参考 Nginx 官方文档进行安装。

2. 连接服务器

2.1 打开 Tabby

打开 Tabby 应用，点击右上角的 齿轮图标 ⚙️（Settings）。

2.2 创建 SSH 连接

点击左侧菜单 Profiles & connections
点击 + New profile
选择 SSH connection，如下图
填写以下信息：

字段	填写内容
Name	连接名称（随意，如 `我的服务器`）
Host	服务器 IP，如 `47.108.199.28`
Port	`22`
Username	`root`
Authentication method	选择 `Password`
Password	点击 `Set password` 输入密码，勾选保存

点击 Save 保存

2.3 连接

回到刚刚的界面
界面上会显示这个小三角，点击 小三角 就启动服务器了

3. 上传项目文件

3.1 打开 SFTP

在已连接的 SSH 会话中，点击窗口右侧的 SFTP 图标（📁 文件夹图标） 。

3.2 导航目录

右侧是服务器文件系统
导航到项目存放目录（建议统一放在 /home/ 下）

bash 复制代码

# （在命令行执行）
mkdir -p /home/demo-show1

3.3 上传文件

左侧找到你 Mac 上的 dist 文件夹
直接拖拽到右侧的 /home/demo-show1/ 目录下
等待上传完成

4. 配置 Nginx

4.1 创建配置文件

在 SSH 命令行中执行：

bash 复制代码

cat > /etc/nginx/conf.d/demo.conf << 'EOF'
server {
    listen 8083;
    server_name 47.108.199.28;

    location / {
        alias /home/demo-show1/dist/;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}
EOF

💡 说明：listen 8083 是访问端口，可以改成其他数字（如 8080、3000 等）。

4.2 测试配置

bash 复制代码

nginx -t

看到以下内容表示配置正确：

复制代码

nginx: configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

4.3 重载 Nginx

bash 复制代码

nginx -s reload

4.4 开放端口

阿里云需要在安全组中放行端口：

登录阿里云控制台
进入你的实例 → 安全组
添加入方向规则：
- 端口：8083
- 协议：TCP
- 授权对象：0.0.0.0/0

服务器内部防火墙（如果有）：

bash 复制代码

firewall-cmd --add-port=8083/tcp --permanent && firewall-cmd --reload

4.5 验证访问

浏览器访问：http://47.108.199.28:8083/

看到项目页面即部署成功！🎉

5. 更新已发布的项目

场景：你的项目代码有更新，需要重新部署

方法一：直接覆盖上传（推荐）

在 Tabby 中连接到服务器
打开 SFTP，导航到 /home/demo-show1/
把本地新的 dist 文件夹直接拖拽覆盖到右侧
浏览器强制刷新（Command + Shift + R）即可看到更新

✅ 优点：简单快速，不需要重启 Nginx

方法二：完全替换（更干净）

bash 复制代码

# 1. 删除旧文件
rm -rf /home/demo-show1/dist

# 2. 重新创建目录
mkdir -p /home/demo-show1/dist

然后在 SFTP 中上传新的 dist 文件。

方法三：保留备份（最安全）

bash 复制代码

# 1. 备份旧版本
mv /home/demo-show1/dist /home/demo-show1/dist_backup_20260907

# 2. 上传新版本
# 在 SFTP 中上传新的 dist 文件夹

# 3. 如果新版本有问题，快速回滚
rm -rf /home/demo-show1/dist
mv /home/demo-show1/dist_backup_20260907 /home/demo-show1/dist

方法四：命令行快速上传（在 Mac 终端执行）

bash 复制代码

scp -r /本地dist文件夹路径/* root@47.108.199.28:/home/demo-show1/dist/

输入密码后自动上传，适合经常更新的场景。

6. 常用命令速查

命令	作用
`nginx -t`	测试 Nginx 配置是否正确
`nginx -s reload`	重载 Nginx 配置（不中断服务）
`nginx -s stop`	停止 Nginx
`systemctl status nginx`	查看 Nginx 运行状态
`systemctl restart nginx`	重启 Nginx
`mkdir -p /home/xxx`	创建目录
`rm -rf /home/xxx`	删除目录（⚠️ 谨慎使用）
`mv /old /new`	移动或重命名文件/目录
`ls -la`	查看当前目录所有文件（含隐藏）
`pwd`	查看当前所在路径
`tail -f /var/log/nginx/error.log`	实时查看 Nginx 错误日志

7. 常见问题排查

问题 1：访问网站显示 404 Not Found

原因：文件路径不对或文件名不对

解决方案：

bash 复制代码

# 检查文件是否存在
ls -la /home/demo-show1/dist/

# 确认有 index.html 文件

问题 2：访问网站显示 403 Forbidden

原因：权限不足

解决方案：

bash 复制代码

chmod -R 755 /home/demo-show1/

问题 3：访问网站显示连接超时

原因：端口未开放

解决方案：

检查阿里云安全组是否放行了对应端口
检查服务器内部防火墙：

bash 复制代码

firewall-cmd --list-ports          # 查看已开放端口
firewall-cmd --add-port=8083/tcp --permanent && firewall-cmd --reload  # 开放端口

问题 4：Vue/React 路由刷新出现 404

原因：前端路由（如 Vue Router 的 history 模式）需要后端支持

解决方案：在 Nginx 配置中添加：

nginx 复制代码

location / {
    alias /home/demo-show1/dist/;
    index index.html index.htm;
    try_files $uri $uri/ /index.html;  # 这一行已经包含了对前端路由的支持
}

问题 5：Nginx 配置报错

bash 复制代码

# 查看具体错误信息
nginx -t

# 查看错误日志
tail -50 /var/log/nginx/error.log

问题 6：上传文件失败

解决方案：

bash 复制代码

# 检查磁盘空间
df -h

# 检查目录权限
ls -la /home/

📝 附录：Vue/React 项目打包命令

bash 复制代码

# Vue 项目
npm run build

# React 项目
npm run build

# Vite 项目
npm run build

打包完成后，dist 文件夹就是你要上传的内容。

📚 目录结构建议

复制代码

/home/
├── demo-show1/          # 项目1
│   └── dist/            # 构建产物
│       ├── index.html
│       ├── assets/
│       └── ...
├── demo-show2/          # 项目2
│   └── dist/
└── demo-show3/          # 项目3
    └── dist/

✅ 总结

操作	关键步骤
首次部署	上传 dist → 配置 Nginx → 重载 → 访问验证
发布新项目	上传新 dist → 修改 Nginx 加 location → 重载 → 访问验证
更新项目	覆盖上传新的 dist → 浏览器强制刷新

📌 服务器信息（请自行替换）：

IP：47.108.199.28

用户名：root

端口：22

项目目录：/home/demo-show1/dist/

访问端口：8083