Docker如何部署前端项目
更新时间：2024年06月20日 09:38:23 作者：老友@
这篇文章主要介绍了Docker如何部署前端项目问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
目录
- 基础概念
- 什么是 Docker？
- 环境安装
- 项目部署
- 创建 Dockerfile
- 镜像构建
- 容器运行
- 总结
基础概念
什么是 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 的编写需要遵循以下规则：
- 每条保留字指令都必须为大写字母且后面要跟随至少一个参数
- 指令顺序执行，遵循从上到下原则
- # 表示注释
- 每条指令都会创建一个新的镜像层，并对镜像进行提交
保留字
在 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)