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

embedded/2024/12/26 1:48:15/

在这里插入图片描述

前言

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

Docker 是啥?

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

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

  1. 容器化:Docker 让你可以把应用程序和它所需的所有东西(比如库、配置文件等)打包在一起,形成一个独立的单元,这个单元就叫做"容器"。
  2. 隔离性:每个容器都是独立的,不会互相影响。就像每个集装箱都是密封的,里面的东西不会混在一起。
  3. 便携性:Docker 容器可以在任何支持 Docker 的系统上运行,不管是你的笔记本电脑、公司的服务器还是云平台。这就像你可以把集装箱从船上搬到火车上,再搬到卡车上一样方便。
  4. 效率:Docker 容器启动很快,占用资源少,让你可以在同一台机器上运行更多的应用。
  5. 版本控制:Docker 允许你对你的应用环境进行版本控制,就像你对代码进行版本控制一样。
  6. 共享:你可以很容易地与他人分享你的 Docker 容器,就像分享一个文件一样简单。

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

安装 Docker

请参考官方教程:https://docs.docker.com/engine/install/ 。我是 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 守护进程的配置文件。具体步骤如下:

  1. 编辑 /etc/docker/daemon.json 文件(如果文件不存在,请创建它)。

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

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

    在 这个网站 获取可用的加速镜像地址。

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

    # 重载 systemd 管理守护进程配置文件
    sudo systemctl daemon-reload# 重启 Docker 服务
    sudo systemctl restart docker 
    

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

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

在这里插入图片描述

Docker 镜像构建准备

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

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

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

  3. 新建 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;"]
    

    具体的配置信息点击查看 Dockerfile 概述 。

  4. 新建 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/distDockerfilenginx.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 的神秘面纱!但如若仍有不确定之处,欢迎评论区大家一起讨论~


http://www.ppmy.cn/embedded/148766.html

相关文章

多摩川编码器协议

多摩川编码器是一种常用的绝对值编码器&#xff0c;其协议基于485硬件接口的标准NRZ协议&#xff0c;通讯波特率为固定的2.5Mbps。以下是多摩川编码器协议的详细说明&#xff1a; 硬件接口 多摩川编码器使用RS485接口进行通信&#xff0c;接口定义如下&#xff1a; 5V供电&…

Cesium材质——Material

简介&#xff1a; Cesium.Material对象的目的&#xff0c;就是生成一段名称为czm_getMaterial的函数&#xff08;示例代码如下&#xff09;&#xff0c; 这个czm_getMaterial函数&#xff0c;是shader代码&#xff0c;会被放到片元着色器中使用。 czm_material czm_getMater…

【蓝桥杯每日一题】 蜗牛——动态规划

蜗牛 蓝桥杯每日一题 2024-12-23 蜗牛 动态规划 题目描述 今天&#xff0c;一只蜗牛来到了二维坐标系的原点。 在 x 轴上有 n 根竹竿。它们平行于 y 轴&#xff0c;底部纵坐标为 0&#xff0c;横坐标分别为 x 1 , x 2 , … , x n x_1, x_2, \dots, x_n x1​,x2​,…,xn​。 竹…

VMware虚拟机三种网络工作模式

vmware为我们提供了三种网络工作模式,它们分别是:Bridged(桥接模式)、NAT(网络地址转换模式)、Host-Only(仅主机模式)。 打开vmware虚拟机,我们可以在选项栏的“编辑”下的“虚拟网络编辑器”中看到VMnet0(桥接模式)、VMnet1(仅主机模式)、VMnet8(NAT模式),那…

【大语言模型】ACL2024论文-30 探索语言模型在文本分类中的伪相关性:概念层面的分析

【大语言模型】ACL2024论文-30 探索语言模型在文本分类中的伪相关性&#xff1a;概念层面的分析 目录 文章目录 目录文章摘要研究背景问题与挑战如何解决创新点算法模型概念标签获取测量概念伪相关性模型鲁棒性评估数据重平衡技术 实验效果伪相关性测量结果减轻伪相关性的方法 …

LabVIEW开发需要懂那些数学知识?

LabVIEW开发是一种图形化编程方法&#xff0c;广泛应用于工程和科学领域。在开发过程中&#xff0c;数学知识是不可或缺的&#xff0c;它不仅是分析和设计复杂系统的基础&#xff0c;还能提升开发效率和系统性能。下面将从应用需求、案例分析、介绍LabVIEW开发中所需的数学知识…

【C++动态规划 数位dp】2376. 统计特殊整数|2120

本文涉及知识点 下载及打开打包代码的方法兼述单元测试 C动态规划 数位dp LeetCode2376. 统计特殊整数 如果一个正整数每一个数位都是 互不相同 的&#xff0c;我们称它是 特殊整数 。 给你一个 正 整数 n &#xff0c;请你返回区间 [1, n] 之间特殊整数的数目。 示例 1&…

完全二叉树的权值(蓝桥杯2019年试题G)

给定一棵包含N个节点的完全二叉树&#xff0c;树上的每个节点都有一个权值&#xff0c;按从上到小、从左到右的顺序依次是A1、A2……An,&#xff08;1&#xff0c;2&#xff0c;n为下标。&#xff09;如下图所示。 现在&#xff0c;小明要把相同深度的节点的权值加到一起&#…