开始
我们在装有 window 操作系统的电脑上,安装好 docker desktop 之后,需要多个项目来练习 docker 的使用,已做到孰能生巧。下面是几个示例:
一、 使用 docker 部署 vitepress 文档项目
1. 创建 vitepress 项目
- 创建一个文件夹,名称为:docker_vitepress
- 打开控制台,运行以下命令:
- 安装 vitepress:
pnpm add -D vitepress
- 初始化 vitepress:
pnpm vitepress init
- 启动 vitepress:
pnpm run docs:dev
- 详细操作 👉👉👉
- 安装 vitepress:
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 的简单使用。如果要知道详细介绍,请跳转 👉👉👉👉👉👉