day55-Dockerfile自定义镜像

✅Dockerfile概述

  • 应用场景:通过一个Dockerfile,生成自定义镜像

  • 为什么要使用Dockerfile

    • 我们目前都是手动拉取镜像,手动进行配置,手动安装依赖,手动编译安装,创建用户…
    • 手动配置步骤繁琐,不方便重复执行
    • 书写Dockerfile把之前手动创建自定义镜像的过程,通过Dockerfile里面的指令实现,类似playbook
  • Dockerfile根据要求自动创建镜像

✅常见 Dockerfile 指令说明

指令说明
FROM指定基础镜像(比如 Python、Node.js、Ubuntu 等)
WORKDIR设置工作目录(后续命令都在这个目录下执行)
VOLUME告诉使用者数据卷挂载到哪个目录
COPY将本地文件复制到镜像中(不支持解压)
ADD类似 COPY,但支持解压文件等高级功能(推荐优先用 COPY)
RUN构建镜像时执行的命令
CMD容器启动时默认执行的命令(可以被运行时覆盖)
ENTRYPOINT容器启动时执行的命令(不会轻易被覆盖)
EXPOSE声明容器运行时监听的端口
ENV设置环境变量
ARG构建参数(只在构建时使用)

✅自定义小鸟飞飞镜像

🧩准备站点代码和配置文件

server {
  listen 80;
  server_name bird.zhubl.xyz;
  root /app/code/bird/;
  location / {
    index index.html;
  }
  location ~* \.(html|js|css)$ {
    expires 1d;
  }
  location ~* \.(jpg|jpeg|bmp|gif|png)$ {
    expires max;
  }
}

📝书写Dockerfile文件

vim Dockerfile
FROM nginx:1.24
LABEL author=zhu desc="custom bird image"
RUN mkdir -p /app/code/bird/
ADD bird.tar.gz /app/code/bird/
ADD default /etc/nginx/conf.d/
EXPOSE 80 443
CMD ["nginx","g","daemon;"]
  • 说明
#指定基础镜像
FROM nginx:1.24
#基本信息
LABEL author=zhu desc="custom bird image"

#对镜像进行操作,执行命令
RUN mkdir -p /app/code/bird/

#添加本地文件到镜像中
ADD bird.tar.gz /app/code/bird/
ADD default /etc/nginx/conf.d/

#告诉镜像使用者映射的端口是80 443端口
EXPOSE 80 443

#入口指令(运行容器后默认运行下面的命令)
CMD ["nginx","g","daemon;"]

🌟生成镜像

docker build -t web:bird_v3 .

.   表示Dockerfile在当前目录下
-t  表示给自定义镜像命名

☀️运行容器

docker run -d --name bird_v2 -p 80:80 -p 443:443 --restart always web:bird_v2

🌏浏览器访问

http://10.0.0.81:80

✅Dockerfile相关故障

  • 1️⃣dockerfile书写问题
  • 2️⃣docker run 看容器运行状态
  • 3️⃣docker logs 容器名字,看logs日志
  • 4️⃣docker run -itd --name 容器名字 -p 80:80 web:bird_v2 /bin/bash替换掉CMD指定的命令
  • 5️⃣docker exec -it 容器名字 /bin/bash 进入容器,执行检查类命令(nginxt -t/php-fpm -t)检查配置文件
  • 6️⃣执行nginx -g ‘daemon off;’ 看运行状态和提示

✅Dockerfile变量

  • Dockerfile使用ENV变量
FROM nginx:1.24
LABEL author=zhu desc="custom bird image"
ENV CODE_DIR=/app/code/bird/
ENV CODE_NAME bird.tar.gz
WORKDIR ${CODE_DIR}
RUN mkdir -p ${CODE_DIR}
ADD ${CODE_NAME} ${CODE_DIR}
ADD default.conf /etc/nginx/conf.d/
EXPOSE 80 443
CMD ["nginx","-g","daemon off;"]
  • 生成镜像
docker build -t web:bird_v3 .

  • 进入容器时自动到工作目录
docker exec -it bird_v3 /bin/bash

✅面试题:CMD,ENTRYPOINT区别

  • 1️⃣CMD或ENTRYPOINT 二选一,选择1个使用
  • 2️⃣CMD和ENTRYPOINT 一起使用
CMD和ENTRYPOINT区别共同点区别
CMD运行容器的时候默认运行CMD或ENTRYPOINT后面的命令运行容器的时候如果指定了命令,则CMD的内容就会被替换
ENTRYPOINT运行容器的时候默认运行CMD或ENTRYPOINT后面的命令运行容器的时候如果指定了命令,则entrypoint+指定的命令
自定义镜像
FROM test:1.1
CMD ls

运行容器
docker run -d test:1.1 sleep 99
CMD指定的ls命令就会被替换为sleep 99
sleep 99

自定义镜像
FROM test:1.1
ENTRYPOINT ls

运行容器
docker run -d test:1.1 sleep 99
ENTRYPOINT指定的ls命令添加sleep 99参数
ls sleep 99
  • 同时使用ENTRYPOINT和CMD
  • CMD写的内容作为ENTRYPOINT内容的选项(参数)
FROM nginx:1.24
ENTRYPOINT ["nginx"]
CMD ["-g","daemon off;"]

✅自定义zrlog镜像(war包)

  • 自定义镜像方案01:系统镜像+jdk+tomcat

  • 自定义镜像方案02:tomcat镜像+war包

  • 1️⃣编写Dockerfile文件

FROM tomcat:9.0-jdk8
LABEL auth=zhu desc='zrlog docker image'

ENV CODE_NAME ROOT.war

WORKDIR /usr/local/tomcat/webapps/
ADD ${CODE_NAME} .

EXPOSE 8080

CMD ["catalina.sh", "run"]

# 监控业务是否正常
HEALTHCHECK --interval=5s --timeout=20s --retries=2 CMD curl 127.0.0.1:8080
  • 2️⃣生成zrlog镜像
docker build -t web:zrlog_v1 .

  • 3️⃣运行zrlog
docker run -d --name zrlog -p 8080:8080 --restart always web:zrlog_v1

  • 4️⃣浏览器访问
http://10.0.0.81:8080

### 使用 Element Plus 实现自定义日历功能 Element Plus 提供了一个灵活的日历组件 `el-calendar`,可以通过其插槽和事件机制实现高度定制化的功能。以下是基于 Vue 3 和 `<script setup>` 的方式实现的一个完整的自定义日历示例。 #### 自定义日历的功能需求 1. **打点效果**:在特定日期上显示标记。 2. **动态渲染单元格内容**:根据业务逻辑,在日历的每一天展示不同的信息或样式。 3. **交互支持**:允许用户点击某一天触发回调函数并执行操作。 --- #### 示例代码 以下是一个完整的实现: ```vue <template> <div class="calendar-container"> <h1>自定义日历</h1> <el-calendar v-model="currentDate"> <!-- 插槽用于自定义每日单元格 --> <template #dateCell="{ data }"> <div :class="['custom-day', { isSpecial: isSpecialDay(data.day) }]"> {{ data.day.split(' ')[0] }} <span v-if="isSpecialDay(data.day)" class="dot">●</span> </div> </template> </el-calendar> </div> </div> </template> <script setup> import { ref } from 'vue'; // 当前选中的日期 const currentDate = ref(new Date()); // 定义特殊日期数组 (可以根据实际需求调整) const specialDays = ['2023-09-01', '2023-09-15', '2023-09-28']; // 判断当前日期是否为特殊日期 function isSpecialDay(dayString) { const date = dayString.split(' ')[0]; // 去掉时间部分 return specialDays.includes(date); } </script> <style scoped> .calendar-container { padding: 20px; } .custom-day.isSpecial { color: red; /* 特殊日期的文字颜色 */ } .dot { display: block; margin-top: 5px; text-align: center; color: blue; /* 打点的颜色 */ } </style> ``` --- #### 功能解析 1. **绑定模型值** - 使用 `v-model` 将日历组件与变量 `currentDate` 进行双向绑定[^1]。这使得我们可以实时获取用户选择的日期。 2. **自定义单元格内容** - 通过 `#dateCell` 插槽,可以完全控制每一日的显示内容。在此处实现了简单的“打点”效果,并根据不同条件应用了额外的 CSS 类名。 3. **样式增强** - 对于特殊的日期(如节日、活动日),赋予独特的视觉风格,比如改变文字颜色或者添加一个小圆点作为标记。 4. **扩展能力** - 如果需要进一步扩展功能,例如点击某个日期弹出详情对话框,则可以在模板中监听原生 DOM 事件或将整个插槽替换为更复杂的结构。 --- #### 注意事项 当遇到某些复杂场景时,可能还需要注意以下几个方面: - 下拉框或其他浮层类组件可能会因为滚动条等原因导致位置偏移问题[^3]。此时可通过手动调整 z-index 或者引入第三方工具库解决。 - 若希望集成更多图标资源,可参照官方文档配置 Icon 组件[^4]。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

朱包林

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值