Project Setup: GitHub Code Hosting, Nginx Frontend Service, and Jenkins CI/CD Configuration

1. Project Setup

The project configuration involves uploading the website source code to GitHub, setting up a web server for user access, and then using Jenkins together with SaltStack to publish the code to the server.

1.1 Code Hosting

Upload the project source code to GitHub.

1.2 Set up Frontend Nginx Service

Install Nginx, create the site directory, and configure the server.

yum -y install nginx
service nginx start
chkconfig nginx on

Create site directory

mkdir -p /opt/nginx/myweb

Configure Nginx

vim /etc/nginx/conf.d/default.conf

server {
    listen       80 default_server;
    server_name  www.xxxxx.com;

    include /etc/nginx/default.d/*.conf;

    location / {
        root /opt/nginx/myweb;
        index index.html ;
    }

    error_page 404 /404.html;
        location = /40x.html {}

    error_page 500 502 503 504 /50x.html;
        location = /50x.html {}
}

service nginx restart

2. Jenkins Configuration

2.1 Create Project

Business name: cxy

Application name: cxy-vuedemo-ui

Application server: VM_7_14_centos

Site directory: /opt/nginx/myweb

Service port: 80

Publish user: nginx

Publish branch: master

Project URL: http://github.com/xxxx/cxy-webdemo-ui.git

2.2 Write Jenkinsfile

#!groovy

//Getcode
String srcUrl = "${env.srcUrl}".trim()
String branchName = "${env.branchName}".trim()

//Global
String workspace = "/opt/jenkins/workspace"
String targetHosts = "${env.targetHosts}".trim()
String credentialsId = "24982560-17fc-4589-819b-bc5bea89da77"
String serviceName = "${env.serviceName}".trim()
String port = "${env.port}".trim()
String user = "${env.user}".trim()
String targetDir = "${env.targetDir}".trim()

//Build
String buildShell = "${env.buildShell}".trim()

//代码检出
def GetCode(srcUrl,branchName,credentialsId) {
    checkout([$class: 'GitSCM', branches: [[name: "${pathName}"]],
        doGenerateSubmoduleConfigurations: false,
        extensions: [], submoduleCfg: [],
        userRemoteConfigs: [[credentialsId: "${credentialsId}",
        url: "${srcUrl}"]]])
}

//Pipeline

ansiColor('xterm') {
    node("master"){
        ws("${workspace}") {
            //Getcode
            stage("GetCode"){
                GetCode(srcUrl,branchName,credentialsId)
            }

            //Build
            stage("RunBuild"){
                sh """
                    ${buildShell}
                    cd dist && tar zcf ${serviceName}.tar.gz *
                    mkdir -p /srv/salt/${JOB_NAME}/
                    rm -fr /srv/salt/${JOB_NAME}/*
                    mv ${serviceName}.tar.gz /srv/salt/${JOB_NAME}/
                   """
            }

            //Deploy
            stage("RunDeploy"){
                sh """
                    salt ${targetHosts} cmd.run "rm -fr ${targetDir}/*"
                    salt ${targetHosts} cp.get_file "salt://${JOB_NAME}/${serviceName}.tar.gz ${targetDir}/${serviceName}.tar.gz makedirs=True "
                    salt ${targetHosts} cmd.run "cd ${targetDir} && tar zxf ${serviceName}.tar.gz "
                    salt ${targetHosts} cmd.run "chown ${user}:${user} ${targetDir} -R  "
                    salt ${targetHosts} cmd.run "ls -l "
                   """
            }
        }
    }
}

3. Build Test

Images illustrating the build and test steps are included in the original document.