使用 docker 部署前端项目

349 阅读9分钟

开始

我们在装有 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 相关文件

在根目录下,添加三个文件:.dockerignoreDockerfilenginx.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 的简单使用。如果要知道详细介绍,请跳转 👉👉👉👉👉👉

结束