实现前端自动化部署

原创于 2025-07-02 16:35:48 发布 · 740 阅读

25 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #自动化 #运维

要实现前端自动化部署，结合 Docker、Jenkins 和 Nginx，可以创建一个高效且可复用的流水线。以下是详细步骤和配置示例：

整体架构

Git 仓库 (代码变更) 
  → Jenkins (自动构建) 
  → Docker (打包镜像) 
  → Nginx (部署运行)

1. 环境准备

(1) 安装 Docker

# 安装 Docker
sudo apt-get update
sudo apt-get install docker-ce docker-ce-cli containerd.io

# 启动 Docker
sudo systemctl start docker
sudo systemctl enable docker

(2) 运行 Jenkins 容器

# 创建 Jenkins 数据卷
mkdir -p ~/jenkins_data && chmod 777 ~/jenkins_data

# 启动 Jenkins（绑定 Docker 套接字和宿主机 Docker）
docker run -d \
  --name jenkins \
  -p 8080:8080 \
  -p 50000:50000 \
  -v ~/jenkins_data:/var/jenkins_home \
  -v /var/run/docker.sock:/var/run/docker.sock \
  -v $(which docker):/usr/bin/docker \
  jenkins/jenkins:lts

访问 http://服务器IP:8080 完成初始设置（密码在 ~/jenkins_data/secrets/initialAdminPassword 中）。

2. Jenkins 配置

(1) 安装必要插件

Dashboard → Manage Jenkins → Plugins
- 安装：Git、NodeJS、Docker Pipeline

(2) 配置 NodeJS 环境

Dashboard → Manage Jenkins → Global Tool Configuration
- 添加 NodeJS 安装（示例：版本 16.x）

(3) 创建 Pipeline 任务

新建任务 → 选择 Pipeline
在 Pipeline 配置中：
- Definition: Pipeline script from SCM
- SCM: Git（填写仓库 URL 和凭据）
- Script Path: Jenkinsfile（仓库中的流水线定义文件）

3. 项目配置

(1) 前端项目添加关键文件

Dockerfile（放在项目根目录）：

# 构建阶段
FROM node:16 AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build  # 构建静态文件（生成 dist/ 目录）

# 运行阶段
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf  # 自定义 Nginx 配置
EXPOSE 80

nginx.conf（覆盖默认配置，解决路由问题）：

server {
  listen 80;
  location / {
    root   /usr/share/nginx/html;
    index  index.html;
    try_files $uri $uri/ /index.html;  # 支持前端路由
  }
}

Jenkinsfile（流水线定义）：

pipeline {
  agent any
  environment {
    DOCKER_IMAGE = "your-dockerhub/frontend-app:${BUILD_NUMBER}"
  }
  stages {
    stage('Build') {
      steps {
        script {
          docker.build(DOCKER_IMAGE)
        }
      }
    }
    stage('Deploy') {
      steps {
        script {
          // 停止旧容器并启动新容器
          sh "docker stop frontend-container || true"
          sh "docker rm frontend-container || true"
          sh "docker run -d -p 80:80 --name frontend-container ${DOCKER_IMAGE}"
        }
      }
    }
  }
}

4. 自动化流程

代码推送：开发者提交代码到 Git 仓库。
Jenkins 触发：
- 拉取最新代码
- 通过 NodeJS 环境构建项目
- 使用 Docker 打包镜像（包含构建产物和 Nginx）
部署更新：
- 停止旧容器
- 启动新容器（映射宿主机 80 端口）

5. 验证部署

# 查看运行中的容器
docker ps

# 访问前端页面
curl http://localhost

浏览器访问服务器 IP 查看前端页面。

6. 优化建议

镜像标签：使用 Git 提交 ID 作为镜像标签（替代 ${BUILD_NUMBER}）。
私有仓库：将镜像推送到 Docker Hub 或私有 Registry。
HTTPS：在 Nginx 容器中挂载 Let’s Encrypt 证书。
回滚机制：保留旧版本镜像，通过 Jenkins 参数化构建快速回滚。
清理策略：在 Jenkins 中定期清理旧镜像（docker system prune -f）。

故障排查

权限问题：确保 Jenkins 用户有 Docker 执行权限（将 jenkins 用户加入 docker 组）。
构建失败：在 Jenkins 控制台查看日志，检查 npm build 或 Docker 构建步骤。
端口冲突：确保宿主机 80 端口未被占用（netstat -tuln | grep 80）。