服务器中更新前端项目

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

首先在本地环境生成最新的前端打包文件(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),或清除浏览器缓存后重试。
相关推荐
2301_797604242 小时前
d40: vue杂项问题
前端·javascript·vue.js
weixin_443290692 小时前
【云服务器相关】云服务器与P2P
运维·服务器·云计算·p2p
Mintopia3 小时前
领域适配 AIGC:垂直行业 Web 应用的微调技术实践
前端·javascript·aigc
牛奶咖啡133 小时前
解决keepalived的主备服务器都持有VIP——出现脑裂现象
linux·运维·服务器·vrrp·脑裂·keepalived主备·高可用主备都持有vip
Mintopia3 小时前
Next.js 内置后端能力扩展 —— 重定向与路由保护
前端·javascript·next.js
IT_陈寒3 小时前
Python 3.12 性能暴增50%!这5个新特性让老项目直接起飞
前端·人工智能·后端
weixin_423196173 小时前
使用vscode的ssh功能连接远程服务器卡在Setting up SSH Host IP: Downloading VS Code Server的解决方案
服务器·vscode·ssh
excel3 小时前
JavaScript 中的对象池:复用对象的高效方案
前端
excel3 小时前
Vue实例挂载的过程中发生了什么
前端