服务器中更新前端项目

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

首先在本地环境生成最新的前端打包文件(dist文件夹),确保代码无误:

javascript 复制代码
npm run build  # 生成最新 dist 文件夹

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

javascript 复制代码
# 格式: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,需先停止再删除):
javascript 复制代码
# 1. 停止旧容器
docker stop nginx-frontend

# 2. 删除旧容器(若需保留历史可跳过,但建议删除避免名称冲突)
docker rm nginx-frontend
2、重建前端镜像(关键步骤,确保使用最新代码构建):
javascript 复制代码
docker build --no-cache -t my-frontend:v1 .
3、启动新容器(参数需与旧容器一致,确保端口映射正常):
javascript 复制代码
docker run -d --name nginx-frontend -p 3000:80 my-frontend:v1
  • -d:后台运行容器;
  • --name nginx-frontend:指定容器名(与旧容器一致,便于后续操作);
  • -p 3000:80:端口映射(服务器 3000 端口 → 容器 80 端口,与旧容器保持一致)。

四、验证更新是否成功

1、检查容器状态 :执行以下命令,确认 nginx-frontend 容器的 STATUSUp(运行中):
javascript 复制代码
docker ps | grep nginx-frontend
2、访问前端页面
  • 打开浏览器,输入 http://你的服务器IP:3000,查看页面是否为最新版本;
  • 若页面未更新,可强制刷新浏览器(Ctrl+Shift+R),或清除浏览器缓存后重试。
相关推荐
ybb_ymm1 天前
前端开发之ps基本使用
前端·css
Ashley的成长之路1 天前
NativeScript-Vue 开发指南:直接使用 Vue构建原生移动应用
前端·javascript·vue.js
衿璃1 天前
Flutter应用架构设计的思考
前端·flutter
朕的剑还未配妥1 天前
Vue 2 响应式系统常见问题与解决方案(包含_demo以下划线开头命名的变量导致响应式丢失问题)
前端·vue.js
一吃就胖的1 天前
【给服务器安装服务器安装nacos】
java·运维·服务器
小云数据库服务专线1 天前
GaussDB 应用侧报no pg_hba.conf entry for host处理方法
服务器·网络·gaussdb
christine-rr1 天前
linux常用命令——其他
linux·服务器·网络·数据库·redis·ubuntu
zhaotiannuo_19981 天前
虚拟机安装ikuai系统相关配置
运维·服务器·性能优化
JNU freshman1 天前
Element Plus组件
前端·vue.js·vue3
“αβ”1 天前
了解“网络协议”
linux·服务器·网络·c++·网络协议·tcp/ip·tcp