这篇文章分享一下如何通过docker将vue项目打包成镜像文件，并使用打包的镜像在docker/portainer上部署运行，写这篇文章参考了vue-cli和docker的官方文档。
首先，阅读vue-cli关于docker部署的说明，上面提供了关键的几个步骤。
从上面的页面内容中，得出了以下结论：前端项目需要依赖http服务器来部署，比如tomcat、apache、nginx等。
接下来开始进入正题，通过自己的天天生鲜商城的前端vue项目，手把手教大家一步一步地构建自己的vue项目的前端镜像，并在docker上启动起来。
目录
第一步、通过git拉取vue前端项目
第二步、下载项目依赖
第三步、创建Dockerfile
安装npm
下载nginx的镜像
下载node.js的镜像
第四步、创建.dockerignore文件
第五步：修改项目里使用的ip地址
第六步、编译项目
第七步、构建前端镜像
第八步、在docker/portainer上部署
docker上部署
portainer上部署
第一步、通过git拉取vue前端项目
在ubuntu的任意目录下执行以下命令拉取git项目的代码，建议在ubuntu的根目录/下操作。
1、切换到根目录
cd /2、克隆项目
git clone https://gitee.com/he-yunlin/ttsx.git
第二步、下载项目依赖
进入项目的根目录下
cd /ttsx下载项目依赖
npm install
第三步、创建Dockerfile
在ttsx项目的根目录下创建一个Dockerfile文件，文件内容如下：
FROM node:14.16.0 as build-stage
WORKDIR /app
COPY package*.json ./
COPY ./ .
FROM nginx as production-stage
RUN mkdir /app/
COPY --from=build-stage /app/dist /app
COPY nginx.conf /etc/nginx/nginx.conf这个Dockerfile文件做了以下几件事：
- 基于node.js构建一个docker容器A，在这个容器内部创建工作目录/app
- 把项目ttsx的根目录下的文件
复制到容器内部工作目录/app下- 基于nginx构建一个容器B，在这个容器内部创建工作目录/app
- 把容器A的/app/dist目录下的文件复制到容器B的/app目录下
- 把项目ttsx根目录下的nginx.conf复制为容器B的/etc/nginx/nginx.conf文件
接下来需要下载Dockerfile文件里要用到的命令和docker镜像：
安装npm
需要安装node.js或者npm工具，因为构建前端镜像的时候要用到。
apt install npm
下载nginx的镜像
docker pull nginx下载node.js的镜像
因为Dockerfile里面的
docker pull node:14.16.0
第四步、创建.dockerignore文件
在项目根目录下创建名为.dockerignore的文件。
.dockerignore文件配置在Dockerfile中执行COPY命令时忽略的文件，比如
COPY ./ .这条命令会把当前项目根目录下的所有文件（除了配置在了.dockerignore文件里的）都复制到docker容器内部。注意：上面的Dockerfile会从容器A中复制/app/dist，所以这里不能忽略/dist，否则就找不到了，镜像会构建失败。
**/node_modules
README.md
.gitignore
.dockerignore
Dockerfile
.idea第五步：修改项目里使用的ip地址
既然是在服务器上运行，就不能再用localhost了，应该改成对应的服务器ip地址。修改项目里用到的ip地址及端口号。
第六步、编译项目
npm run build
编译完成后，生成了一个dist目录
第七步、构建前端镜像
docker build . -t ttsx-20231003hyl第八步、在docker/portainer上部署
docker上部署
只需要通过docker的run命令运行刚刚打包的镜像，命令如下：
docker run ttsx-20231003hylportainer上部署
在portainer中添加一个应用程序栈stack，填写docker-compose.yml
version: "3"
services:ttsx:container_name: ttsximage: ttsx-20231003hylports:- 8088:8088填写完成后页面下拉，找到并点击Depoly the stack按钮，portainer就会帮我们通过指定的镜像和端口信息创建并运行一个docker容器。
