开始

我们在装有 window 操作系统的电脑上，安装好 docker desktop 之后，需要多个项目来练习 docker 的使用，已做到孰能生巧。下面是几个示例：

一、使用 docker 部署 vitepress 文档项目

1. 创建 vitepress 项目

创建一个文件夹，名称为：docker_vitepress
打开控制台，运行以下命令：
- 安装 vitepress：pnpm add -D vitepress
- 初始化 vitepress：pnpm vitepress init
- 启动 vitepress：pnpm run docs:dev
- 详细操作 👉👉👉

2. 添加 docker 相关文件

在根目录下，添加三个文件：.dockerignore、 Dockerfile、 nginx.conf。

.dockerignore 文件，用来排除不需要上传到 Docker 服务端的文件或目录。
```
node_modules
```

Dockerfile 文件，用来构建 Docker 容器镜像。

# FROM [镜像名:版本号] as [构建阶段的名称]
FROM node:20 as build-stage
# 设置后续指令的工作目录
WORKDIR /app
# COPY [源路径] [目标路径]
COPY package.json ./

RUN echo '开始安装依赖'
RUN npm install -g pnpm && pnpm install
RUN echo '依赖安装完成'

COPY . .

RUN echo '开始构建'
RUN pnpm run docs:build
RUN echo '构建完成'

FROM nginx:stable-perl as production-stage

RUN echo '拷贝构建完的 dist 目录到 nginx目录'
COPY --from=build-stage /app/docs/.vitepress/dist /usr/share/nginx/html

RUN echo '拷贝项目配置的 nignx.conf 文件内容到 nginx 的默认配置中'
COPY --from=build-stage /app/nginx.conf /etc/nginx/conf.d/default.conf

# 声明容器运行时监听的特定网络端口
EXPOSE 5001

详细说明 👉👉👉

nginx.conf 文件，用来配置 nginx 代理。

server {
    listen 5001;                                # 监听 5001 端口
    server_name localhost;

    location / {
        root /usr/share/nginx/html;
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    location = 50x.html {
        root /usr/share/nginx/html;
    }
}

3. 构建 vitepress-doc 镜像

在控制台执行命令 docker build -t vitepress-doc . 用来构建名称为 vitepress-doc 的镜像。

-t 或 --tag：这个标志用于给构建的镜像添加一个或多个标签。在这里，标签是 vitepress-doc，这意味着构建完成后，镜像将被命名为 vitepress-doc，可以在 docker images 命令中看到。
vitepress-doc：这是你为镜像选择的名称，可以理解为镜像的标识符。在 Docker 环境中，这允许你通过这个名字来引用或运行这个镜像。
.：这是 Dockerfile 的路径。点号 . 代表当前工作目录，意味着 Docker 将在当前目录下查找 Dockerfile。如果 Dockerfile 不在当前目录，你需要提供 Dockerfile 的完整路径。

4. 创建 vitepress-doc-container 容器

在控制台执行命令 docker run -itd -p 5001:5001 --name vitepress-doc-container vitepress-doc 用来创建名称为 vitepress-doc-container 的容器。

-itd:
- -i 或 --interactive: 使容器以交互模式运行，分配一个伪TTY。
- -t 或 --tty: 分配一个终端。
- -d 或 --deamon: 在后台运行容器（守护进程模式）。
-p 5001:5001:
- -p 或 --publish: 映射端口。这里将主机的 5001 端口映射到容器的 5001 端口，使得外部可以访问容器内的服务。
--name vitepress-doc-container:
- --name: 为容器指定一个名称，便于后续管理和引用。
vitepress-doc:
- 这是之前构建的镜像名称，vitepress-doc，告诉Docker使用哪个镜像来启动容器。

5. 浏览效果

打开浏览器，在导航栏输入 http://localhost:5001 就可以浏览网页了。

二、使用 docker 部署 vite + vue3 工程项目

vite + vue3 项目部署的操作和上面 vitepress 项目的部署步骤极其相似，在这里只是简单描述一些差异。

1. 创建 vite + vue3 项目

在控制台执行命令 pnpm create vite 来创建一个名为 vite-vue-three 的项目。

2. 添加 docker 相关文件

在根目录下，添加三个文件：.dockerignore、 Dockerfile、 nginx.conf。

.dockerignore 文件。
```
node_modules
.vscode
dist
```

Dockerfile 文件。

FROM node:20 as build-stage
WORKDIR /app
COPY package.json ./
RUN npm install -g pnpm && pnpm install
COPY . .
RUN pnpm run build
FROM nginx:stable-perl as production-stage
# 注意打包后的地址变化 /app/dist
COPY --from=build-stage /app/dist /usr/share/nginx/html
COPY --from=build-stage /app/nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 5002

nginx.conf 文件。

server {
    listen 5002;                                # 监听 5002 端口
    server_name localhost;
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

3. 构建 vite-vue-three 镜像

在控制台执行命令 docker build -t vite-vue-three . 用来构建名称为 vite-vue-three 的镜像。

4. 创建 vite-vue-three-container 容器

在控制台执行命令 docker run -itd -p 5002:5002 --name vite-vue-three-container vite-vue-three 用来创建名称为 vite-vue-three-container 的容器。

5. 浏览效果

打开浏览器，在导航栏输入 http://localhost:5002 就可以浏览网页了。

三、使用 docker 部署 mysql 和 redis 数据库

mysql 和 redis 是最常用的两个数据库，使用 docker 部署它们非常容易。

MySQL

首先从下载 MySQL 镜像: docker pull mysql:latest。
创建一个文件夹用来存放容器的运行数据。/docker/mysql。
创建容器：docker run -p 3306:3306 --name mysql-container -e "MYSQL_DATABASE=ay_admin_pro" -e "MYSQL_ROOT_PASSWORD=anyu1998" -v /docker/mysql:/var/lib/mysql mysql:latest
- -itd:
  - -i 或 --interactive: 使容器以交互模式运行，分配一个伪TTY。
  - -t 或 --tty: 分配一个终端。
  - -d 或 --detach: 在后台运行容器（守护进程模式）。
- -p 3306:3306:
  - -p 或 --publish: 映射端口。这里将主机的 3306 端口映射到容器的 3306 端口，使得外部可以访问容器内的服务。
- --name mysql-container:
  - --name: 为容器指定一个名称，便于后续管理和引用。
- mysql:latest:
  - 这是之前构建的镜像名称，mysql:latest，告诉 Docker 使用哪个镜像来启动容器。
- -e "MYSQL_DATABASE=ay_admin_pro" -e "MYSQL_ROOT_PASSWORD=anyu1998":
  - -e 或 --environment: 表示环境变量。
  - MYSQL_DATABASE用来指定初始化时创建的数据库的名称。
  - MYSQL_ROOT_PASSWORD 用来指定 MySQL 的 root 用户的密码。
- -v /docker/mysql:/var/lib/mysql:
  - -v 或 --volumes: 创建一个卷挂载。这意味着 MySQL 的数据将存储在主机上，即使容器被停止或删除，数据也能保持持久化。

Redis

首先从下载 Redis 镜像: docker pull redis:latest。
- 创建一个文件夹用来存放容器的运行数据。/docker/redis。
创建容器：docker run -p 6379:6379 --name redis-container -v /docker/redis:/data redis:latest
- -p 6379:6379:
  - -p 或 --publish: 映射端口。这里将主机的 6379 端口映射到容器的 6379 端口，使得外部可以访问容器内的服务。
- --name redis-container:
  - --name: 为容器指定一个名称，便于后续管理和引用。
- -v /docker/redis:/data:
  - -v 或 --volumes: 创建一个卷挂载。这意味着 Redis 的数据将存储在主机上，即使容器被停止或删除，数据也能保持持久化。

四、使用 docker 部署 nestjs 后端项目

nestjs 项目部署的操作和上面 vitepress 项目的部署步骤极其相似，在这里只是简单描述一些差异。

1. 创建 nestjs 项目

安装 nestjs 的脚手架 npm i -g @nestjs/cli
创建一个名为 docker_nestjs 的 nestjs 项目 nest new docker_nestjs
启动项目 pnpm run start:dev
详细操作 👉👉👉

2. 添加 docker 相关文件

.dockerignore 文件。
```
node_modules
.vscode
```

Dockerfile 文件。

# 使用 alpine3.19 版本的 node，体积小
FROM node:20.11.1-alpine3.19 as build-stage
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
RUN npm run build

FROM node:20.11.1-alpine3.19 as production-stage
COPY --from=build-stage /app/dist /app
COPY --from=build-stage /app/package.json /app/package.json
WORKDIR /app
RUN npm install --production
EXPOSE 3000

# 启动 nestjs 项目
CMD ["node", "/app/main.js"]

3. 构建 nest-js 镜像

在控制台执行命令 docker build -t nest-js . 用来构建名称为 nest-js 的镜像。

4. 创建 nest-js-container 容器

在控制台执行命令 docker run -itd -p 3000:3000 --name nest-js-container nest-js 用来创建名称为 nest-js-container 的容器。

5. 浏览效果

打开浏览器，在导航栏输入 http://localhost:3000 就可以浏览网页看到 Hello World!。

五、使用 docker compose 统一部署以上项目

无论是部署的是基于 vitepress 的文档项目，还是基于 vite + vue3 的工程项目，或者是基于 nestjs 的后端项目，使用 docker 部署都非常简单快捷，并且部署的操作都非常相似。

如果一个项目中我们要同时部署文档，业务，后端，数据库等不同的代码，虽说这每一个单独部署都相对很简单快捷，但是项目多了以后，就显得有点繁琐了。基于这个问题，我们可以使用 docker compose 来一键部署我们的所有代码。

以下是一键部署 vitepress、vite + vue3、nestjs、mysql、redis 所有代码的操作步骤：

1. 创建 docker-compose.yml 文件

在 nestjs 项目的跟目录中创建一个 docker-compose.yml 文件

# 指定 docker-compose 的版本，注意：要和 docker 的版本对应
version: '3.8'
    # 每个 services 都是一个 docker 容器
    services:
        # 容器的名称
        vitepress-doc-container:
            # 创建容器的镜像的名称
            image: vitepress-doc
            # 当前容器的端口号，等同于 docker 命令中的 -p 指令
            ports:
                - 5001:5001
            networks:
                - common-network
        vite-vue-three-container:
            image: vite-vue-three
            ports:
                - 5002:5002
            # 设置依赖关系。只有依赖的容器启动后，才会启动当前容器
            depends_on:
                - nest-js-container
            networks:
                - common-network
        nest-js-container:
            # 指定构建镜像上下文路径
            build:
                # 上下文路径
                context: ./
                # 指定构建镜像的 Dockerfile 文件名
                dockerfile: ./Dockerfile
            depends_on:
                - mysql-container
                - redis-container
            ports:
                - 3000:3000
            networks:
                - common-network
        mysql-container:
            image: mysql:latest
            # 一个卷挂载，等同于 docker 命令中的 -v 指令
            volumes:
                - G:/docker/mysql:/var/lib/mysql
            # 环境变量，等同于 docker 命令中的 -e 指令
            environment:
                MYSQL_DATABASE: nestjs
                MYSQL_ROOT_PASSWORD: nestjsmima
            ports:
                - 3306:3306
            networks:
                - common-network
        redis-container:
            image: redis
            volumes:
                - G:/docker/redis:/data
            ports:
                - 6379:6379
            networks:
                - common-network
    # networks 通常应用于集群服务，从而使得不同的应用程序得以在相同的网络中运行，从而解决网络隔离问题
    networks:
        common-network:
            driver: bridge

2. 运行 docker-compose

在控制台输入 docker-compose up，将 docker-compose up 运行起来。

这就是是 docker- compose 的简单使用。如果要知道详细介绍，请跳转 👉👉👉👉👉👉

使用 docker 部署前端项目

开始

一、使用 docker 部署 vitepress 文档项目

1. 创建 vitepress 项目

2. 添加 docker 相关文件

3. 构建 vitepress-doc 镜像

4. 创建 vitepress-doc-container 容器

5. 浏览效果

二、使用 docker 部署 vite + vue3 工程项目

1. 创建 vite + vue3 项目

2. 添加 docker 相关文件

3. 构建 vite-vue-three 镜像

4. 创建 vite-vue-three-container 容器

5. 浏览效果

三、使用 docker 部署 mysql 和 redis 数据库

MySQL

Redis

四、使用 docker 部署 nestjs 后端项目

1. 创建 nestjs 项目

2. 添加 docker 相关文件

3. 构建 nest-js 镜像

4. 创建 nest-js-container 容器

5. 浏览效果

五、使用 docker compose 统一部署以上项目

1. 创建 docker-compose.yml 文件

2. 运行 docker-compose

结束

使用 docker 部署前端项目

开始

一、 使用 docker 部署 vitepress 文档项目

1. 创建 vitepress 项目

2. 添加 docker 相关文件

3. 构建 vitepress-doc 镜像

4. 创建 vitepress-doc-container 容器

5. 浏览效果

二、 使用 docker 部署 vite + vue3 工程项目

1. 创建 vite + vue3 项目

2. 添加 docker 相关文件

3. 构建 vite-vue-three 镜像

4. 创建 vite-vue-three-container 容器

5. 浏览效果

三、 使用 docker 部署 mysql 和 redis 数据库

MySQL

Redis

四、 使用 docker 部署 nestjs 后端项目

1. 创建 nestjs 项目

2. 添加 docker 相关文件

3. 构建 nest-js 镜像

4. 创建 nest-js-container 容器

5. 浏览效果

五、使用 docker compose 统一部署以上项目

1. 创建 docker-compose.yml 文件

2. 运行 docker-compose

结束

一、使用 docker 部署 vitepress 文档项目

二、使用 docker 部署 vite + vue3 工程项目

三、使用 docker 部署 mysql 和 redis 数据库

四、使用 docker 部署 nestjs 后端项目