使用finalshell在新服务器上部署前端页面

先把finalShell与服务器连接好再看下面的操作

一、先把前端打包文件传到服务器

首先要给 `lucas` 用户单独授权（推荐，安全又方便）

直接给 /data 目录的所有权改成 lucas，这样你用 FinalShell 登录的 lucas 用户就能自由读写了。

在 FinalShell 的终端里执行：

bash 复制代码

# 把 /data 目录的所有者改成 lucas，所属组也改成 lucas
sudo chown -R lucas:lucas /data

我用的是 FinalShell，传文件非常方便，有两种方式：

方式 1：直接用 FinalShell 的文件管理器上传

找到你本地的打包文件 你的 dist 目录（uni-app H5/Vue 项目执行 npm run build 后生成的文件夹），里面的所有文件就是要上传的内容。
在 FinalShell 里找到上传目录 你截图里的 /data 目录可以用来放项目，比如在 /data 下新建一个项目文件夹，比如 mkdir -p /data/frontend
上传文件
- 在 FinalShell 右侧的文件管理器里，进入 /data/frontend 目录
- 直接把本地 dist 里的所有文件 / 文件夹拖到右侧窗口，它会自动上传。

方式 2：用 `scp` 命令上传（终端方式）

如果你更习惯命令行，在你本地电脑的终端执行：

bash 复制代码

# 本地 dist 文件夹上传到服务器 /data/frontend 目录
scp -r /本地项目路径/dist/* lucas@192.168.9.234:/data/frontend/

输入服务器密码后就会开始传输。

二、给文件设置权限（避免访问报错）

上传完成后，先给目录设置正确的权限，避免后续 Nginx 读取不到文件：

bash 复制代码

# 进入项目目录
cd /data/frontend

# 给所有文件和目录设置权限
sudo chmod -R 755 .
sudo chown -R root:root .  # 或当前运行Nginx的用户，一般默认root即可

三、安装并配置 Nginx（用来运行静态页面）

Linux 上部署前端静态页面，最常用的就是 Nginx。

1. 安装 Nginx

bash 复制代码

# 更新软件源
sudo apt update

# 安装Nginx
sudo apt install -y nginx

2. 配置你的前端站点

创建一个 Nginx 配置文件：

bash 复制代码

sudo nano /etc/nginx/sites-available/frontend.conf

写入以下配置（按你的实际路径改）：

bash 复制代码

server {
    listen 80;  # 端口，默认80
    server_name _;  # 没有域名就填下划线，代表匹配所有

    root /data/frontend;  # 你的项目文件目录
    index index.html;

    # 处理Vue/uni-app的路由模式（如果是history模式必须加）
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 静态资源缓存配置（可选，优化性能）
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        expires 7d;
        add_header Cache-Control "public, max-age=604800";
    }
}

保存退出：Ctrl+O（字母o） → 回车 → Ctrl+X

启用配置并重启 Nginx

bash 复制代码

# 启用站点配置
sudo ln -s /etc/nginx/sites-available/frontend.conf /etc/nginx/sites-enabled/

# 检查配置是否正确
sudo nginx -t

# 重启Nginx生效
sudo systemctl restart nginx

# 设置开机自启
sudo systemctl enable nginx

四、放行服务器防火墙（如果访问不通）

如果你的服务器开了防火墙，需要放行 80 端口：

bash 复制代码

sudo ufw allow 80/tcp
sudo ufw reload

五、测试访问

直接在浏览器输入服务器 IP 地址：http://192.168.9.234
如果能正常打开你的前端页面，就说明部署成功了！

六、常见问题排查

403 Forbidden ：检查文件权限是否设置正确，/data/frontend 目录是否有读权限。
404 Not Found ：检查 Nginx 配置里的 root 路径是否正确，文件是否真的上传到了对应目录。
白屏 / 只有页面框架没有内容 ：检查 Nginx 配置里是否加了 try_files $uri $uri/ /index.html;（history 路由模式必须配置）。
静态资源 404 ：检查 dist 目录下的资源路径是否正确，是否用了相对路径。

运行效果

当前访问的是 Nginx 默认的欢迎页，说明你的配置文件还没生效，或者 Nginx 还在使用默认配置。我们要做的就是：

写一个专门指向你项目的 Nginx 配置
启用它并重启 Nginx

七. 创建并编辑你的项目配置文件

在服务器终端执行以下命令，创建一个配置文件：

bash 复制代码

sudo nano /etc/nginx/sites-available/frontend.conf

把下面这段完整配置复制进去（注意 root 路径要和你的项目目录一致，这里用你之前的 /data/frontend）：

bash 复制代码

server {
    listen 80;
    server_name _;

    # 这里改成你的项目目录，和你上传文件的路径一致
    root /data/frontend;
    index index.html;

    # 关键配置：适配 uni-app H5 的 history 路由模式
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 静态资源缓存优化（可选，能提升加载速度）
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        expires 7d;
        add_header Cache-Control "public, max-age=604800";
    }
}

按 Ctrl+O 保存，按 Enter 确认，再按 Ctrl+X 退出编辑器。

按 Ctrl+O 保存，按 Enter 确认，再按 Ctrl+X 退出编辑器。

八. 启用配置并关闭默认页面

bash 复制代码

# 1. 创建软链接，启用配置
sudo ln -s /etc/nginx/sites-available/frontend.conf /etc/nginx/sites-enabled/

# 2. 禁用 Nginx 默认的欢迎页
sudo unlink /etc/nginx/sites-enabled/default

# 3. 检查配置文件是否有语法错误
sudo nginx -t

# 看到 "test is successful" 说明配置没问题，再重启 Nginx
sudo systemctl restart nginx

九、验证访问

重启完成后，刷新浏览器的 http://192.168.9.234，就能看到你的前端页面了！

十、如果还是显示默认页 / 白屏，按下面排查

确认文件路径是否正确 检查 /data/frontend 目录下是否存在 index.html，以及 assets/、static/ 这些文件夹：

bash 复制代码

ls /data/frontend

输出里能看到 index.html 才算正确。
确认文件权限是否正常给项目目录补一次权限，避免 Nginx 读不到文件：

bash 复制代码

sudo chown -R www-data:www-data /data/frontend
sudo chmod -R 755 /data/frontend

强制刷新浏览器缓存 浏览器可能还在加载旧的默认页，按 Ctrl+F5 强制刷新即可。

十一、补充说明

如果你用的是 uni-app 的 hash 路由模式，上面的配置也完全兼容，不用额外修改。
后续修改前端代码后，只要重新打包上传到 /data/frontend 目录，再刷新浏览器就能看到更新。

FinalShell 是一款免费的国产的集 SSH

工具、服务器管理、远程桌面加速的良心软件，同时支持

Windows,macOS,Linux，它不单单是一个 SSH

工具，完整的说法应该叫一体化的的服务器，网络管理软件，在很大程度上可以免费替代

XShell，是国产中不多见的良心产品，具有免费海外服务器远程桌面加速，ssh

加速，双边 tcp 加速，内网穿透等特色功能。
FinalShell是一款一体化的的服务器，网络管理软件，软件支持多标签、批量服务器管理、自定义命令参数、SSH加速等功能，不仅是SSH客户端，还是功能强大的开发，运维工具，充分满足开发，运维需求。

使用finalshell在新服务器上部署前端页面

一、先把前端打包文件传到服务器

首先要给 lucas 用户单独授权（推荐，安全又方便）

方式 1：直接用 FinalShell 的文件管理器上传

方式 2：用 scp 命令上传（终端方式）

二、给文件设置权限（避免访问报错）

三、安装并配置 Nginx（用来运行静态页面）

1. 安装 Nginx

2. 配置你的前端站点

四、放行服务器防火墙（如果访问不通）

五、测试访问

六、常见问题排查

七. 创建并编辑你的项目配置文件

八. 启用配置并关闭默认页面

九、验证访问

十、如果还是显示默认页 / 白屏，按下面排查

十一、补充说明

首先要给 `lucas` 用户单独授权（推荐，安全又方便）

方式 2：用 `scp` 命令上传（终端方式）