服务器中更新前端项目

一、本地准备：构建最新前端代码

首先在本地环境生成最新的前端打包文件（dist文件夹），确保代码无误：

npm run build  # 生成最新 dist 文件夹

二、上传本地文件到服务器

# 格式：scp -r 本地文件路径 服务器用户@服务器IP:服务器目标路径
# 1. 上传 dist 文件夹（-r 表示递归上传文件夹）
scp -r /本地项目路径/dist  root@你的服务器IP:/path/to/frontend/# 2. 上传 Dockerfile（单个文件无需 -r）
scp /本地项目路径/Dockerfile  root@你的服务器IP:/path/to/frontend/

• 替换 root 为你的服务器实际用户名（如 ubuntu）；
• 替换 你的服务器IP 为服务器公网 IP（如 1.2.3.4）；
• 替换 /path/to/frontend 为服务器上 frontend 文件夹的实际路径（如 /home/project/frontend）。

三、服务器操作：重建镜像并重启容器

1、停止并删除旧容器（旧容器名为 nginx-frontend，需先停止再删除）：

# 1. 停止旧容器
docker stop nginx-frontend# 2. 删除旧容器（若需保留历史可跳过，但建议删除避免名称冲突）
docker rm nginx-frontend

2、重建前端镜像（关键步骤，确保使用最新代码构建）：

docker build --no-cache -t my-frontend:v1 .

3、启动新容器（参数需与旧容器一致，确保端口映射正常）：

docker run -d --name nginx-frontend -p 3000:80 my-frontend:v1

• -d：后台运行容器；
• --name nginx-frontend：指定容器名（与旧容器一致，便于后续操作）；
• -p 3000:80：端口映射（服务器 3000 端口 → 容器 80 端口，与旧容器保持一致）。

四、验证更新是否成功

1、检查容器状态：执行以下命令，确认 nginx-frontend 容器的 STATUS 为 Up（运行中）：

docker ps | grep nginx-frontend

2、访问前端页面

• 打开浏览器，输入 http://你的服务器IP:3000，查看页面是否为最新版本；
• 若页面未更新，可强制刷新浏览器（Ctrl+Shift+R），或清除浏览器缓存后重试。