Docker笔记 - 前端项目封装镜像(二)

凉拌西红柿
4 阅读4分钟

前置准备

  • 安装好的Docker环境
  • 编译完成的前端静态文件

1. 编写Nginx配置文件

(使用最方便的Nginx作为web服务器,使后续镜像文件运行即用)

新建一个文件夹(比如叫frontend-docker),把编译完成的静态文件(比如dist)复制到这个新文件夹里. 在frontend-docker文件夹里新建一个文件,命名为nginx.conf(无后缀).内容如下(直接复制即可)

# Nginx的基础配置 
server {
	 # 监听80端口（Docker容器内的端口） 
	 listen 80; 
	 # 服务器域名（新手不用改） 
	 server_name localhost; 
	 # 字符编码设置，避免中文乱码 
	 charset utf-8;
	  # 静态文件的根目录（对应容器内的路径，后面会映射） 
	  root /usr/share/nginx/html; 
	  # 默认首页 
	  index index.html index.htm; 
	  # 解决前端路由（如Vue/React的history模式）刷新404的问题 
	  location / { 
		  try_files $uri $uri/ /index.html; 
	}
	 # 缓存静态资源，提升访问速度 
	 location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ { 
		 expires 30d; 
		 add_header Cache-Control "public, max-age=2592000"; 
	}
 }

这个配置告诉Nginx用80端口提供服务,静态文件放在/user/share/nginx/html目录,刷新页面时优先查找index.html,静态资源缓存30天.

2. 编写 Dockerfile

在frontend-docker文件夹里新建一个文件,命名为Dockerfile(无后缀,首字母大写),内容如下:

# 基础镜像：官方的Nginx镜像（alpine版本体积小，适合生产环境） 
FROM nginx:alpine 
# 作者信息（可选，新手可删） 
LABEL maintainer="your-name <your-email@example.com>" 
# 删除Nginx默认的配置文件 
RUN rm /etc/nginx/conf.d/default.conf 
# 将我们自己写的nginx.conf复制到容器内的Nginx配置目录 
COPY nginx.conf /etc/nginx/conf.d/default.conf 
# 将前端静态文件（dist文件夹）复制到容器内Nginx的默认静态文件目录 
COPY dist/ /usr/share/nginx/html/ 
# 暴露80端口（告诉Docker这个容器要用到80端口，仅声明，不映射） 
EXPOSE 80 
# 容器启动时自动启动Nginx（前台运行，避免容器启动后退出） 
CMD ["nginx", "-g", "daemon off;"]

解释:

  • FROM nginx:alpine：基于官方的 Nginx 轻量版镜像构建我们的镜像；
  • RUN rm ...：删除 Nginx 默认的配置，避免和我们的配置冲突；
  • COPY nginx.conf ...：把本地的 nginx.conf 复制到容器里；
  • COPY dist/ ...：把本地的 dist 文件夹复制到容器内 Nginx 的静态文件目录；
  • EXPOSE 80：声明容器用 80 端口；
  • CMD [...]：容器启动时执行的命令，让 Nginx 前台运行（新手记住：这行是必须的，否则容器会启动后立刻退出）。

3. 构建 Docker 镜像

  1. 打开终端 / 命令提示符,进入frontend-docker文件夹
  2. 执行构建命令
docker build -t my-frontend:v1.0 .

解释:

  • docker build：构建镜像的核心命令；
  • -t my-frontend:v1.0：给镜像打标签（my-frontend是镜像名，v1.0是版本号，新手可以随便命名，比如 my-web:1.0）；
  • .：表示 Dockerfile 所在的目录（当前目录），这个点千万不能漏。

4. 测试运行镜像

构建成功后,运行容器验证:

docker run -d -p 8080:80 --name my-web-container my-frontend:v1.0

解释:

  • docker run：运行容器的命令；
  • -d：后台运行容器（不占用终端）；
  • -p 8080:80：端口映射（把主机的 8080 端口映射到容器的 80 端口）；
  • --name my-web-container：给容器命名（方便管理）；
  • my-frontend:v1.0：要运行的镜像名 + 版本。

运行成功后,打开浏览器访问http://localhost:8080即可访问.

5. 管理镜像

5.1 给镜像重命名/打新标签(比如发布新版本)

# 格式：docker tag 原镜像名:原标签 新镜像名:新标签 
docker tag my-frontend:v1.0 my-frontend:latest 
docker tag my-frontend:v1.0 my-name/my-frontend:v1.0 # 加仓库前缀（用于推送）

用途: 比如latest标签通常标识最新版本,方便别人使用时不用记版本号.

5.2 保存镜像为文件(导出,方便拷贝)

# 格式：docker save -o 保存的文件名.tar 镜像名:标签 
docker save -o my-frontend-v1.0.tar my-frontend:v1.0

执行后会在当前目录生成一个.tar格式的镜像文件.

5.3 加载本地镜像文件(导入 .tar文件)

# 格式：docker load -i 镜像文件名.tar 
docker load -i my-frontend-v1.0.tar

执行后,这个镜像会被导入到本地Docker镜像库,可直接运行.

5.4 推送镜像到远程仓库

# 1. 登录仓库（以Docker Hub为例） 
docker login 
# 2. 推送镜像（镜像名必须包含仓库用户名） 
docker push my-name/my-frontend:v1.0

6. 使用镜像

6.1 使用镜像文件(.tar)

  • 将.tar文件复制到新环境的任意目录
  • 打开终端,进入该目录,执行加载命令
docker load -i 对方提供的镜像文件名.tar
  • 查看加载和的镜像
docker images
  • 运行镜像
# 替换成实际的镜像名和标签 
docker run -d -p 8080:80 --name frontend-container 镜像名:标签
  • 访问http://localhost:8080网址

6.2 使用镜像仓库地址

  • 直接拉取镜像(Docker会自动从仓库下载)
# 替换成实际的仓库地址 
docker pull docker.io/xxx/frontend:v1.0
  • 运行镜像
docker run -d -p 8080:80 --name frontend-container docker.io/xxx/frontend:v1.0

额外操作:停止/重启容器

# 停止容器 
docker stop frontend-container 
# 重启容器 
docker restart frontend-container 

# 查看容器运行状态 
docker ps # 查看运行中的容器 
docker ps -a # 查看所有容器（包括停止的）
avatar
文章
阅读
粉丝