前言
在前端工程化领域，持续部署已经成为了必要的开发流程之一。持续部署可以保证开发者从代码提交到部署的流程中无需手动干预，这不仅可以减少出错概率，提高开发效率，还能使产品更快地上线，更好地满足客户需求。
Docker 和 Jenkins 是目前最流行的持续部署解决方案，在本篇文章中，我们将介绍如何使用 Docker 和 Jenkins 实现前端应用的持续部署。
Docker
Docker 是一个开源的应用容器引擎，可以帮助开发者将应用打包成独立的容器，解决传统部署方式中环境配置和运行依赖的问题。Docker 容器可以在任何支持 Docker 的操作系统上运行，保证应用的可移植性和兼容性。
Docker 架构
Docker 的架构包含三个核心组件：
- Docker Daemon：Docker 引擎，负责管理 Docker 容器运行的所有组件。
- Docker Client：Docker 客户端，与 Docker Daemon 进行通信，执行各种 Docker 命令。
- Docker Registry：Docker 镜像仓库，存放各种 Docker 镜像。
Docker 安装
安装 Docker 可以参考 官方文档，这里不再详细赘述。
Docker 镜像
Docker 镜像是一个只读的模板，可以用来创建 Docker 容器。Docker 镜像包含了运行 Docker 容器所需的所有文件和依赖项。可以将 Docker 镜像理解为一个应用程序和其运行环境的打包文件，它可以在不同的机器上和不同的系统中运行，保证了应用的可移植性和兼容性。
创建 Docker 镜像的方式有很多种，其中比较常用的有以下几种：
- 使用 Dockerfile 创建镜像：Dockerfile 是一个文本文件，包含了创建 Docker 镜像所需的所有指令和配置信息。可以使用 Dockerfile 创建自定义的 Docker 镜像。
以下是一个使用 Dockerfile 创建 Node.js 应用镜像的示例：
// javascriptcn.com 代码示例
# 指定基础镜像
FROM node
# 创建工作目录
RUN mkdir -p /app
WORKDIR /app
# 复制代码文件到镜像
COPY package*.json ./
# 安装依赖包
RUN npm install \
&& npm cache clean --force
# 复制应用代码
COPY . .
# 暴露容器端口
EXPOSE 3000
# 容器启动时运行的命令
CMD [ "npm", "start" ]执行以下命令将 Dockerfile 打包成镜像：
docker build -t myapp:1.0.0 .
- 使用已有的 Docker 镜像：可以从 Docker 镜像仓库中获取已经构建好的镜像，例如官方的 Node.js 镜像可以使用以下命令获取：
docker pull node
Docker 容器
Docker 容器是 Docker 镜像的运行实例。Docker 容器仅包含运行应用所需的最小化操作系统核心组件和应用运行所需的依赖项，避免了操作系统和应用之间的耦合。
创建 Docker 容器的方式有以下两种：
- 使用已有的 Docker 镜像创建容器：可以使用以下命令创建一个名为 myapp 的容器，并运行 Node.js 应用：
docker run -d -p 3000:3000 --name myapp myapp:1.0.0
- 使用 Dockerfile 创建容器：可以使用以下命令将 Dockerfile 打包成容器并运行 Node.js 应用：
docker run -d -p 3000:3000 --name myapp2 myapp:1.0.0
Docker Compose
Docker Compose 是一个命令行工具，可以通过一个单独的 YAML 文件定义、运行和管理多个 Docker 容器。使用 Docker Compose 可以省去手工创建、启动和连接多个 Docker 容器的繁琐过程。
以下是一个使用 Docker Compose 部署 Node.js 应用的示例：
// javascriptcn.com 代码示例
version: "3"
services:
app:
build: .
ports:
- "3000:3000"
volumes:
- .:/app
environment:
- NODE_ENV=production
depends_on:
- db
db:
image: mysql:5.7
environment:
- MYSQL_ROOT_PASSWORD=123456
- MYSQL_DATABASE=mydb
- MYSQL_USER=myuser
- MYSQL_PASSWORD=123456
volumes:
- db_data:/var/lib/mysql
volumes:
db_data:使用以下命令启动容器：
docker-compose up -d
Jenkins
Jenkins 是一个开源的持续集成和持续部署系统，可以自动化构建、测试和部署应用程序。Jenkins 支持多种插件，可以与许多开源和商业工具集成。
Jenkins 安装
安装 Jenkins 可以参考 官方文档，这里不再详细赘述。
安装插件
Jenkins 可以通过插件完成各种自动化任务，例如构建代码、部署应用、发送通知等。可以通过 Jenkins 管理界面安装和管理插件，也可以在 Jenkinsfile 中指定使用的插件。
以下是一些常用的 Jenkins 插件：
- NodeJS Plugin：支持 Node.js 环境的构建和测试。
- Docker Pipeline：可以在 Jenkinsfile 中使用 Docker 容器。
- GitHub Plugin：可与 GitHub 仓库集成，监听代码提交触发构建任务。
- Mailer Plugin：支持发送邮件通知。
- Slack Notification Plugin：支持 Slack 发送通知。
Jenkinsfile
Jenkinsfile 是基于 Groovy 编写的用于定义 Jenkins 构建流程的脚本文件。使用 Jenkinsfile 可以将构建流程定义为代码，可以作为代码仓库的一部分进行版本控制，也可以方便地重复使用和分享。
以下是一个使用 Jenkinsfile 构建 Node.js 应用并推送到 Docker Hub 的示例：
// javascriptcn.com 代码示例
pipeline {
agent any
environment {
DOCKER_HUB_CREDENTIALS = credentials('docker-hub-credentials')
DOCKER_IMAGE = 'your-docker-account/your-app'
DOCKER_TAG = sh(script: "echo ${env.BUILD_NUMBER}", returnStdout: true).trim()
}
stages {
stage('Checkout') {
steps {
checkout([$class: 'GitSCM', branches: [[name: '*/master']], userRemoteConfigs: [[url: 'your-git-repo-url']]])
}
}
stage('Build') {
steps {
node {
sh 'npm install'
}
}
}
stage('Test') {
steps {
node {
sh 'npm run test'
}
}
}
stage('Docker Build') {
steps {
withCredentials([DOCKER_HUB_CREDENTIALS]) {
sh "docker build -t ${DOCKER_IMAGE}:${DOCKER_TAG} ."
}
}
}
stage('Docker Push') {
steps {
withCredentials([DOCKER_HUB_CREDENTIALS]) {
sh "docker login -u ${DOCKER_HUB_CREDENTIALS_USR} -p ${DOCKER_HUB_CREDENTIALS_PSW}"
sh "docker push ${DOCKER_IMAGE}:${DOCKER_TAG}"
}
}
}
}
}总结
通过 Docker 和 Jenkins 的持续部署流程，可以将前端应用的构建、测试、部署等环节自动化完成，极大地提高了开发效率和产品交付能力。希望本篇文章对你有所帮助，也欢迎大家探讨和分享更多前端技术的应用场景和方法！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652c418a7d4982a6ebe15224