Jenkins搭建前后端分离项目流水线实战_jenkins部署django前后端分离项目-CSDN博客

本文链接：https://blog.csdn.net/qq_38783257/article/details/124534880

本文介绍了使用Jenkins构建的Django+Vue项目的前端、后端及数据库初始化的四条流水线，包括前端的npm打包、静态文件部署到nginx，后端的代码拉取、gunicorn启动，以及数据库的迁移操作。通过这些流水线，实现了项目的自动化部署和更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目简介

飞雪测试平台是我做的一个Django+Vue前后端分离demo项目。主要用于日志管理，主要是兴趣驱动，体验一下全栈研发。顺便记录一下流水线搭建的一些关键代码。

前端地址：https://github.com/tdx1997tdx/my_tapd_frontend
后端地址：https://github.com/tdx1997tdx/my_tapd_backend
demo地址：http://139.198.36.243

流水线建设

对于这个项目建立了4条流水线
在这里插入图片描述

前端流水线pipline script

pipeline {
    agent any

    stages {
        stage('git clone') {
            steps {
                git credentialsId: 'f4209992-d0c8-4f10-bcea-c5edaa0846f1', url: 'https://github.com/tdx1997tdx/my_tapd_frontend.git'
            }
        }
        
        stage('npm build') {
            steps {
                sh 'npm install'
                sh 'npm run build'
            }
        }
        
        stage('copy files to nginx') {
            steps {
                sh 'rm -rf /usr/local/nginx/html/*'
                sh 'cp -r ./dist/* /usr/local/nginx/html/'
            }
        }
    }
}

主要流程就是npm打包出来的产物转移到nginx上

nginx配置流水线pipline script

pipeline {
    agent any

    stages {
        stage('change_conf') {
            steps {
                writeFile encoding: 'utf-8', file: '/usr/local/nginx/conf/nginx.conf', text: 
'''
worker_processes  1;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name  139.198.36.243;
        
        location / {
            root   html;
            index  index.html index.htm;
        }
        
        location /api/ {
            proxy_pass   http://127.0.0.1:8080;
        }
    }
}
'''
            }
        }
        stage('restart nginx') {
            steps {
                sh 'systemctl restart nginx.service'
            }
        }
    }
}

对于静态文件直接获取，对于后端接口，也就是api开头的，转发到8080端口

后端流水线pipline script

pipeline {
    agent any

    stages {
        stage('git pull') {
            steps {
                git credentialsId: 'f4209992-d0c8-4f10-bcea-c5edaa0846f1', url: 'https://github.com/tdx1997tdx/my_tapd_backend.git'
            }
        }
        stage('start') {
            steps {
                sh 'killall gunicorn || true'
                sh 'JENKINS_NODE_COOKIE=dontKillMe nohup /usr/local/python3/bin/gunicorn my_tapd_backend.wsgi -w 4 -b 0.0.0.0:8080 &'
            }
        }
    }
}

后端数据库初始化流水线pipline script

pipeline {
    agent any

    stages {
        stage('git pull') {
            steps {
                git credentialsId: 'f4209992-d0c8-4f10-bcea-c5edaa0846f1', url: 'https://github.com/tdx1997tdx/my_tapd_backend.git'
            }
        }
        
        stage('migrate') {
            steps {
                sh 'pip3 install -r requirements.txt'
                sh 'python3 manage.py makemigrations'
                sh 'python3 manage.py migrate'
            }
        }
    }
}