前端 Docker 入门之：Docker + Nginx 部署 Vue3 应用

前言

如标题所示，本篇作为我在 Docker 实践后的一些记录与分享，文章的重点在于 Docker，可能会涉及到一些 Linux 的基本操作就不具体展开。

Docker 是啥？

Docker 是一个开源的平台，用于开发、运输和运行应用程序。用大白话来说，Docker 就像是一个标准化的"集装箱"系统，但是用于软件而不是货物。

以下是 Docker 的几个关键特点，用通俗的语言解释：

容器化：Docker 让你可以把应用程序和它所需的所有东西（比如库、配置文件等）打包在一起，形成一个独立的单元，这个单元就叫做"容器"。

隔离性：每个容器都是独立的，不会互相影响。就像每个集装箱都是密封的，里面的东西不会混在一起。

便携性：Docker 容器可以在任何支持 Docker 的系统上运行，不管是你的笔记本电脑、公司的服务器还是云平台。这就像你可以把集装箱从船上搬到火车上，再搬到卡车上一样方便。

效率：Docker 容器启动很快，占用资源少，让你可以在同一台机器上运行更多的应用。

版本控制：Docker 允许你对你的应用环境进行版本控制，就像你对代码进行版本控制一样。

共享：你可以很容易地与他人分享你的 Docker 容器，就像分享一个文件一样简单。

总的来说，Docker 让开发、测试和部署应用变得更加简单和一致，无论你的应用要在哪里运行。

安装 Docker

请参考官方教程：docs.docker.com/engine/inst… 。我是 Ubuntu 系统，基本全程无雷安装完成。

注意：我这里安装的是 Docker Engine，还有一个工具叫 Docker Desktop，以下是两者的区别。

Docker Engine 是 Docker 的核心组件，包括 dockerd 守护进程、Docker API 和 Docker CLI。它主要负责构建、运行和分发 Docker 容器。

Docker Desktop 是一个更全面的应用程序，包含了 Docker Engine 以及其他额外的工具和功能。根据 Docker Desktop 文档，它还包括 Docker CLI 客户端、Docker Compose、Docker Scout、Docker Build、Docker Extensions、Docker Content Trust、Kubernetes 和 Credential Helper 等。

按照官方教程，在安装完成后它会让我们执行 docker run hello-world 这个命令，不出意外的话终端会打印以下日志表示 Docker 成功安装！

Hello from Docker!
This message shows that your installation appears to be working correctly.
....

Docker 中的 registry-mirrors 配置

Docker 中的 registry-mirrors 配置用于设置 Docker 镜像仓库的镜像。这个功能允许您指定一个或多个镜像仓库，Docker 将优先从这些镜像仓库拉取镜像，而不是直接从 Docker Hub 拉取。

要配置 registry-mirrors，您需要编辑 Docker 守护进程的配置文件。具体步骤如下：

编辑 /etc/docker/daemon.json 文件（如果文件不存在，请创建它）。

在文件中添加或修改 registry-mirrors 键，值为一个包含镜像URL的数组。例如：

{
  "registry-mirrors": ["https://<my-docker-mirror-host>"]
}

保存文件并重新加载 Docker 以使更改生效。

# 重载 systemd 管理守护进程配置文件
sudo systemctl daemon-reload

# 重启 Docker 服务
sudo systemctl restart docker

这个配置允许您使用自定义的镜像仓库，这对于加快镜像下载速度或在私有网络中使用本地镜像仓库非常有用。

测试一下？使用 docker pull nginx 下载一个 Nginx 镜像试试，一般来说没有报错的话就是成功了。我们还可以使用 docker images 查看已经存在的镜像：

Docker 镜像构建准备

我们完成了 Docker 的安装工作，接下来进入正题吧。

创建部署目录

对于初学者来说 Linux 的目录可能不太熟悉，比如我的 demo 项目是一般都是放在 /home/<username>/projects 下，可供参考。可以在 /home/<username>/projects 目录下建一个 hello-docker 作为我们学习 docker 的项目目录。

上传 dist 文件夹

对于 vue3 的打包产物通常是以 dist 命名的文件夹，我是通过 webstorm 的工具-部署来连接远程主机进行文件上传的（文件夹的话通常建议本机压缩后上传，再在远程主机上解压）

新建 Dockerfile 文件

Dockerfile 是一个文本文档，其中包含了构建 Docker 镜像所需的所有命令。它是创建自定义 Docker 镜像的关键组件。

在项目根目录下创建一个 Dockerfile 文件，将以下配置粘进去：

# 从 nginx 镜像开始构建
FROM nginx

# 将项目根目录下的 dist 目录中的内容复制到容器的 /usr/share/nginx/html 目录中，作为静态文件目录
COPY ./dist /usr/share/nginx/html

# 将项目目录下的 nginx.conf 文件复制到容器的 /etc/nginx/nginx.conf 路径下，以配置 nginx
COPY nginx.conf /etc/nginx/nginx.conf

# 暴露 80 端口，使容器可以通过此端口对外提供服务
EXPOSE 80

# 启动 nginx，并以前台模式运行（-g "daemon off;" 表示在前台运行）
CMD ["nginx", "-g", "daemon off;"]

新建 nginx.conf 文件

我们看到上述的 Dockerfile 配置文件中出现了关于 nginx.conf 的内容，我们先了解下它是个什么？

nginx.conf 是 Nginx 服务器的主要配置文件，用于定义 Nginx 的运行参数和行为。这个文件通常位于 Nginx 安装目录下的 conf 文件夹中，或者在 /etc/nginx/ 目录下。

以下是 nginx.conf 文件的一些主要功能：

全局配置：设置 Nginx 的基本运行环境，如用户、工作进程数、错误日志位置等。

事件块：配置如何处理连接，如使用哪种多路复用技术、最大连接数等。

HTTP 块：配置 HTTP 服务器的行为，包括 MIME 类型定义、日志格式、默认处理程序等。

Server 块：定义虚拟主机，每个虚拟主机可以有不同的域名、端口、根目录等。

Location 块：定义 URL 路径的处理方式，如静态文件服务、反向代理、重定向等。

通过编辑 nginx.conf 文件，可以实现对 Nginx 服务器的各种定制化配置。我们这里的配置极为简单，在 Nginx 的默认配置里加一行代码就搞定了。

# 定义Nginx用户和工作进程数量
user  nginx;
worker_processes  1;

# 指定错误日志的位置和级别
error_log  /var/log/nginx/error.log warn;
# 存储Nginx进程ID的文件路径
pid        /var/run/nginx.pid;

# 事件模块配置
events {
    # 每个worker进程可以同时处理的最大连接数
    worker_connections  1024;
}

# HTTP模块配置
http {
    # 包含MIME类型定义文件
    include       /etc/nginx/mime.types;
    # 默认文件类型
    default_type  application/octet-stream;

    # 定义日志格式
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    # 指定访问日志的位置和格式
    access_log  /var/log/nginx/access.log  main;

    # 启用高效文件传输模式
    sendfile        on;

    # 设置keep-alive连接的超时时间
    keepalive_timeout  65;

    # 服务器配置
    server {
        # 监听端口
        listen       80;
        # 服务器名称
        server_name  localhost;

        # 位置配置
        location / {
            # 网站文件的根目录
            root   /usr/share/nginx/html;
            # 默认索引文件
            index  index.html index.htm;
            # 尝试按顺序匹配请求的 URI，如果找不到则返回 index.html，适用于单页应用的路由
            try_files $uri $uri/ /index.html;
        }

        # 定义错误页面
        error_page   500 502 503 504  /50x.html;
        # 配置50x错误页面的路径
        location = /50x.html {
            root   /usr/share/nginx/html;
        }
    }
}

在 Vue-Router 中体验相对较好的就是 HTML5 模式的路由了，但是由于单页应用的限制导致刷新时会报错，这时在 Nginx 中加入 try_files $uri $uri/ /index.html; 就可以解决。

Vue 官方也提供了各种服务器下的解决方案。

Docker 镜像构建

Docker 镜像是一个只读的模板，用于创建 Docker 容器。它包含了运行应用程序所需的所有文件、配置和依赖项。

在完成以上的准备工作后，我们的项目部署目录如下：

/hello-docker
    /dist
    Dockerfile
    nginx.conf

接下来我们在 /hello-docker 目录下执行 docker image build --no-cache ./ -t hello-docker:1.0.0 来构建一个镜像。这行命令的含义是：

docker image build：命令用于构建 Docker 镜像

--no-cache：可以用来清除之前的构建缓存

./：指定 Dockerfile 所在的目录，即当前目录

-t hello-docker:1.0.0：为构建的镜像指定一个名称，标签名为 hello-docker，版本号为 1.0.0

不出意外的话，我们的镜像已经构建好了，在任意目录下执行 docker images 即可查看刚刚构建成功的镜像：

Docker 通过镜像创建容器

Docker中的容器是一个轻量级、独立的可执行软件包,包含运行应用程序所需的一切：代码、运行时环境、系统工具、系统库和设置。

在任意目录执行 docker container create -p 8080:80 hello-docker:1.0.0 就可以创建容器，这行命令的含义是：

docker container create：创建一个新的容器

hello-docker:1.0.0：指定创建容器的镜像名称

-p 8080:80：将主机的 8080 端口映射到容器的 80 端口

使用 docker ps -a 查看所有容器：

如图示可以看到每个容器都有 CONTAINER ID，执行 docker start <container_id> 就可以启动这个容器。执行 docker ps 查看运行中的容器：

现在我们这个前端的 Vue3 应用应该完成部署了，我是基于云主机操作的，所以通过 <云主机的外网IP>:8080 即可访问了。

写在最后

本篇 Docker 入门教程乃是作者奶妈级整理分享，相信按照教程可以全程无雷丝滑顺畅完成部署，彻底揭开 Docker 的神秘面纱！但如若仍有不确定之处，欢迎评论区大家一起讨论~

作者：dizuncainiao

链接：https://juejin.cn

+友情链接