Docker如何部署前端项目

来自:网络
时间:2024-09-10
阅读:

基础概念

什么是 Docker?

Docker如何部署前端项目

Docker 是一个用于开发、交付和运行应用程序的开源平台。它利用容器技术,只隔离应用程序的运行时环境但容器之间可以共享同一个操作系统,可以将应用程序及其依赖项打包到一个可移植的容器中,然后发布到任何支持 Docker 的环境中运行,无论是开发人员的个人笔记本电脑、数据中心的虚拟机,还是云服务提供商的主机上。可以理解成一个更轻量级的 虚拟机 并且使用的是本机的操作系统。

以下是 Docker 的一些基础概念:

  • 容器(Container):容器是一个轻量级、独立、可执行的软件包,包含应用程序及其所有依赖项(如代码、运行时、系统工具、库等)。容器化应用程序与其环境相互隔离,但又共享主机的操作系统内核,因此它们更加高效、可移植和可靠。
  • 镜像(Image):镜像是容器的基础,它是一个只读的模板,包含了运行容器所需的所有信息,包括文件系统、运行时、环境变量和程序配置等。可以通过 Dockerfile 来定义镜像的构建过程,也可以从 Docker Hub 或其他镜像仓库中获取现成的镜像。
  • Dockerfile:Dockerfile 是一个文本文件,用于定义如何构建 Docker 镜像。它包含了一系列的指令和命令,用于设置镜像的基础环境、安装依赖、配置应用程序等。通过执行 docker build 命令,可以根据 Dockerfile 构建出镜像。
  • 容器注册表(Container Registry):容器注册表是存储和分发 Docker 镜像的服务。最常见的容器注册表之一是 Docker Hub,它是一个公共的镜像注册表,包含了大量的官方和社区维护的镜像。除了 Docker Hub 外,还有其他第三方的容器注册表,也可以搭建私有的容器注册表来存储和管理自己的镜像。
  • Docker Engine:Docker 引擎是 Docker 的核心组件,负责管理容器的生命周期、构建、运行和分发容器。它包括一个守护进程(Dockerd)和一组 CLI 工具,通过与 Docker 守护进程进行通信,可以与容器进行交互、管理镜像、执行构建等操作。

这些是 Docker 的一些基本概念,通过了解它们,可以更好地理解和使用 Docker 进行应用程序的开发、交付和运行。

环境安装

linux上进行docker安装有两种方式:

  • Docker自动化安装
  • Docker手动安装

可以根据该文章的步骤进行安装:https://www.jb51.net/server/322968bze.htm

项目部署

项目部署分为两个模块:docker镜像构建容器运行

大致流程如下:

  • 准备 Dockerfile
  • 构建 Docker 镜像
  • 运行 Docker 容器
  • 访问应用程序

创建 Dockerfile

使用规则

Dockerfile 的编写需要遵循以下规则:

  • 每条保留字指令都必须为大写字母且后面要跟随至少一个参数   
  • 指令顺序执行,遵循从上到下原则
  • # 表示注释
  • 每条指令都会创建一个新的镜像层,并对镜像进行提交

Docker如何部署前端项目

保留字

在 Dockerfile 中,常用的保留字(指令)包括但不限于以下几个:

  • FROM:指定基础镜像,用于构建新的镜像。
  • RUN:在镜像构建过程中执行命令,用于安装依赖、运行构建脚本等。
  • COPY:将文件或目录从构建上下文复制到镜像中。
  • ADD:类似于 COPY,但功能更丰富,支持远程 URL、自动解压缩等。
  • WORKDIR:设置工作目录,后续命令将在该目录下执行。
  • EXPOSE:声明容器运行时监听的端口,但并不实际将端口 暴露出去。
  • CMD:设置容器启动时执行的默认命令,可以被 Dockerfile 中的多个 CMD 指令覆盖,但只有最后一个生效。
  • ENTRYPOINT:设置容器启动时执行的默认命令,与 CMD 不同的是,ENTRYPOINT 的参数不会被覆盖,而是    作为 CMD 的参数传递。
  • ENV:设置环境变量,供后续命令使用。
  • ARG:定义构建参数,可以在构建时传递给 Dockerfile 中的其他指令使用。
  • VOLUME:声明匿名数据卷,用于持久化存储容器中的数据。
  • USER:指定运行容器时使用的用户名或 UID。

基础配置

  • 1.配置 Dockerfile文件
# 第一个阶段:构建阶段,使用 Node.js 16 的 Alpine 镜像作为基础镜像,并命名为 build-stage
FROM node:16-alpine as build-stage

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

# 将 package.json 文件复制到工作目录
COPY package.json ./

# 安装 pnpm,并设置 registry 地址为 https://registry.npmmirror.com
RUN npm install -g pnpm \

    && npm config set registry https://registry.npmmirror.com

# 使用 pnpm 安装项目依赖
RUN pnpm install

# 运行构建命令,例如编译 TypeScript、打包前端代码等
RUN pnpm run build

## -- stage: dist => nginx --
# 第二个阶段:将构建好的前端静态文件复制到 Nginx 容器中
FROM nginx:alpine

# 设置时区为 Asia/Shanghai
ENV TZ=Asia/Shanghai

# 将 nginx.conf 文件复制到 Nginx 配置目录下的 default.conf 文件中
COPY ./nginx.conf /etc/nginx/conf.d/default.conf

# 从第一个阶段的 build-stage 镜像中复制构建好的静态文件到 Nginx 的 html 目录下
COPY --from=build-stage /app/dist /usr/share/nginx/html

  • 2.配置 nginx.conf 文件
server {
    listen       80 default_server;   # 监听80端口,作为默认服务
    server_name  _;   # 该配置将匹配任何域名或IP地址

    gzip on;   # 启用gzip压缩
    gzip_min_length 1k;     # 设置允许压缩的页面最小字节数
    gzip_buffers 4 16k;     # 用来存储gzip的压缩结果
    gzip_http_version 1.1;  # 识别HTTP协议版本
    gzip_comp_level 2;      # 设置gzip的压缩比,范围为1-9
    gzip_types text/plain application/x-javascript text/css application/xml application/javascript; # 指定需要压缩的文件类型
    gzip_proxied any;       # 无论后端服务器的headers头返回什么信息,都无条件启用压缩

    location / { ## 前端项目
        root   /usr/share/nginx/html/;   # 指定前端项目的根目录
        index  index.html index.htm;   # 指定默认的索引文件
        try_files $uri $uri/ /index.html;   # 尝试查找文件,如果找不到则重定向到index.html
    }
}

接下来就要让 docker 根据它去构建镜像。

镜像构建

通过Dockerfile构建镜像

执行命令: 

docker build -t frontdocker:1.0 .

 (注意:frontdocker:1.0 为 镜像名称 : 镜像版本号,可以自定义)

Docker如何部署前端项目

开始执行Dockerfile中的命令,运行结束后就可以看到构建的docker镜像了

Docker如何部署前端项目

容器运行

构建好镜像之后,我们需要生成容器并运行。(Dockerfile文件、package.json与项目src文件夹同级)

常见的 Docker 命令选项(也称为选项或标志)包括但不限于以下几个:

  • -d, --detach:以后台模式(守护进程模式)运行容器,使容器在后台运行而不会阻塞终端。
  • --name:为容器指定一个名称,使得容器可以更容易地被识别和操作。
  • -p, --publish:将容器的端口映射到主机的端口,以便可以从主机访问容器内的服务。
  • -v, --volume:将主机文件或目录挂载到容器内,以便实现持久化存储或共享数据。
  • -e, --env:设置环境变量,可以在容器中设置各种环境变量。
  • -i, --interactive:交互式运行容器,允许用户输入命令或与容器进行交互。
  • -t, --tty:为容器分配一个终端(TTY),通常与 -i 一起使用以获得交互式会话。
  • --rm:在容器退出时自动删除容器,用于临时容器,避免容器的残留。
  • --network:指定容器连接到的网络,用于连接容器与其他容器或主机。
  • --restart:设置容器的重启策略,可以在容器退出时自动重启容器。

这些是 Docker 命令中常用的一些选项,通过组合使用这些选项,可以实现各种复杂的容器操作和配置。

运行docker容器

  • 执行命令: 
        docker run -d \

          --restart=always \

          --name "front" \

          --add-host=host.docker.internal:host-gateway \

          -p "9999:80"  \

          frontdocker:1.0

注意:

  • -d 为后台运行
  • -p 为映射容器端口到主机端口,9999为本机的映射地址 可自定义 80为docker容器的监听端口          
  • --name 为容器名称,可以自定义         
  • --restart=always 为容器自动重启          
  • --add-host 参数将 host.docker.internal 映射到了 host-gateway。

这意味着在容器内部,host.docker.internal 将被解析为宿主机的网关地址。frontdocker:1.0 为 镜像名称 : 镜像版本号

容器成功运行

Docker如何部署前端项目

然后我们就可以打开 http://localhost:9999 去查看我们部署好的前端项目了。

当容器运行时,也可以进入容器修改nginx配置文件

1、进入docker运行后,进入容器

执行: docker exec -it front /bin/sh

2、重新运行容器(修改后重新运行容器)

执行: docker restart front

另外,docker 镜像也可以上传到线上仓库中,方便后续的拉取和部署。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持。 

返回顶部
顶部