Dockerfile部署Vue项目

最新推荐文章于 2025-04-28 08:47:48 发布

lsiscool

最新推荐文章于 2025-04-28 08:47:48 发布

阅读量706

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js docker

本文链接：https://blog.youkuaiyun.com/LSlscool/article/details/133390823

博客介绍了Vue项目基于Nginx和Docker的部署流程。先安装Nginx，拉取其最新镜像并运行容器；接着打包Vue项目，编译后生成静态文件；然后在Linux空目录构建Dockerfile，设置基础镜像并复制文件；最后构建镜像、生成容器，若容器停止则启动，可通过指定地址访问。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装Nginx
部署Vue项目依赖Nginx，首先拉取Nginx的镜像，这里使用Nginx最新的镜像，然后根据Nginx镜像运行容器。

docker pull nginx
# -d参数：容器启动后会进入后台。
# -p参数：容器的80端口映射到本机的4030端口。
docker run --name nginx -d -p 4030:80 nginx

在这里插入图片描述

打包Vue项目
编译项目，编译完成之后，在项目的根目录下面就会生成一个dist-production文件夹，里面都是一系列的静态文件。
```
npm run build
```
构建Dockerfile
Linux上找个空目录放项目文件和Dockerfile。
```
vi Dockerfile
```
Dockerfile文件内容：

设置基础镜像，这里使用最新的Nginx镜像，前面已经拉取过了。将dist-production文件中的内容复制到 /usr/share/nginx/html/这个目录下面。
```
FROM nginx
COPY dist-production/ /usr/share/nginx/html/
```

构建镜像

# -t参数：指定image文件的名字，后面还可以用冒号指定标签。如果不指定，默认的标签就是latest。
# .：表示Dockerfile文件所在的路径，是当前路径，所以是一个点。
docker build -t dockervue .

在这里插入图片描述

生成容器

# --name参数：指定容器名称。
# -d参数：容器启动后会进入后台。
# -p参数：容器的80端口映射到本机的8081端口。
docker run --name dockervue -d -p 8081:80 dockervue

在这里插入图片描述

# -p参数：容器的 80 端口映射到本机的 8081 端口。
# -it参数：容器的 Shell 映射到当前的 Shell，然后你在本机窗口输入的命令，就会传入容器。
# dockervue：image 文件的名字。
/bin/bash：容器启动以后，内部第一个执行的命令。这里是启动 Bash，保证用户可以使用 Shell。
docker container run --name dockervue -p 8081:80 -it dockervue /bin/bash

如果容器停止，则启动容器，使用下面命令进入容器。

docker ps -a
docker restart 容器ID
docker exec -it 容器ID /bin/bash

访问192.168.137.4:8081