文章目录一、Dockerfile 的核心执行模型1.1 分层Layer机制1.2 镜像 ≠ 容器二、Dockerfile 常用指令讲解2.1 FROM基础镜像2.2 WORKDIR工作目录2.3 COPY / ADD拷贝文件2.4 RUN构建时执行命令2.5 CMD / ENTRYPOINT容器启动命令2.6 EXPOSE声明端口三、什么是多阶段构建重点问题背景四、前端项目 Dockerfile 实战(完整配置)4.1 编写 Dockerfile4.2 构建镜像4.3 创建容器并运行在前端工程化和部署中Dockerfile 是把“代码”变成“可运行应用”的关键文件。Dockerfile 是一份描述“如何构建 Docker 镜像”的脚本文件Docker 会从上到下逐行执行Dockerfile 中的指令最终生成一个镜像Image。一、Dockerfile 的核心执行模型1.1 分层Layer机制每一条指令都会生成一层FROM node:18-alpine RUN pnpm install RUN pnpm build上一层不变 → 下一层可复用缓存层越稳定构建越快理解缓存 写好 Dockerfile 的关键1.2 镜像 ≠ 容器概念含义Image构建好的“模版”ContainerImage 的运行实例Dockerfile → Image → Container二、Dockerfile 常用指令讲解2.1 FROM基础镜像FROM node:18-alpine一切镜像的起点alpine体积小适合生产2.2 WORKDIR工作目录WORKDIR /app类似cd /app后续指令都在这个目录执行2.3 COPY / ADD拷贝文件COPY package.json ./COPY最常用推荐ADD功能多一般不用2.4 RUN构建时执行命令RUN pnpm install发生在build 阶段会生成新的镜像层2.5 CMD / ENTRYPOINT容器启动命令CMD [nginx, -g, daemon off;]容器启动后执行必须是前台进程2.6 EXPOSE声明端口EXPOSE 80只是声明真正端口映射由docker run -p决定三、什么是多阶段构建重点问题背景前端构建需要Nodepnpmnode_modules很大但运行时只需要distNginx如果都打进一个镜像会非常臃肿构建阶段很重运行阶段很轻FROM node AS builder ... FROM nginx第一阶段只负责 build第二阶段只负责 run最终镜像只保留第二阶段内容四、前端项目 Dockerfile 实战(完整配置)Dockerfile是一个用来构建镜像文件的文本文件Dockerfile文件内包含了构建镜像所需的各种信息。4.1 编写 Dockerfile以Vue3 的客户端渲染为例在项目根目录下创建一个名为Dockerfile的文件并在文件中编写镜像构成的信息。# 第一阶段构建应用 # 选择一个基础镜像作为运行环境 FROM node:18-alpine AS builder # 设置工作目录 # 在镜像内切换一个工作目录后续所有的操作都是基于这个目录来的 WORKDIR /app # 把复制 package.json 和 lock 文件 复制到镜像的工作目录 COPY package*.json pnpm-lock.yaml ./ # 安装 pnpm RUN npm install -g pnpm10.7.0 # 安装依赖 RUN pnpm install --frozen-lockfile # 复制项目文件 # 将项目文件拷贝到镜像的工作目录 第一个 “.” 代表当前目录第二个 “.” 代表镜像的工作目录 COPY . . # 构建项目 RUN pnpm run build # 第二阶段运行应用 # 选择nginx服务前端项目 FROM nginx:alpine # 复制自定义 nginx 配置 # 把 本地的nginx.conf配置 复制到镜像的 nginx 配置目录 COPY nginx.conf /etc/nginx/conf.d/default.conf # 从构建阶段复制构建产物到 nginx 目录 # 把 构建阶段的 /app/dist 目录 复制到 镜像的 nginx 目录 /usr/share/nginx/html/vue3 COPY --frombuilder /app/dist /usr/share/nginx/html/vue3 # 声明对外提供服务的端口是哪个 EXPOSE 80 # 启动 nginx 服务 # 启动 nginx 服务并且保持在前台运行否则容器会立即退出 CMD [nginx, -g, daemon off;]上面用到的nginx.conf配置文件内容如下server { listen 80; server_name localhost; # 设置根目录 root /usr/share/nginx/html; # 开启 gzip 压缩 gzip on; gzip_vary on; gzip_min_length 1024; gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xmlrss application/javascript application/json; # 处理 /vue3/ 路径 location /vue3/ { alias /usr/share/nginx/html/vue3/; try_files $uri $uri/ /vue3/index.html; # 设置缓存策略 location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ { expires 1y; add_header Cache-Control public, immutable; } } # 处理根路径重定向到 /vue3/ location / { return 301 /vue3/; } # 错误页面 error_page 404 /vue3/index.html; # 健康检查端点 location /health { access_log off; return 200 healthy\n; add_header Content-Type text/plain; } }这份 Dockerfile 做了什么用 Node 构建前端得到dist静态资源用 Nginx 提供 HTTP 服务最终镜像中没有 Node / pnpm / node_modules 这是前端生产部署的标准写法4.2 构建镜像Dockerfile文件写好了可以使用 docker build 构建镜像。#使用当前目录下的 Dockerfile 构建一个名为 vue3-nginx 的 Docker 镜像的命令。dockerbuild-tvue3-nginx.PSD:\MyProjects\vue3 docker build-t vue3-nginx.[]Building 2.3s(16/16)FINISHED docker:desktop-linux [internal]load build definitionfromDockerfile 0.1s transferring dockerfile: 745B 0.0s [internal]load metadatafordocker.io/library/node:18-alpine 1.3s [internal]load metadatafordocker.io/library/nginx:alpine 1.4s [internal]load.dockerignore 0.1s transferring context: 122B 0.0s [internal]load build context 0.1s transferring context: 2.43kB 0.0s [stage-1 1/3]FROMdocker.io/library/nginx:alpinesha256:8491795299c8e739b7fcc6285d531d9812ce2666e07bd3dd8db 0.1s resolve docker.io/library/nginx:alpinesha256:8491795299c8e739b7fcc6285d531d9812ce2666e07bd3dd8db00020ad1 0.1s [builder 1/7]FROMdocker.io/library/node:18-alpinesha256:8d6421d663b4c28fd3ebc498332f249011d118945588d0a35 0.1s resolve docker.io/library/node:18-alpinesha256:8d6421d663b4c28fd3ebc498332f249011d118945588d0a35cb9bc4b8 0.1s CACHED[stage-1 2/3]COPYnginx.conf/etc/nginx/conf.d/default.conf 0.0s CACHED[builder 2/7]WORKDIR/app 0.0s CACHED[builder 3/7]COPYpackage*.json pnpm-lock.yaml./0.0s CACHED[builder 4/7]RUN npm install-g pnpm10.7.0 0.0s CACHED[builder 5/7]RUN pnpm install--frozen-lockfile 0.0s CACHED[builder 6/7]COPY..0.0s CACHED[builder 7/7]RUN pnpm run build 0.0s CACHED[stage-1 3/3]COPY--frombuilder/app/dist/usr/share/nginx/html/vue3 0.0s exporting to image 0.3s exporting layers 0.0s exporting manifest sha256:10829a6b02ed1459e7ae654ae3c25134eed4a601af256e66cca4fcfb9e14d04d 0.0s exporting config sha256:84371a30f425f37ada0766aabc55b08f2c3f649d099f262dba197efc95de19a1 0.0s exporting attestation manifest sha256:82afd6a7054e8d08bb90fbd039645bd83b05749ab571fb00e20461723ffe43de 0.1s exporting manifest list sha256:c7cefbe6161349c472c3a55979706b30fcd96eadaf6bcc60fdc5b4117a31398e 0.0s naming to docker.io/library/vue3-nginx:latest 0.0s unpacking to docker.io/library/vue3-nginx:latest 0.0s View build details: docker-desktop://dashboard/build/desktop-linux/desktop-linux/tcpllf3uo107qcencwdnv9rjz4.3 创建容器并运行# 在后台运行一个名为 vue3-nginx-container 的容器使用 vue3-nginx 镜像将容器的 80 端口映射到宿主机的 8080 端口。dockerrun-d-p8080:80--namevue3-nginx-container vue3-nginx# 创建容器并运行PSD:\MyProjects\vue3 docker run-d-p 8080:80--name vue3-nginx-container vue3-nginx bb08d4f206f54210e832d02cf274a1ae10cd65047ace7118977438ad59fe0249# 查看本地所有容器PSD:\MyProjects\vue3 dockerps-a CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES bb08d4f206f5 vue3-nginx/docker-entrypoint.…About a minute ago Up About a minute 0.0.0.0:8080-80/tcp,[::]:8080-80/tcp vue3-nginx-container 67f154e037dd yqzl-appdocker-entrypoint.s…19 hours ago Up 19 hours 0.0.0.0:3000-3000/tcp,[::]:3000-3000/tcp yqzl-app cb93546dda15 redisdocker-entrypoint.s…21 hours ago Exited(0)21 hours ago zen_turing 86cdd5f429ad redisdocker-entrypoint.s…2 weeks ago Exited(255)42 hours ago 0.0.0.0:6379-6379/tcp my-redisPSD:\MyProjects\vue3流程结束。 感谢阅读想了解更多 我的博客网站 | 记录思考分享干货 我的个人主页 | 关于我、开源项目 Dockerfile：构建 Docker 镜像
文章目录一、Dockerfile 的核心执行模型1.1 分层Layer机制1.2 镜像 ≠ 容器二、Dockerfile 常用指令讲解2.1 FROM基础镜像2.2 WORKDIR工作目录2.3 COPY / ADD拷贝文件2.4 RUN构建时执行命令2.5 CMD / ENTRYPOINT容器启动命令2.6 EXPOSE声明端口三、什么是多阶段构建重点问题背景四、前端项目 Dockerfile 实战(完整配置)4.1 编写 Dockerfile4.2 构建镜像4.3 创建容器并运行在前端工程化和部署中Dockerfile 是把“代码”变成“可运行应用”的关键文件。Dockerfile 是一份描述“如何构建 Docker 镜像”的脚本文件Docker 会从上到下逐行执行Dockerfile 中的指令最终生成一个镜像Image。一、Dockerfile 的核心执行模型1.1 分层Layer机制每一条指令都会生成一层FROM node:18-alpine RUN pnpm install RUN pnpm build上一层不变 → 下一层可复用缓存层越稳定构建越快理解缓存 写好 Dockerfile 的关键1.2 镜像 ≠ 容器概念含义Image构建好的“模版”ContainerImage 的运行实例Dockerfile → Image → Container二、Dockerfile 常用指令讲解2.1 FROM基础镜像FROM node:18-alpine一切镜像的起点alpine体积小适合生产2.2 WORKDIR工作目录WORKDIR /app类似cd /app后续指令都在这个目录执行2.3 COPY / ADD拷贝文件COPY package.json ./COPY最常用推荐ADD功能多一般不用2.4 RUN构建时执行命令RUN pnpm install发生在build 阶段会生成新的镜像层2.5 CMD / ENTRYPOINT容器启动命令CMD [nginx, -g, daemon off;]容器启动后执行必须是前台进程2.6 EXPOSE声明端口EXPOSE 80只是声明真正端口映射由docker run -p决定三、什么是多阶段构建重点问题背景前端构建需要Nodepnpmnode_modules很大但运行时只需要distNginx如果都打进一个镜像会非常臃肿构建阶段很重运行阶段很轻FROM node AS builder ... FROM nginx第一阶段只负责 build第二阶段只负责 run最终镜像只保留第二阶段内容四、前端项目 Dockerfile 实战(完整配置)Dockerfile是一个用来构建镜像文件的文本文件Dockerfile文件内包含了构建镜像所需的各种信息。4.1 编写 Dockerfile以Vue3 的客户端渲染为例在项目根目录下创建一个名为Dockerfile的文件并在文件中编写镜像构成的信息。# 第一阶段构建应用 # 选择一个基础镜像作为运行环境 FROM node:18-alpine AS builder # 设置工作目录 # 在镜像内切换一个工作目录后续所有的操作都是基于这个目录来的 WORKDIR /app # 把复制 package.json 和 lock 文件 复制到镜像的工作目录 COPY package*.json pnpm-lock.yaml ./ # 安装 pnpm RUN npm install -g pnpm10.7.0 # 安装依赖 RUN pnpm install --frozen-lockfile # 复制项目文件 # 将项目文件拷贝到镜像的工作目录 第一个 “.” 代表当前目录第二个 “.” 代表镜像的工作目录 COPY . . # 构建项目 RUN pnpm run build # 第二阶段运行应用 # 选择nginx服务前端项目 FROM nginx:alpine # 复制自定义 nginx 配置 # 把 本地的nginx.conf配置 复制到镜像的 nginx 配置目录 COPY nginx.conf /etc/nginx/conf.d/default.conf # 从构建阶段复制构建产物到 nginx 目录 # 把 构建阶段的 /app/dist 目录 复制到 镜像的 nginx 目录 /usr/share/nginx/html/vue3 COPY --frombuilder /app/dist /usr/share/nginx/html/vue3 # 声明对外提供服务的端口是哪个 EXPOSE 80 # 启动 nginx 服务 # 启动 nginx 服务并且保持在前台运行否则容器会立即退出 CMD [nginx, -g, daemon off;]上面用到的nginx.conf配置文件内容如下server { listen 80; server_name localhost; # 设置根目录 root /usr/share/nginx/html; # 开启 gzip 压缩 gzip on; gzip_vary on; gzip_min_length 1024; gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xmlrss application/javascript application/json; # 处理 /vue3/ 路径 location /vue3/ { alias /usr/share/nginx/html/vue3/; try_files $uri $uri/ /vue3/index.html; # 设置缓存策略 location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ { expires 1y; add_header Cache-Control public, immutable; } } # 处理根路径重定向到 /vue3/ location / { return 301 /vue3/; } # 错误页面 error_page 404 /vue3/index.html; # 健康检查端点 location /health { access_log off; return 200 healthy\n; add_header Content-Type text/plain; } }这份 Dockerfile 做了什么用 Node 构建前端得到dist静态资源用 Nginx 提供 HTTP 服务最终镜像中没有 Node / pnpm / node_modules 这是前端生产部署的标准写法4.2 构建镜像Dockerfile文件写好了可以使用 docker build 构建镜像。#使用当前目录下的 Dockerfile 构建一个名为 vue3-nginx 的 Docker 镜像的命令。dockerbuild-tvue3-nginx.PSD:\MyProjects\vue3 docker build-t vue3-nginx.[]Building 2.3s(16/16)FINISHED docker:desktop-linux [internal]load build definitionfromDockerfile 0.1s transferring dockerfile: 745B 0.0s [internal]load metadatafordocker.io/library/node:18-alpine 1.3s [internal]load metadatafordocker.io/library/nginx:alpine 1.4s [internal]load.dockerignore 0.1s transferring context: 122B 0.0s [internal]load build context 0.1s transferring context: 2.43kB 0.0s [stage-1 1/3]FROMdocker.io/library/nginx:alpinesha256:8491795299c8e739b7fcc6285d531d9812ce2666e07bd3dd8db 0.1s resolve docker.io/library/nginx:alpinesha256:8491795299c8e739b7fcc6285d531d9812ce2666e07bd3dd8db00020ad1 0.1s [builder 1/7]FROMdocker.io/library/node:18-alpinesha256:8d6421d663b4c28fd3ebc498332f249011d118945588d0a35 0.1s resolve docker.io/library/node:18-alpinesha256:8d6421d663b4c28fd3ebc498332f249011d118945588d0a35cb9bc4b8 0.1s CACHED[stage-1 2/3]COPYnginx.conf/etc/nginx/conf.d/default.conf 0.0s CACHED[builder 2/7]WORKDIR/app 0.0s CACHED[builder 3/7]COPYpackage*.json pnpm-lock.yaml./0.0s CACHED[builder 4/7]RUN npm install-g pnpm10.7.0 0.0s CACHED[builder 5/7]RUN pnpm install--frozen-lockfile 0.0s CACHED[builder 6/7]COPY..0.0s CACHED[builder 7/7]RUN pnpm run build 0.0s CACHED[stage-1 3/3]COPY--frombuilder/app/dist/usr/share/nginx/html/vue3 0.0s exporting to image 0.3s exporting layers 0.0s exporting manifest sha256:10829a6b02ed1459e7ae654ae3c25134eed4a601af256e66cca4fcfb9e14d04d 0.0s exporting config sha256:84371a30f425f37ada0766aabc55b08f2c3f649d099f262dba197efc95de19a1 0.0s exporting attestation manifest sha256:82afd6a7054e8d08bb90fbd039645bd83b05749ab571fb00e20461723ffe43de 0.1s exporting manifest list sha256:c7cefbe6161349c472c3a55979706b30fcd96eadaf6bcc60fdc5b4117a31398e 0.0s naming to docker.io/library/vue3-nginx:latest 0.0s unpacking to docker.io/library/vue3-nginx:latest 0.0s View build details: docker-desktop://dashboard/build/desktop-linux/desktop-linux/tcpllf3uo107qcencwdnv9rjz4.3 创建容器并运行# 在后台运行一个名为 vue3-nginx-container 的容器使用 vue3-nginx 镜像将容器的 80 端口映射到宿主机的 8080 端口。dockerrun-d-p8080:80--namevue3-nginx-container vue3-nginx# 创建容器并运行PSD:\MyProjects\vue3 docker run-d-p 8080:80--name vue3-nginx-container vue3-nginx bb08d4f206f54210e832d02cf274a1ae10cd65047ace7118977438ad59fe0249# 查看本地所有容器PSD:\MyProjects\vue3 dockerps-a CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES bb08d4f206f5 vue3-nginx/docker-entrypoint.…About a minute ago Up About a minute 0.0.0.0:8080-80/tcp,[::]:8080-80/tcp vue3-nginx-container 67f154e037dd yqzl-appdocker-entrypoint.s…19 hours ago Up 19 hours 0.0.0.0:3000-3000/tcp,[::]:3000-3000/tcp yqzl-app cb93546dda15 redisdocker-entrypoint.s…21 hours ago Exited(0)21 hours ago zen_turing 86cdd5f429ad redisdocker-entrypoint.s…2 weeks ago Exited(255)42 hours ago 0.0.0.0:6379-6379/tcp my-redisPSD:\MyProjects\vue3流程结束。 感谢阅读想了解更多 我的博客网站 | 记录思考分享干货 我的个人主页 | 关于我、开源项目