docker nginx gzip br

创建 Dockerfile 文件

Dockerfile

# 使用官方的 node 镜像作为基础镜像
# 从 node:18.0.0 镜像创建一个名为 development 的镜像
FROM node:18.0.0 AS development

# 设置维护者信息
LABEL maintainer="1454598684@qq.com"

# 设置工作目录为 /app
WORKDIR /app

# 将 package.json 和 package-lock.json 复制到容器中
COPY package*.json ./

# 安装所需的包
RUN npm install --registry=https://registry.npmmirror.com

# 将项目中的所有其他文件复制到容器中
COPY . .

# 打包构建
RUN npm run build

# 从 development 镜像创建一个名为 build 的镜像
FROM development AS build

# 从 nginx:1.21.6 镜像创建一个镜像
FROM nginx:1.21.6

# 从 build 镜像中复制 nginx 配置文件到容器中的 /etc/nginx/conf.d/default.conf
COPY --from=build /app/nginx.conf /etc/nginx/conf.d/default.conf

# 设置工作目录为 /usr/share/nginx/html
WORKDIR /usr/share/nginx/html

# 删除该目录中的所有内容
RUN rm -rf ./*

# 从 build 镜像中复制项目文件到容器中的 /usr/share/nginx/html 目录
COPY --from=build /app/dist .

# 设置容器的入口点，运行 nginx 命令
ENTRYPOINT ["nginx", "-g", "daemon off;"]

# 此 Dockerfile 使用了多阶段构建，先在开发环境中构建项目，再在生产环境中运行项目。
# 这样可以保证镜像的小尺寸，同时避免了在生产环境中安装多余的工具。

创建 nginx.conf

nginx

server {
  listen 80; # 监听80端口
  location / {
    # 设置缓存控制头，禁止缓存
    add_header Cache-Control no-cache;
    # 前端代码所在路径
    root /usr/share/nginx/html;
    # 首页文件名称
    index index.html index.htm;
    # 尝试寻找文件，如果不存在则返回/index.html
    try_files $uri $uri/ /index.html;
  }

  # 设置500、502、503、504错误的页面文件
  error_page 500 502 503 504 /50x.html;
  location = /50x.html {
    root /usr/share/nginx/html;
  }
}

fix bug

nginx

# 事件模块配置块，此处为空，即使用默认的事件模块配置。
events {
}

http {
  server {
    listen 80; # 监听80端口，这是HTTP的默认端口。

    # 引入mime类型的配置文件，这个文件定义了不同文件扩展名对应的MIME类型。
    include /etc/nginx/mime.types;

    location / {
      etag on; # 开启ETag
      if_modified_since exact; # 开启Last-Modified/If-Modified-Since机制
      # no-cache 告诉浏览器不要直接使用缓存的数据，而是先向服务器确认
      add_header Cache-Control no-cache;
      # 设置该位置块的根目录，即服务器上静态文件的存储路径。
      root /usr/share/nginx/html;
      # 设置默认首页文件名，如果URL指向一个目录，则首先尝试返回目录中的这些文件。
      index index.html index.htm;
      # 尝试按顺序返回请求的URI、URI对应的目录或/index.html文件，如果这些都找不到，最终返回/index.html。
      try_files $uri $uri/ /index.html;
    }

    error_page 500 502 503 504 /50x.html; # 定义HTTP 500、502、503、504错误的处理页面为/50x.html。
    location = /50x.html {
      root /usr/share/nginx/html; # 设置错误页面的根目录，与location /中设置的相同。
    }
  }
}

构建部署

构建一个名为 vue3-gzip-br:latest 的 Docker 镜像

bash

docker build -t vue3-gzip-br:latest .

列出所有本地的 Docker 镜像，等同于 docker image list 命令

bash

docker images

使用名为 vue3-gzip-br:latest 的镜像创建并后台运行一个名为 vue3-container 的容器，将容器的 80 端口映射到宿主机的 8080 端口

bash

docker run -d -p 8080:80 --name vue3-container vue3-gzip-br:latest

停止名为 vue3-container 的运行中的 Docker 容器

bash

docker stop vue3-container

列出所有容器，包括未运行的

bash

docker ps -a

删除名为 vue3-container 的 Docker 容器

bash

docker rm vue3-container

再次列出所有容器，可用于验证是否成功删除了 vue3-container 容器

bash

docker ps -a

命令执行日志：

powershell

PS C:\Users\Administrator\Desktop\vue3-gzip-br> docker build -t vue3-gzip-br:latest .
[+] Building 2.3s (17/17) FINISHED                                                                                                                  docker:default
 => [internal] load build definition from Dockerfile                                                                                                          0.0s
 => => transferring dockerfile: 1.46kB                                                                                                                        0.0s
 => [internal] load metadata for docker.io/library/nginx:1.21.6                                                                                               2.1s
 => [internal] load metadata for docker.io/library/node:18.0.0                                                                                                1.9s
 => [internal] load .dockerignore                                                                                                                             0.0s
 => => transferring context: 2B                                                                                                                               0.0s
 => [development 1/6] FROM docker.io/library/node:18.0.0@sha256:e5b7b349d517159246070bf14242027a9e220ffa8bd98a67ba1495d969c06c01                              0.0s
 => [stage-2 1/5] FROM docker.io/library/nginx:1.21.6@sha256:2bcabc23b45489fb0885d69a06ba1d648aeda973fae7bb981bafbb884165e514                                 0.0s
 => [internal] load build context                                                                                                                             0.1s
 => => transferring context: 451.92kB                                                                                                                         0.1s
 => CACHED [development 2/6] WORKDIR /app                                                                                                                     0.0s
 => CACHED [development 3/6] COPY package*.json ./                                                                                                            0.0s
 => CACHED [development 4/6] RUN npm install --registry=https://registry.npmmirror.com                                                                        0.0s
 => CACHED [development 5/6] COPY . .                                                                                                                         0.0s
 => CACHED [development 6/6] RUN npm run build                                                                                                                0.0s
 => CACHED [stage-2 2/5] COPY --from=build /app/nginx.conf /etc/nginx/conf.d/default.conf                                                                     0.0s
 => CACHED [stage-2 3/5] WORKDIR /usr/share/nginx/html                                                                                                        0.0s
 => CACHED [stage-2 4/5] RUN rm -rf ./*                                                                                                                       0.0s
 => CACHED [stage-2 5/5] COPY --from=build /app/dist .                                                                                                        0.0s
 => exporting to image                                                                                                                                        0.0s
 => => exporting layers                                                                                                                                       0.0s
 => => writing image sha256:6d9ad399df6d9db52b959517708bc5a209613ad6baf5c1087cdfa48cb4024648                                                                  0.0s
 => => naming to docker.io/library/vue3-gzip-br:latest                                                                                                        0.0s

View build details: docker-desktop://dashboard/build/default/default/q1tjphcyr3g2rgqemz0k3c9mc

What's Next?
  1. Sign in to your Docker account → docker login
  2. View a summary of image vulnerabilities and recommendations → docker scout quickview
PS C:\Users\Administrator\Desktop\vue3-gzip-br> docker run -d -p 8080:80 --name vue3-container vue3-gzip-br:latest
2bf4ca2362efe89b02488200d436a4f6e0ea67f1635c1df5b5e1550edfc99110
PS C:\Users\Administrator\Desktop\vue3-gzip-br> docker ps -a
CONTAINER ID   IMAGE                 COMMAND                   CREATED         STATUS        PORTS                  NAMES
2bf4ca2362ef   vue3-gzip-br:latest   "nginx -g 'daemon of…"   2 seconds ago   Up 1 second   0.0.0.0:8080->80/tcp   vue3-container
PS C:\Users\Administrator\Desktop\vue3-gzip-br>

powershell

PS C:\Users\Administrator\Desktop\vue3-gzip-br> docker stop vue3-container
vue3-container
PS C:\Users\Administrator\Desktop\vue3-gzip-br> docker ps -a
CONTAINER ID   IMAGE                 COMMAND                   CREATED         STATUS                     PORTS     NAMES
2bf4ca2362ef   vue3-gzip-br:latest   "nginx -g 'daemon of…"   2 minutes ago   Exited (0) 4 seconds ago             vue3-container
PS C:\Users\Administrator\Desktop\vue3-gzip-br> docker rm vue3-container
vue3-container
PS C:\Users\Administrator\Desktop\vue3-gzip-br> docker ps -a
CONTAINER ID   IMAGE     COMMAND   CREATED   STATUS    PORTS     NAMES
PS C:\Users\Administrator\Desktop\vue3-gzip-br>

配置 gzip 压缩

nginx

server {
  listen 80; # 监听80端口
  location / {

    # 为了向后兼容不支持gzip的客户端，保留gzip on
    gzip on; # 保持gzip压缩开启，为了支持不支持Brotli的客户端

    # 启用gzip_static，优先发送预压缩的.gz文件（如果存在）
    gzip_static on; # 如果有.gz版本的文件存在，无需实时压缩，直接发送这个预压缩文件

    # 配置gzip压缩的最小文件大小，避免压缩太小的文件
    gzip_min_length 256; # 设置gzip压缩的最小文件大小为256字节，小于这个大小的文件不进行压缩

    # 配置压缩的类型，根据需要进行添加
    # 定义哪些内容类型（MIME类型）应该被gzip压缩，类似于Brotli的设置，但这是针对gzip的
    gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css application/xml image/svg+xml;

    # 设置缓存控制头，禁止缓存
    add_header Cache-Control no-cache;
    # 前端代码所在路径
    root /usr/share/nginx/html;
    # 首页文件名称
    index index.html index.htm;
    # 尝试寻找文件，如果不存在则返回/index.html
    try_files $uri $uri/ /index.html;
  }

  # 设置500、502、503、504错误的页面文件
  error_page 500 502 503 504 /50x.html;
  location = /50x.html {
    root /usr/share/nginx/html;
  }
}

构建部署

构建一个名为 vue3-gzip-br:latest 的 Docker 镜像

bash

docker build -t vue3-gzip-br:1.0.1 .

列出所有本地的 Docker 镜像，等同于 docker image list 命令

bash

docker images

使用名为 vue3-gzip-br:latest 的镜像创建并后台运行一个名为 vue3-container 的容器，将容器的 80 端口映射到宿主机的 8080 端口

bash

docker run -d -p 8080:80 --name vue3-container vue3-gzip-br:1.0.1

列出所有容器，包括未运行的

bash

docker ps -a

强制删除名为 vue3-container 的 Docker 容器，即使容器正在运行也会被停止并删除

bash

docker rm -f vue3-container

列出所有容器，包括未运行的

bash

docker ps -a

配置 brotli 压缩

修改 Dockerfile nginx:1.21.6 镜像改为 michaelknightdriver/docker-nginx-brotli 配置

dockerfile

# 使用官方的 node 镜像作为基础镜像
# 从 node:18.0.0 镜像创建一个名为 development 的镜像
FROM node:18.0.0 AS development

# 设置维护者信息
LABEL maintainer="1454598684@qq.com"

# 设置工作目录为 /app
WORKDIR /app

# 将 package.json 和 package-lock.json 复制到容器中
COPY package*.json ./

# 安装所需的包
# RUN npm install --registry=https://registry.npmmirror.com
RUN npm install --registry=https://registry.npmmirror.com

# 将项目中的所有其他文件复制到容器中
COPY . .

# 打包构建
RUN npm run build

# 从 development 镜像创建一个名为 build 的镜像
FROM development AS build

# 从 nginx:1.21.6 镜像创建一个镜像
# FROM nginx:1.21.6
# 基于 docker-nginx-brotli 镜像
FROM michaelknightdriver/docker-nginx-brotli

# 从 build 镜像中复制 nginx 配置文件到容器中的 /etc/nginx/conf.d/default.conf
COPY --from=build /app/nginx.conf /etc/nginx/conf.d/default.conf

# 设置工作目录为 /usr/share/nginx/html
WORKDIR /usr/share/nginx/html

# 删除该目录中的所有内容
RUN rm -rf ./*

# 从 build 镜像中复制项目文件到容器中的 /usr/share/nginx/html 目录
COPY --from=build /app/dist .

# 设置容器的入口点，运行 nginx 命令
ENTRYPOINT ["nginx", "-g", "daemon off;"]

# 此 Dockerfile 使用了多阶段构建，先在开发环境中构建项目，再在生产环境中运行项目。
# 这样可以保证镜像的小尺寸，同时避免了在生产环境中安装多余的工具。

修改 nginx.conf

nginx

server {
  listen 80; # 监听80端口
  location / {
    # Brotli设置
    brotli on; # 开启Brotli压缩，Brotli是一种比Gzip更高效的压缩格式

    brotli_static on; # 开启静态Brotli压缩，如果预压缩的.br文件存在，就直接发送这个文件

    brotli_comp_level 6; # 设置Brotli压缩级别，数值范围从0（无压缩）到11（最大压缩），6是一个中等的压缩级别

    # 定义哪些内容类型（MIME类型）应该被Brotli压缩，可以根据实际需要来调整包含的类型
    brotli_types text/plain text/css application/javascript application/json image/svg+xml application/xml+rss;

    # 为了向后兼容不支持gzip的客户端，保留gzip on
    gzip on; # 保持gzip压缩开启，为了支持不支持Brotli的客户端

    # 启用gzip_static，优先发送预压缩的.gz文件（如果存在）
    gzip_static on; # 如果有.gz版本的文件存在，无需实时压缩，直接发送这个预压缩文件

    # 配置gzip压缩的最小文件大小，避免压缩太小的文件
    gzip_min_length 256; # 设置gzip压缩的最小文件大小为256字节，小于这个大小的文件不进行压缩

    # 配置压缩的类型，根据需要进行添加
    # 定义哪些内容类型（MIME类型）应该被gzip压缩，类似于Brotli的设置，但这是针对gzip的
    gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css application/xml image/svg+xml;

    # 设置缓存控制头，禁止缓存
    add_header Cache-Control no-cache;
    # 前端代码所在路径
    root /usr/share/nginx/html;
    # 首页文件名称
    index index.html index.htm;
    # 尝试寻找文件，如果不存在则返回/index.html
    try_files $uri $uri/ /index.html;
  }

  # 设置500、502、503、504错误的页面文件
  error_page 500 502 503 504 /50x.html;
  location = /50x.html {
    root /usr/share/nginx/html;
  }
}

创建 docker compose 文件

创建 docker-compose.yml 文件，用于定义和运行一个多容器的 Docker 应用。
运行 Nginx 服务的容器，这个 docker-compose.yml 文件将使用你的 Dockerfile 来构建并部署服务。

yaml

version: "3.8"

services:
  nginx:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "80:80" # 将容器的80端口映射到主机的80端口
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf:ro # 将本地的nginx配置文件映射到容器中
    restart: always # 如果容器停止，总是尝试重启容器

文件说明：

version: 指定 docker-compose 文件的版本，这里使用 3.8 是比较新的支持的版本，能确保兼容当前的 Docker 版本。
services: 定义需要运行的服务容器。在这里我们定义了一个名为 nginx 的服务。
build: 指定如何构建这个服务的镜像。
- context: 指定构建上下文路径，这里是当前目录。
- dockerfile: 指定使用的 Dockerfile 文件。
ports: 将容器内的端口映射到宿主机的端口上，这里把容器的 80 端口映射到了宿主机的 80 端口。
volumes: 指定卷的挂载点，这里将本地的 nginx.conf 文件挂载到容器内的 /etc/nginx/nginx.conf。
restart: 设置容器的重启策略为 always，意味着如果容器退出，Docker 将自动尝试重启它。

确保在运行 docker-compose up 命令之前，你的项目目录结构正确，且 Dockerfile 与 nginx.conf 都位于正确的路径。这样，Docker Compose 将能够正确构建和运行你的服务。

`- ./nginx.conf:/etc/nginx/nginx.conf:ro`这个命令的 `:ro` 是什么意思

在 Docker 和 Docker Compose 的卷映射中，ro 表示 "read-only"（只读）。

当你在 volumes 配置中使用 :ro 时，这意味着你将该文件或目录以只读方式挂载到容器中。

容器内的进程无法修改挂载的文件或目录的内容，这有助于保护宿主机上的文件不被容器意外修改或损坏。

例如，在你的 docker-compose.yml 文件中的这一行：

yaml

- ./nginx.conf:/etc/nginx/nginx.conf:ro # 将本地的nginx配置文件映射到容器中

这表示 nginx.conf 文件从宿主机（当前目录下的 nginx.conf）被挂载到容器的 /etc/nginx/nginx.conf 路径，并且在容器内是只读的。

这通常用于配置文件，因为配置文件通常不需要在运行时被修改。

docker compose 构建部署

这些都是 Docker Compose 命令，用于管理和运行定义在 docker-compose.yml 文件中的多容器应用。

docker compose build

构建或重新构建在 docker-compose.yml 文件中定义的服务。

bash

docker compose build

这将根据 Dockerfile 和服务定义的配置重新构建服务镜像。

docker compose up

创建并启动在 docker-compose.yml 文件中定义的所有服务。

bash

docker compose up

如果镜像尚未构建，此命令还会自动构建镜像。

docker compose up -d

创建并以后台模式启动在 docker-compose.yml 文件中定义的服务。

bash

docker compose up -d

这允许容器在后台运行，而不会占用命令行界面。

docker compose down

停止并移除由 docker-compose.yml 文件定义的所有容器和网络。

bash

docker compose down

这不会移除已经构建的镜像。

docker compose up --build -d

先构建镜像，然后以后台模式启动在 docker-compose.yml 文件中定义的服务。

bash

docker compose up --build -d

这个命令结合了重新构建镜像和后台启动容器的功能，适用于需要更新和后台运行服务的场景。

docker compose -f custom-docker-compose.yml build

使用 -f 选项来指定一个自定义的 docker-compose 文件路径，然后构建在该文件中定义的服务。

bash

docker compose -f custom-docker-compose.yml build

这适用于项目中有多个 compose 文件的场景。

docker compose -f custom-docker-compose.yml up --build -d

使用 -f 选项来指定一个自定义的 docker-compose 文件路径，先构建镜像，然后以后台模式启动在该文件中定义的服务。

bash

docker compose -f custom-docker-compose.yml up --build -d

快速实践指南

入门指南

基础知识

构建镜像

Node.js

Java

Dockerfile最佳实践

直播讲解 docker + nginx

咨询/接单/bug修复/学习交流群

docker nginx gzip br ​

创建 Dockerfile 文件 ​

创建 nginx.conf ​

构建部署 ​

配置 gzip 压缩 ​

构建部署 ​

配置 brotli 压缩 ​

创建 docker compose 文件 ​

文件说明： ​

- ./nginx.conf:/etc/nginx/nginx.conf:ro这个命令的 :ro 是什么意思 ​

docker compose 构建部署 ​

docker compose build ​

docker compose up ​

docker compose up -d ​

docker compose down ​

docker compose up --build -d ​

docker compose -f custom-docker-compose.yml build ​

docker compose -f custom-docker-compose.yml up --build -d ​

docker nginx gzip br

创建 Dockerfile 文件

创建 nginx.conf

构建部署

配置 gzip 压缩

构建部署

配置 brotli 压缩

创建 docker compose 文件

文件说明：

`- ./nginx.conf:/etc/nginx/nginx.conf:ro`这个命令的 `:ro` 是什么意思

docker compose 构建部署

docker compose build

docker compose up

docker compose up -d

docker compose down

docker compose up --build -d

docker compose -f custom-docker-compose.yml build

docker compose -f custom-docker-compose.yml up --build -d