docker 部署前端应用

137 阅读6分钟

初始化一个react项目

命令

npx create-react-app react_demo

编写 dockerfile

在项目根目录新建文件 Dockerfile 写入以下内容

From node:16 as build

WORKDIR /app
COPY . .
RUN npm install  &&  npm run build

FROM nginx
WORKDIR /usr/share/nginx/html
RUN rm -rf ./*
COPY --from=build /app/build .

FROM:

基本使用

FROM <image>[:<tag>] [AS <name>]

其中

  • <image>:指定基础镜像的名称或 ID。
  • <tag>:可选参数,指定基础镜像的标记。如果不指定,默认为 latest。
  • AS <name>:可选参数,为基础镜像指定别名,以便在后续的命令中使用。

多阶段构建

在 Dockerfile 中,每个镜像构建过程只能使用一个 FROM 命令指定一个基础镜像。这是因为 Docker 镜像是按照(layer)构建的,每个层都是基于前一个层的结果构建的。在每个层中,只能使用一个基础镜像来构建新的层。

如果需要在同一个 Dockerfile 中使用多个基础镜像,可以使用多阶段构建(multi-stage build)功能。多阶段构建允许在同一个 Dockerfile 中定义多个 FROM 命令,并在不同的阶段中使用不同的基础镜像。

FROM <base-image> AS <stage-name>

# ... build stage ...

FROM <final-base-image>

# ... final stage ...

COPY --from=<stage-name> /path/to/file /path/to/destination

其中,第一个 FROM 命令指定第一个基础镜像,并为该阶段命名。在该阶段中,可以使用一系列命令来构建应用程序或生成文件。

接下来,可以使用另一个 FROM 命令指定另一个基础镜像,用于构建最终的 Docker 镜像。在这个阶段中,可以使用一系列命令来配置环境、安装软件、设置用户等。

在最终阶段中,可以使用 COPY 命令从之前的阶段中复制文件或目录到最终镜像中。

WORKDIR

WORKDIR 命令用于设置 Docker 容器中的工作目录,即在容器中运行命令时默认的目录。

COPY

COPY 命令用于将本地文件或目录复制到 Docker 镜像中。 COPY . . 是一条 Dockerfile 的命令,它将当前目录(即 Dockerfile 所在的目录)中的所有文件和子目录复制到 Docker 镜像中的当前工作目录。

RUN

RUN 命令用于在 Docker 镜像中运行命令。使用 RUN 命令,可以在 Docker 镜像中安装软件、配置环境变量、执行脚本等。

项目dockerfile解读

# 第一个部分,FROM node:16 as build,意味着这个 Docker 镜像将会以 Node.js 16 作为基础镜像。
# as build 则是为了给这个阶段命名,方便后面的镜像构建阶段引用。
From node:16 as build

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

# 将当前目录中的所有文件复制到 /app 目录中
COPY . .

#  在 /app 目录中执行两个命令 npm install && npm run build ,安装依赖并构建应用程序
RUN npm install  &&  npm run build

# FROM nginx,意味着这个 Docker 镜像将会以 Nginx 作为基础镜像
FROM nginx

# 将工作目录设置为 /usr/share/nginx/html
WORKDIR /usr/share/nginx/html

# 删除该目录下的所有文件
RUN rm -rf ./*

# 从之前的构建阶段(即 FROM node:16 as build)中复制 /app/build 目录到当前工作目录中
COPY --from=build /app/build .

镜像构建

命令

docker build -t docker_react .  

docker build 命令使用方法

在 Docker 中,使用 docker build 命令可以根据 Dockerfile 构建一个 Docker 镜像。docker build 命令的基本语法如下:

docker build [OPTIONS] PATH

其中,OPTIONS 是一些可选参数,PATH 是 Dockerfile 所在的目录。

常用的OPTIONS参数包括:

  • -t:指定镜像名称和标签。
  • -f:指定 Dockerfile 的路径和名称。
  • --no-cache:不使用缓存,强制重新构建镜像。
  • --pull:在构建之前拉取最新版本的基础镜像。
  • --build-arg:设置构建时使用的 build-time 变量(类似于环境变量)。 例如,以下是使用参数构建 Docker 镜像的示例命令:
docker build -t node_app:1.0 -f Dockerfile.prod --no-cache --build-arg ENVIRONMENT=production .

在这个命令中,-f 参数指定 Dockerfile 的路径和名称为 Dockerfile.prod,--no-cache 参数指定不使用缓存,--build-arg 参数用于设置构建时使用的 build-time 变量 ENVIRONMENT 的值为 production。. 表示当前目录为 Dockerfile 所在的目录。

查看当前的所有的镜像\

命令

docker images

image.png

基于该镜像运行容器

命令

docker run -d -p 80:80 docker_react

docker run 命令用法

在 Docker 中,使用 docker run 命令可以启动一个 Docker 容器。在启动容器时,可以指定要运行的镜像、容器名称、端口映射等选项。docker run 命令的基本语法如下:

docker run [OPTIONS] IMAGE [COMMAND] [ARGS]

其中,OPTIONS 是一些可选参数,IMAGE 指定要运行的镜像名称或 ID,COMMANDARGS 指定容器启动后要执行的命令及其参数。

可以使用一些常用的选项来配置 Docker 容器的行为。例如:

  • -d:以后台模式运行容器。
  • --name:指定容器的名称。
  • -e:设置环境变量。
  • -v:挂载主机目录到容器中。
  • --rm:容器停止后自动删除。 例如,以下是使用选项启动 Docker 容器的示例命令:
docker run -d --name node-app -p 8000:8000 -e NODE_ENV=production -v /path/on/host:/app/data node-app:1.0

在这个命令中,-d 参数用于以后台模式运行容器,--name 参数指定容器的名称为 node-app,-e 参数用于设置环境变量 NODE_ENV 的值为 production,-v 参数用于将主机的 /path/on/host 目录挂载到容器的 /app/data 目录中。node-app:1.0 是要运行的镜像名称和标签。

如果需要在容器启动时执行特定的命令,可以在 docker run 命令中指定 COMMAND 和 ARGS 参数。例如,以下是在容器启动时执行 node index.js 命令的示例命令:

docker run -p 8000:8000 node-app:1.0 node index.js

在这个命令中,node index.js 是在容器启动时要执行的命令和参数。

查看当前所有的容器

命令

docker ps

image.png

进入容器

命令

docker exec -it d94072cccb8e  bash

image.png

docker exec 命令使用

在 Docker 中,使用 docker exec 命令可以在运行中的 Docker 容器内部执行命令。docker exec 命令的基本语法如下:

docker exec [OPTIONS] CONTAINER COMMAND [ARGS]

其中,OPTIONS 是一些可选参数,CONTAINER 是要执行命令的容器名称或 ID,COMMAND 和 ARGS 是要在容器中执行的命令及其参数。

  • -i:保持 STDIN 打开。
  • -t:分配一个伪终端(pseudo-TTY)。
  • -d:在后台模式下运行命令。
  • -u:指定命令执行的用户。
  • --privileged:以特权模式运行命令。

例如,以下是在名为 node-app 的容器中以交互模式运行 Bash 命令的示例命令:

docker exec -it node-app bash

在这个命令中,-it 参数用于分配一个伪终端并保持 STDIN 打开,bash 是要在容器中执行的命令。

需要注意的是,docker exec 命令只能在已经运行的容器中执行命令。如果需要在容器启动时指定要执行的命令,应该使用 docker run 命令的 COMMAND 和 ARGS 参数。

停止容器

命令

docker stop CONTAINER

CONTAINER 是要执行命令的容器名称或 ID