【Docker速成】快速使用Docker部署前端项目

Hello 大家好啊，我是雪人⛄

实习的时候发现项目是用 Docker 部署的，然后 Mentor 让我速成一下。

火速补习一波🔥，在这里分享给大家，教大家如何快速使用 Docker 部署前端项目。

在这里给大家推荐一个视频：🐳Docker概念，工作流和实践。

很喜欢技术蛋老师这个UP主，讲的内容都生动有趣，安利一波。

环境安装

• 直接前往官网选择对应操作系统下载安装即可：Dokcer官网。
• Windows 版本的 Docker Desktop 会自动配置环境变量并且包含 GUI 式傻瓜操作，非常好用。

基础概念

概述

Docker🐳 是一种容器技术，只隔离应用程序的运行时环境但容器之间可以共享同一个操作系统，可以理解成一个更轻量级的 虚拟机 并且使用的是本机的操作系统。

从官网 Copy 了一些 Docker 的用途和优点。

构建：

• 利用 Docker 映像在 Windows 和 Mac 上高效开发自己独特的应用程序，从而在编码方面抢占先机。 使用 Docker Compose 创建多容器应用程序。
• 在整个开发管道中与您喜欢的工具集成 - Docker可与您使用的所有开发工具配合使用，包括VS Code，CircleCI和GitHub。
• 将应用程序打包为可移植容器映像，以便在从本地 Kubernetes 到 AWS ECS、Azure ACI、Google GKE 等的任何环境中一致地运行。

共享：

• 利用 Docker 可信内容，包括 Docker 官方映像和来自 Docker Hub 存储库的 Docker 验证发布者的映像。
• 通过与团队成员和其他开发人员协作以及轻松地将映像发布到 Docker Hub 来进行创新。
• 使用基于角色的访问控制个性化开发人员对映像的访问，并使用 Docker Hub 审核日志深入了解活动历史记录。

运行：

• 轻松交付多个应用程序，并让它们在您的所有环境中以相同的方式运行，包括设计、测试、暂存和生产 - 桌面或云原生。
• 使用不同的语言在单独的容器中独立部署应用程序。降低语言、库或框架之间发生冲突的风险。
• 利用 Docker Compose CLI 的简单性加快开发速度，只需一个命令，即可使用 AWS ECS 和 Azure ACI 在本地和云上启动应用程序。

基本概念

要想学会 Docker 我们只需要了解以下几点概念即可。

• Dockerfile
• Image（镜像）
• Container（容器）

Dockerfile 相当于我们制作镜像的 ‘说明书’，Docker 会根据我们编写好的 ‘说明书’ 去制作镜像，比如我们配置了安装 nginx 然后运行 XXX 命名那么 Docker 会自动执行这些命令并构建一个镜像，然后我们可已将这个镜像运行，使其成为一个容器，这个容器就相当于一个小型的 ‘虚拟机’，里面包含了我们提前配置好的应用程序，并运行了相关的指令。

大致流程如下：

这里的 '虚拟机' '说明书' 都是不太恰当的比喻，并不是官方概念。

Docker实操

了解了基本概念之后就可以使用啦。接下来带领大家使用 Docker 配置 Nginx 去部署前端项目。

我们 Clone 一个 Vue 的脚手架当作示例，这个是我写的一个 Vite+TS+Vue3 快速开发脚手架，有兴趣的可以看看👀LonelySnowman/sv3-template，或者大家直接使用自己的其他项目也OK，步骤是一致的。

git clone git@github.com:LonelySnowman/sv3-template.git
​
cd sv3-template
​
pnpm install # 安装依赖

创建 Dockerfile

我们在项目根目录下创建一个 Dockerfile 文件，接下来就交大家如何编写。

使用规则

Dockerfile 的编写需要遵循以下规则：

• 每条保留字指令都必须为大写字母且后面要跟随至少一个参数
• 指令顺序执行，遵循从上到下原则
• # 表示注释
• 每条指令都会创建一个新的镜像层，并对镜像进行提交

保留字

Dockerfile中常用的保留字有以下几个，更多请前往官网查阅：

• FROM：指定基础镜像
• RUN：容器构建时需要运行的命令
• EXPOSE：当前容器对外暴露的端口号
• WORKDIR：指定在创建容器后，终端默认登录进来的工作目录
• ADD：将宿主机目录下的文件拷贝进镜像，ADD命令会自动处理URL和解压tar压缩包
• CMD：指定一个容器启动时要运行的命令，参数为数组格式 CMD ["可执行文件", "参数1", "参数2" ...]

基础配置

在了解一些基础配置规则后我们就可以使用下列内容去配置 Dockerfile

# 指定基础镜像为最新版 nginx
FROM nginx:latest
# 将项目下的 ./configs 文件夹放置在镜像中的 /home/nginx/configs 文件夹
ADD ./configs /home/nginx/configs
ADD ./dist /dist
# 运行 nginx
CMD ["nginx","-c","/home/nginx/configs/nginx.conf","-g", "daemon off;"]
# 镜像对外暴露 3000 端口
EXPOSE 9527

然后新建一个 nginx 配置文件

/configs/nginx.conf

这里就只配置一个最基础的，更多内容请查阅 nginx 官方文档

user  root;
worker_processes  auto;
​
events {
    worker_connections  1024;
}
​
http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;
    keepalive_timeout  65;
    server {
    listen 9527;
    server_name localhost;
    location / {
        root /dist;
        index index.html;
        }
    }
}

到此为止我们的 '说明书' 就写好了，接下来就要让 docker 根据它去构建镜像。

镜像构建

打包项目

首先我们需要将我们的项目打包。

如果你使用的我刚刚介绍的项目需要更改一处配置 .env.production，表示生产环境开启 mock。

VITE_APP_USE_MOCK = true

然后运行 pnpm run build 即可😀。

其他项目使用对应打包指令就OK了。

构建镜像

只要有了 Dockerfile 就非常简单了，我们需要掌握一些指令就可以驾驭镜像😀。

# 构建镜像
# -t 后表示指定镜像名称 sv3 镜像标签 v1
# . 表示指定 Dockerfile 所在目录
docker build -t sv3:v1 .

然后我们就可以看到我们的镜像啦：

docker images -a # 查询本地全部镜像
docker images sv3 # 查看名为 sv3 的镜像

查询出的信息如下：

REPOSITORY	TAG	IMAGE ID	CREATED	SIZE
sv3	v1	6bd00cc358df	About a minute ago	143MB

如果想要删除镜像的话使用如下指令

docker rmi id/name # 根据镜像 id 或 name 删除镜像

运行容器

构建好镜像之后我们就需要让他成为容器，要想成功运行起来，还需要掌握几个指令👦。

# 运行容器
# --name 指定容器名称为 sv3
# -p 指定外部端 9527 于容器内 9527端口连接
# -v 代表绑定卷 也就是本地的 dist 文件如果变更 容器内的 dist文件也会做出相应改变
# 注意 -v 两侧均需要使用绝对路径
# -d 表示在后台运行
# 最后的 sv3:v1 表示使用指定的镜像
docker run --name sv3 -p 9527:9527 -v D:/sv3-template/dist:/dist -d sv3:v1

下面是一些其他的常用指令

# 查询容器
docker ps -a # 查询全部容器
docker ps -a | grep xxx # 筛选查询容器
​
# 运行容器
docker start xxx
# 暂停容器
docker stop xxx
# 重启容器
docker restart xxx
​
# 删除容器
docker rm 

这样我们就可以打开 http://localhost:9527 去查看我们部署好的项目啦😀。

因为配置了 '卷' 的缘故，我们重新打包，对应的 Docker 容器也会自动更新，大家可以直接修改 dist 或者修改代码再重新打包试试看✌。

以上为本地使用 Docker 将项目运行起来，云服务器同理，我们只需要把 dist 和 config 以及 Dockerfile 文件上传至服务器，然后再构建镜像运行容器即可😄。

⛄以上就是 Docker 最基本的使用方式啦

✨更多内容请前往官网查阅：Overview | Docker Documentation

👍如果对你有帮助的话，请给我点个赞吧