返回

前端部署：docker🐳+nginx+jenkins小白也能轻松上手

前端







随着devops的发展，前端部署变得越来越简单，可控性也越来越高。本文基于docker🐳+nginx+jenkins来实现前端自动化部署流程，具体实现效果为：开发人员在本地开发，开发push提交代码到指定分支，😊自动触发jenkins进行持续集成和自动化部署。部署完成后会收到通知。

## 前提条件

* 安装docker🐳环境
* 安装nginx环境
* 安装jenkins环境
* Git代码托管

## 部署环境搭建

1. 创建docker镜像

docker build -t frontend-image .


2. 运行docker容器

docker run -d -p 80:80 frontend-image


3. 配置nginx反向代理

server {
listen 80;
server_name example.com;

location / {
    proxy_pass http://localhost:80;
}

}


4. 启动nginx服务

nginx -s reload


## 代码托管

将前端代码托管到Git平台，例如GitHub、Gitee等。

## 自动化部署流程

1. 安装jenkins插件

* Git Plugin
* Docker Plugin
* Pipeline Plugin

2. 创建jenkins任务

在jenkins中创建一个新的任务，选择“Pipeline”作为项目类型。

3. 配置jenkins任务

在jenkins任务配置中，添加以下内容：

pipeline {
agent any

stages {
    stage('Checkout') {
        steps {
            git branch: 'master', url: 'https://github.com/example/frontend.git'
        }
    }
    stage('Build') {
        steps {
            docker build -t frontend-image .
        }
    }
    stage('Deploy') {
        steps {
            docker run -d -p 80:80 frontend-image
        }
    }
}

}


4. 保存jenkins任务

## 运行jenkins任务

点击jenkins任务的“构建”按钮，即可触发自动化部署流程。

## 部署完成通知

当部署完成后，jenkins会发送通知邮件给开发人员。

## 结语

本文介绍了如何使用docker🐳+nginx+jenkins来实现前端自动化部署流程，小白也能轻松上手。通过使用自动化部署流程，可以提高前端部署的效率和质量，同时减少人为错误。