Cara menggunakan React dan Jenkins untuk membina aplikasi bahagian hadapan untuk penyepaduan berterusan dan penggunaan berterusan

Cara menggunakan React dan Jenkins untuk membina aplikasi bahagian hadapan dengan penyepaduan berterusan dan penggunaan berterusan

Pengenalan:
Dalam pembangunan Internet hari ini, penyepaduan berterusan dan penggunaan berterusan telah menjadi cara penting bagi pasukan pembangunan untuk meningkatkan kecekapan dan memastikan produk kualiti. Sebagai rangka kerja bahagian hadapan yang popular, React, digabungkan dengan Jenkins, alat penyepaduan berterusan yang berkuasa, boleh memberikan kami penyelesaian yang mudah dan cekap untuk membina aplikasi bahagian hadapan untuk penyepaduan berterusan dan penggunaan berterusan. Artikel ini akan memperkenalkan secara terperinci cara menggunakan React dan Jenkins untuk penyepaduan berterusan dan cara melaksanakan penggunaan automatik melalui Jenkins dan memberikan contoh kod yang sepadan.

1. Langkah penyepaduan berterusan

1. Pasang Jenkins
   Muat turun dan pasang Jenkins, pilih kaedah pemasangan yang sesuai mengikut platform, dan pastikan Jenkins berjalan dengan jayanya.
2. Buat Kerja Jenkins
   Buat Kerja baharu dalam Jenkins, pilih "Bina Projek Perisian Gaya Percuma", dan isikan nama Pekerjaan.
3. Konfigurasikan pengurusan kod sumber
   Dalam halaman konfigurasi Kerja, pilih alat pengurusan kod sumber yang berkaitan, seperti Git atau SVN, dan konfigurasikan alamat gudang, nama pengguna dan kata laluan, dsb.
4. Konfigurasikan pencetus binaan
   Dalam halaman konfigurasi Kerja, konfigurasikan pencetus binaan Anda boleh memilih untuk mencetuskan binaan dengan kerap atau apabila kod berubah.
5. Konfigurasikan langkah binaan
   Dalam halaman konfigurasi Kerja, konfigurasikan langkah binaan. Untuk aplikasi React, kita boleh menggunakan alat seperti npm atau yarn untuk membina. Dalam bahagian "Bina" tambahkan langkah untuk melaksanakan arahan, seperti menjalankan arahan "pemasangan benang" dan "bangunan benang" dalam cangkerang.
6. Simpan dan laksanakan Kerja
   Selepas konfigurasi selesai, simpan dan laksanakan Kerja dan Jenkins akan secara automatik menarik kod, memasang kebergantungan dan membina projek.

2. Langkah-langkah penggunaan berterusan

1. Pasang pemalam Jenkins
   Pasang pemalam yang sepadan dalam Jenkins, seperti "Terbitkan Melalui SSH" untuk menyokong penggunaan jauh.
2. Konfigurasikan maklumat pelayan
   Dalam konfigurasi global Jenkins, konfigurasikan maklumat berkaitan pelayan jauh, termasuk nama hos, nama pengguna, kata laluan, dsb.
3. Ubah suai langkah binaan
   Dalam halaman konfigurasi Kerja, ubah suai langkah binaan dan tambahkan langkah penggunaan. Gunakan pemalam "Terbitkan Melalui SSH" untuk mengkonfigurasi laluan ke pelayan jauh dan kaedah muat naik fail. Sebagai contoh, anda boleh menggunakan arahan SCP untuk memuat naik produk binaan ke direktori yang ditentukan pada pelayan.
4. Simpan dan laksanakan Kerja
   Selepas konfigurasi selesai, simpan dan laksanakan Kerja, Jenkins akan membina projek secara automatik dan menggunakan produk binaan ke pelayan jauh.

3 Contoh Kod
Berikut ialah contoh kod untuk aplikasi bahagian hadapan dengan penyepaduan berterusan dan penggunaan berterusan yang dibina menggunakan React dan Jenkins:

// .jenkinsfile

pipeline {
    agent any
    stages {
        stage('Clone') {
            steps {
                git 'https://github.com/your-repo.git'
            }
        }
        stage('Build') {
            steps {
                sh 'yarn install'
                sh 'yarn build'
            }
        }
        stage('Deploy') {
            steps {
                publishOverSSH server: 'your-server', 
                               credentialsId: 'your-credential', 
                               transfers: [transferSet(sourceFiles: 'dist/*', 
                               removePrefix: 'dist', remoteDirectory: '/var/www/html')]
            }
        }
    }
}

Dalam kod di atas, proses tiga peringkat ditakrifkan dengan menggunakan Pemalam saluran paip Jenkins Saluran paip sedang mengklonkan kod, membina dan menggunakan. Dalam fasa binaan, benang digunakan untuk memasang dan membina kebergantungan, dan dalam fasa penggunaan, pemalam "Publish Over SSH" digunakan untuk memuat naik produk binaan ke laluan pelayan yang ditentukan.

Kesimpulan:
Melalui pengenalan artikel ini, kami mempelajari cara menggunakan React dan Jenkins untuk membina aplikasi bahagian hadapan untuk penyepaduan berterusan dan penggunaan berterusan. Dalam penyepaduan berterusan, kami boleh mengkonfigurasi Jenkins Job untuk menarik kod secara automatik, memasang kebergantungan dan membina projek. Dalam penggunaan berterusan, kami boleh menggunakan pemalam Jenkins untuk menggunakan produk binaan secara automatik ke pelayan jauh. Dengan cara ini, kami boleh meningkatkan kecekapan dan kualiti pembangunan bahagian hadapan dengan sangat baik, membolehkan pasukan memberi lebih tumpuan kepada pembangunan perniagaan, sambil bertindak balas dengan cepat dan menyelesaikan masalah untuk memberikan pengalaman pengguna yang lebih baik.

Atas ialah kandungan terperinci Cara menggunakan React dan Jenkins untuk membina aplikasi bahagian hadapan untuk penyepaduan berterusan dan penggunaan berterusan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!