使用 Docker 部署前端应用

前言

在现代软件开发中，容器化技术已经变得越来越重要，它可以帮助开发者将应用程序及其所有依赖项打包在一个独立的环境中，从而实现在不同平台和环境中的一致性部署。Docker 是最受欢迎的容器化平台之一，它提供了简单而强大的工具，可以轻松地创建、分发和运行应用程序的容器。本文将介绍如何使用 Docker 部署前端应用，以确保应用在不同环境中的一致性运行。

安装 Docker

在 Docker 官网下载并安装，安装成功后打开是以下的界面：

镜像（Image） ：镜像是一个只读的、静态的文件，它包含了一个完整的操作系统环境和所需的应用程序、库文件、依赖项以及配置文件等。镜像是构建容器的基础，它定义了容器运行时所需的所有内容。镜像本身是不可更改的，一旦创建，就不会被修改。你可以将镜像看作是应用程序的打包副本，可以在任何支持 Docker 的地方使用。

容器（Container） ：容器是从镜像创建出来的实例，它是一个可运行的进程，具有自己的文件系统、资源限制、网络设置等。容器是在镜像的基础上创建的，并且可以被启动、停止、暂停、删除等。每个容器都是相互隔离的，具有自己独立的运行环境，但它们共享相同的基础镜像。容器提供了一种轻量级、一致性的运行时环境，使得应用程序可以在不同环境中以相同的方式运行。

镜像和容器的关系：镜像是容器的模板。可以将镜像视为一个预定义的、不可更改的操作系统和应用程序的快照。当你需要运行应用程序时，你可以在镜像的基础上创建容器来启动应用程序。容器实际上是在镜像的副本中运行，并且可以对其进行读写操作，但不会影响原始镜像本身。

创建配置文件

在使用 Docker 时，通常的做法是先创建一个镜像，将应用程序和依赖项打包到其中。然后，可以通过在这个镜像的基础上创建多个容器来运行应用程序。这样一来，不同的容器可以在相同的基础环境下运行，同时也可以根据需要进行定制和配置。

在项目根目录创建 Dockerfile 文件，用于构建生产环境容器镜像。这个镜像应该包含只有在生产环境中需要的资源。

bash 复制代码

# 以 nginx 镜像为基础镜像
FROM nginx:latest

# 复制前端项目打包后的文件到容器内的指定路径
COPY dist /usr/share/nginx/html

# 复制自定义的 nginx 配置文件到容器内
COPY nginx.conf /etc/nginx/nginx.conf

# 暴露容器内的80端口
EXPOSE 80

在项目根目录创建 nignx.conf 文件，根据业务对项目进行个性化配置。

ini 复制代码

# user nobody;
worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include /etc/nginx/mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    server {
        listen 80;
        server_name localhost;

        location / {
            root  /usr/share/nginx/html;
            index  index.html index.htm;
            try_files $uri /index.html;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

构建容器镜像

在 Dockerfile 目录使用 Docker 构建命令创建镜像，cra-frontend 为镜像名字。

erlang 复制代码

docker build -t cra-frontend .

构建完成后可以通过以下命令查看镜像列表：

docker images

也可以通过 Docker Desktop 查看：

运行容器

通过映射端口和 nginx 配置，可以使前端应用程序可从外部访问，用以下命令，根据上一步构建的 cra-frontend 镜像运行一个名为 cra-frontend 的容器：

arduino 复制代码

docker run -d -p 8080:80 --name cra-frontend cra-frontend

或者通过 Docker Desktop 运行：

然后在 Containers 中可以看到已经启动的容器：

最后打开浏览器输入 ip 地址，可以看到容器运行成功了。

持续集成和部署

在服务器上部署 Docker 容器需要把构建的镜像推送到镜像仓库，服务器已安装 Docker，并且 Docker 服务正在运行。

获取镜像

bash 复制代码

docker login # 登录到 Docker 镜像仓库
docker pull your-image-name:tag # 拉取镜像

运行容器

使用 docker run 命令在服务器上运行你的容器。根据需要指定端口映射、环境变量等。

arduino 复制代码

docker run -d -p 8080:80 --name your-container your-image-name:tag

-d 表示在后台运行容器。

-p 8080:80 表示将容器内部的80端口映射到服务器的8080端口。

--name your-container 为容器指定一个名称。

管理容器

使用各种 docker 命令来管理容器，如停止、重启、删除等。

perl 复制代码

docker ps # 查看正在运行的容器
docker stop my-container # 停止容器
docker start my-container # 启动容器
docker restart my-container # 重启容器
docker rm my-container # 删除容器

持续部署

如果你的应用程序需要持续部署，你可以将部署过程自动化，例如使用CI/CD工具（如Jenkins、GitLab CI、Travis CI等）来构建、测试和部署新版本的容器镜像。

总结

通过使用 Docker 部署前端应用，可以轻松地在不同环境中实现应用的一致性运行。Docker 提供了一个强大的容器化平台，使得构建、分发和运行应用变得更加简单和可靠。随着容器化技术的不断发展，使用 Docker 来部署前端应用将成为开发团队的常规实践。