vue项目docker环境打包部署

为什么用docker

Docker在迁移方面具有显著的优势。首先，Docker容器可以在各种平台上运行，包括云服务器、物理机、虚拟机等，只要主机操作系统支持Docker。对于开发和运维人员，他们希望一次创建或配置能够在任何地方正常运行。Docker允许通过定制应用镜像来实现这一目标。开发人员可以使用Dockerfile进行镜像构建，并结合持续集成系统进行集成测试。而运维人员则可以在生产环境中快速部署这些镜像，甚至结合持续部署系统实现自动部署。此外，Dockerfile确保镜像构建的透明性，使得开发团队和运维团队都能理解应用运行环境，从而更有效地进行部署。

安装docker环境

docker.p2hp.com/

项目配置

1. 在vue项目根目录创建Dockerfile和default.conf文件

2. Dockerfile文件配置：

FROM nginx:latest

EXPOSE 80

COPY ./dist /usr/share/nginx/html

# 将第一阶段的静态文件复制到nginx中
COPY default.conf /etc/nginx/conf.d/default.conf

# 运行
CMD ["nginx", "-g", "daemon off;"]

3. 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;

        try_files $uri $uri/ /index.html;

        index  index.html index.htm;

        # 解决部分前端框架的路由问题，在浏览器刷新报错404

        # try_files $uri $uri/ /index.html;

    }

    error_page   500 502 503 504  /50x.html;

    location = /50x.html {

        root   /usr/share/nginx/html;

    }

}

镜像打包

1. 在根目录终端执行docker镜像打包 name: 镜像名称 tag：版本

Docker buildx build --platform linux/arm,linux/arm64,linux/amd64 -t <name>:<tag> . --load

2. 上传到远程仓库 192.168.0.10:5000是你的远程仓库地址

• 先登录：

docker login http://192.168.0.10:5000

• 再上传：

docker push http://192.168.0.10:5000/library/<name>:<tag>  name:镜像名称 tag：版本

发布容器

1. 拉取镜像

docker pull http://192.168.0.10:5000/library/<name>:<tag>

2. 发布容器 --name="flweb-proxy"是容器的名称和版本

docker run -itd --restart=always --name=flweb-proxy -p 8999:80 http://192.168.0.10:5000/library/<name>:<tag>

3. 更新容器

先停止docker stop <name>

后删除  docker rm <name>

• 最后执行发布容器命令

---