vue部署
1.虚拟机打包
0.本地打包（webstorm）
npm run build
1.上传工程及镜像
# 1.将打包好的文件dist压缩，发送到服务器一文件夹内
[root@localhost ~]# cd /opt/frontend
[root@localhost frontend]# ls
dist.zip
# 2.解压打包的文件
[root@localhost frontend]# unzip dist.zip
[root@localhost frontend]# ls
dist dist.zip
# 3.编写Dockerfile
[root@localhost frontend]# vi Dockerfile
Dockerfile：
# 使用 Nginx 作为基础镜像
FROM nginx:stable-alpine
# 将构建好的静态文件复制到 Nginx 的默认目录
COPY dist /usr/share/nginx/html
# 暴露容器的 80 端口（可根据需要修改）
EXPOSE 80
# 启动 Nginx 服务器
CMD ["nginx", "-g", "daemon off;"]
build.sh:
# 4.生成一个镜像web_vue，并把该命令整理成脚本
[root@localhost frontend]# echo "docker build -t myweb ." > build.sh
2.安装docker
3.更新程序/生成镜像（images）
这里直接把更新的dist程序生成镜像
[root@localhost frontend]# ls
dist dist.zip Dockerfile build.sh
# 1.执行运行脚本（运行Dockerfile）
[root@localhost frontend]# ./build.sh
# 2.查看docker镜像
[root@localhost frontend]# docker images
REPOSITORY TAG IMAGE ID CREATED SIZE
myweb latest b8f2fbcd978b 14 hours ago 43.8MB
pymy latest 62bf1bc7f047 2 weeks ago 1.28GB
pynew latest 7a61e3591a00 2 weeks ago 1.28GB
node lts-alpine 28fd30c24deb 24 months ago 110MB
python 3.10 a5d7930b60cc 2 years ago 917MB
nginx stable-alpine 373f8d4d4c60 2 years ago 23.2MB
4.生成容器（container）并运行
# 1.基于web_vue镜像,生成容器，映射端口88：80
[root@localhost frontend]# docker run -it -d -p 88:80 myweb
582d3bef8fcacdfced206032799ce885a7a5cb731d13d80c13b56192592716eb
# 2.查看系统容器（container），即进程
[root@localhost frontend]# docker ps
CONTAINER ID IMAGE COMMAND CREATED PORTS NAMES
582d3bef8fca myweb "/docker-entrypoint.…" 6 seconds ago 0.0.0.0:88->80/tcp, :::88->80/tcp awesome_greider
# 3.运行端口（有时有的端口被占用，换端口）
[root@localhost frontend]# curl 127.0.0.1:88
<!DOCTYPE html>
<html lang="zh-CN" id="html">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>RMPA</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/ant-design-vue/3.2.20/antd.min.css">
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js" ></script>
<script type="module" crossorigin src="/assets/index-afa7c0d5.js"></script>
<link rel="stylesheet" href="/assets/index-1d8f62a7.css">
</head>
<body>
<div id="app"></div>
</body>
</html>
# 重要必须做
# 进入容器
[root@localhost frontend]# docker exec -it 58 sh
/ # vi /etc/nginx/nginx.conf
/ # vi /etc/nginx/conf.d/default.conf
server {
listen 80;
listen [::]:80;
server_name localhost;
#access_log /var/log/nginx/host.access.log main;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
# 添加这一行
try_files $uri $uri/ /index.html; #解决页面刷新404问题
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
- /etc/nginx/conf.d/default.conf 1/45 2%
5.打包镜像（images）
[root@localhost frontend]# docker save myweb:latest > web.tar
[root@localhost frontend]# ls
dist dist.zip Dockerfile build.sh web.tar
[root@localhost frontend]# sz web.tar (保存到桌面)
2.新服务器部署
1.上传镜像
# 将打包好的镜像放入服务器的一文件夹
root@iZ8vbdn64nyz3h1qvey2rbZ:/# mkdir /vuework
root@iZ8vbdn64nyz3h1qvey2rbZ:/# cd /vuework
root@iZ8vbdn64nyz3h1qvey2rbZ:/frontend# ls
web.tar
2.加载镜像
# 加载镜像
root@iZ8vbdn64nyz3h1qvey2rbZ:/frontend# docker load < web.tar
Loaded image: web_vue:latest
root@iZ8vbdn64nyz3h1qvey2rbZ:/frontend# docker images
REPOSITORY TAG IMAGE ID CREATED SIZE
myweb latest b8f2fbcd978b 18 hours ago 43.8MB
pymy latest f5cf2670087f 2 weeks ago 1.36GB
python 3.10 748d669298ac 2 months ago 1e+03MB
root@iZ8vbdn64nyz3h1qvey2rbZ:/frontend#
3.生成容器（container）并运行
# 基于web_vue镜像,生成容器，映射端口8084：80
root@iZ8vbdn64nyz3h1qvey2rbZ:/frontend# docker run -it -d -p 8084:80 myweb
fcc4a30ae4ac0f8ab4f58079af6a79e42f64e0c13c2a486575477a9cb4b700f6
root@iZ8vbdn64nyz3h1qvey2rbZ:/frontend# docker ps
CONTAINER ID IMAGE COMMAND CREATED PORTS NAMES
fcc4a30ae4ac myweb "/docker-entrypoint.…" 59 seconds ago 0.0.0.0:8084->80/tcp, :::8084->80/tcp hungry_yalow
dc464606ff60 myweb "/docker-entrypoint.…" 17 hours ago 0.0.0.0:8085->80/tcp, :::8085->80/tcp vue
aca9afaaf92b pysrv "python3 manage.py r…" 19 hours ago 0.0.0.0:8082->8000/tcp, :::8082->8000/tcp wonday
进行重要必须做
4.开放端口
5.测试端口：
端口：47.92.84.209:8084
3.更新程序
1.重新打包（webstorm）
# 把重新打包的程序dist传到文件夹内，并解压
root@iZ8vbdn64nyz3h1qvey2rbZ:/vuework# ls
dist.zip web.tar
root@iZ8vbdn64nyz3h1qvey2rbZ:/vuework# unzip dist.zip
Archive: dist.zip
root@iZ8vbdn64nyz3h1qvey2rbZ:/vuework# ls
dist dist.zip web.tar
#把新的打包程序dist 拷贝到fcc4a30ae4ac 容器内
root@iZ8vbdn64nyz3h1qvey2rbZ:/vuework# docker cp dist fcc:/tmp/
Successfully copied 20.7MB to fcc:/tmp
root@iZ8vbdn64nyz3h1qvey2rbZ:/vuework# docker exec -it fcc sh
/ # cd /tmp/
/tmp # ls
dist
/tmp # cd /usr/share/nginx
/usr/share/nginx # ls
html
/usr/share/nginx # rm html/* -rf
/usr/share/nginx # cp /tmp/dist/* html/ -r
/usr/share/nginx # ls
html
/usr/share/nginx #
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？