docker部署vue应用

一、docker：nginx容器部署dist包

1、vue文件打包为dist

2、编写dockerfile文件，文件内容仅需要指向nginx即可例: FROM nginx:1.23

3、使用命令 docker build -f Dockerfile -t 镜像名称 . 打包镜像

4、使用 docker pull 镜像名称:版本 下载nginx镜像

5、启动dist镜像执行 
docker run --name 自定义容器名称 -d -p 自定义端口:80 镜像名称:版本号 

6、启动nginx镜像执行
docker run --name 自定义容器名称 -d -p 4030:80 镜像名称:版本号

7、页面访问http://localhost:4030 查看nginx是否启动成功

8、docker ps  查看nginx容器id并执行 docker exec -it 容器id bash进入容器 

9、将dist文件夹下所有文件复制到 nginx容器 /usr/share/nginx/html 下 

二、物理机的前端包路径为/root/a/dist,docker里面有nginx,将/root/a/dist 的路径挂载在docker里，使得每次更新前端包只需要替换物理机的/root/a/dist 这个目录下的文件，该如何实现？
1.nginx.conf
server {
    listen 80;
    server_name localhost;

    location / {
        root /usr/share/nginx/html;
        index index.html;
    }
}

2.运行 Nginx 容器
docker run -d -p 8080:80 --name my-nginx-container -v /root/a/dist:/usr/share/nginx/html nginx

这个命令将会：

*在后台运行一个名为 my-nginx-container 的容器。
*将容器的 80 端口映射到物理机的 8080 端口，你可以根据需要修改端口映射。
*使用 -v 参数将物理机上的 /root/a/dist 目录挂载到容器内的 /usr/share/nginx/html 路径，实现了前端包的同步更新。

3.访问前端应用
现在，能够通过访问 http://localhost:8080 或者你设置的端口号来访问运行在 Docker 容器内的 Nginx 服务器，显示的内容应该是物理机上 /root/a/dist 中的前端包内容。