当前位置: 代码网 > 服务器>服务器>云虚拟主机 > Docker如何部署前端项目

Docker如何部署前端项目

2024年07月02日 云虚拟主机 我要评论
基础概念什么是 docker?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手动安装

可以根据该文章的步骤进行安装:

项目部署

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

大致流程如下:

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

创建 dockerfile

使用规则

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

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

保留字

在 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 为 镜像名称 : 镜像版本号,可以自定义)

开始执行dockerfile中的命令,运行结束后就可以看到构建的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 为 镜像名称 : 镜像版本号

容器成功运行

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

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

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

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

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

执行: docker restart front

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

总结

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

(0)

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com