Docker部署前端项目

老友@

已于 2024-03-14 16:48:29 修改

阅读量1.3k

点赞数 12

分类专栏：运维文章标签： docker 前端容器运维 node.js

于 2024-02-29 17:46:32 首次发布

本文链接：https://blog.csdn.net/weixin_44876263/article/details/136375625

版权

运维专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

基础概念

什么是 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://blog.csdn.net/weixin_44876263/article/details/136714078?spm=1001.2014.3001.5502

项目部署

项目部署分为两个模块：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。

基础配置

配置 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

配置 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 镜像也可以上传到线上仓库中，方便后续的拉取和部署。

老友@

关注

12
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
Docker部署前端项目

Docker 是一个用于开发、交付和运行应用程序的开源平台。它利用容器技术，只隔离应用程序的运行时环境但容器之间可以共享同一个操作系统，可以将应用程序及其依赖项打包到一个可移植的容器中，然后发布到任何支持 Docker 的环境中运行，无论是开发人员的个人笔记本电脑、数据中心的虚拟机，还是云服务提供商的主机上。可以理解成一个更轻量级的虚拟机并且使用的是本机的操作系统。容器(Container)：容器是一个轻量级、独立、可执行的软件包，包含应用程序及其所有依赖项（如代码、运行时、系统工具、库等）。
复制链接

扫一扫