jenkins menggunakan vue ke docker

Jenkins ialah alat penyepaduan berterusan (CI) dan penghantaran berterusan (CD) yang memainkan peranan penting dalam proses pembangunan perisian. Docker ialah teknologi kontena yang popular yang boleh menggunakan aplikasi dengan mudah.

Dalam artikel ini, kami akan memperkenalkan cara untuk menggunakan aplikasi Vue ke dalam bekas Docker menggunakan Jenkins. Kami akan membimbing anda melalui proses ini langkah demi langkah.

1. Mengkonfigurasi Jenkins

Mula-mula, anda perlu memasang beberapa pemalam yang diperlukan melalui antara muka Jenkins. Pergi ke "Urus Jenkins" dan pilih "Pengurusan Plugin", kemudian pilih tab "Pemalam Pilihan". Pasang pemalam berikut di sini:

• Pemalam Docker
• pemalam NodeJS
• pemalam Penerbit HTML

Mulakan semula Jenkins selepas pemasangan.

2. Buat aliran kerja Jenkins

Seterusnya, kami akan mencipta aliran kerja Jenkins untuk membina dan menggunakan aplikasi Vue. Ikut langkah di bawah:

• Pergi ke halaman utama Jenkins dan pilih "Tugas Baharu".
• Masukkan nama tugas dan pilih jenis "Pipeline".
• Dalam bahagian "Pilihan Projek Lanjutan", pilih sintaks "Gunakan Groovy DSL" dan masukkan kod berikut dalam medan "Skrip DSL":

def app

pipeline {
  agent {
    docker {
      image 'node'
    }
  }
  stages {
    stage('Build') {
      steps {
        sh 'npm install'
        sh 'npm run build'
      }
    }
    stage('Dockerize') {
      steps {
        sh 'docker build -t my-vue-app .'
        script {
          app = docker.build("my-vue-app:${env.BUILD_ID}")
        }
      }
    }
    stage('Publish') {
      steps {
        script {
          app.push()
        }
      }
    }
  }
  post {
    always {
      htmlpublisher target : [
        allowMissing : false,
        alwaysLinkToLastBuild : true,
        keepAll : true,
        reportDir : 'dist',
        reportFiles : 'index.html',
        reportName : 'HTML Report'
      ]
    }
  }
}

• Ini Skrip Jenkins Mengandungi tiga langkah aliran kerja: Bina, Dockerize dan Lepaskan. Di sini, kami mula-mula melaksanakan langkah binaan menggunakan imej "nod" dan jalankan arahan "npm install" dan "npm run build" dalam langkah itu. Perintah ini membina aplikasi Vue dan menukarkannya kepada fail HTML, CSS dan JS statik.
  Dalam fasa Dockerize, kami membina imej Docker yang menggunakan fail statik yang dijana dalam langkah sebelumnya. Kami juga melabelkan imej dengan versi menggunakan pembolehubah persekitaran "BUILD_ID".
• Akhir sekali, dalam langkah "terbitkan", kami menolak imej Docker ke dalam Docker Hub. Dalam contoh ini, kami tidak menetapkan kelayakan Docker. Dalam persekitaran pengeluaran, anda perlu menyediakan bukti kelayakan Docker untuk menyambung kepada perkhidmatan pengehosan Docker.

3. Mengkonfigurasi Docker

Sebelum menggunakan aplikasi Vue anda pada bekas Docker, anda perlu memasang Docker dan docker-compose pada pelayan anda. Ikut langkah ini:

• Muat turun dan pasang Docker.
• Muat turun dan pasang docker-compose.

Selepas memasang Docker dan docker-compose, anda kini perlu menggunakan imej Docker yang baru dibina dalam Jenkins ke sistem. Anda boleh menggunakan fail karang docker berikut untuk menentukan perkhidmatan yang menggunakan imej yang ditolak ke Docker Hub daripada tugas Jenkins di atas.

version: '3'
services:
  web:
    image: my-vue-app
    ports:
      - "80:80"
    restart: always

Simpan fail ini sebagai docker-compose.yml dan muat naik ke pelayan. Mulakan perkhidmatan menggunakan Docker Compose:

docker-compose up -d

Ini akan mula menggunakan aplikasi Vue. Kini anda boleh mengakses aplikasi daripada pelayar web anda (ia adalah pada port 80 secara lalai). Dengan cara ini, anda menggunakan aplikasi Vue ke dalam bekas Docker melalui Jenkins.

Kesimpulan

Dalam artikel ini, kami memperkenalkan cara untuk menggunakan aplikasi Vue ke dalam bekas Docker. Menggunakan alat penyepaduan dan penggunaan berterusan Jenkins, anda boleh membina dan menggunakan aplikasi Vue dengan mudah. Kami juga membincangkan cara menggunakan Docker Compose untuk mengehoskan bekas yang dijalankan pada pelayan. Mari mulakan membina dan menggunakan aplikasi Vue menggunakan Jenkins dan Docker.

Atas ialah kandungan terperinci jenkins menggunakan vue ke docker. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!