Persediaan integrasi dan penempatan yang berterusan dengan CircleCi dan Coveralls

Integrasi berterusan (CI) dan penempatan berterusan (CD) adalah amalan pembangunan penting, terutamanya untuk pasukan. Terlepas dari saiz projek, kesilapan terdedah kepada berlaku. Walau bagaimanapun, jika proses CI/CD dengan ujian yang baik ditubuhkan, lebih mudah untuk mengesan dan menetapkan kesilapan ini.

Artikel ini akan menerangkan cara menyemak liputan ujian, menyediakan proses CI/CD menggunakan CircleCi dan Coveralls, dan menggunakan aplikasi VUE ke Heroku. Walaupun anda tidak menggunakan alat ini, konsep yang dibentangkan dalam artikel ini masih berguna untuk persediaan anda. Sebagai contoh, VUE boleh digantikan dengan kerangka JavaScript yang lain, dan prinsip -prinsip asas masih berlaku.

Sebelum anda memulakan, pelajari beberapa istilah:

• Integrasi Berterusan: Pemaju sering menghantar kod, melaksanakan pelbagai ujian dan membina proses sebelum menggabungkan atau menggunakan.
• Penyebaran berterusan: Amalan yang menjadikan perisian sentiasa digunakan untuk persekitaran pengeluaran.
• Liputan Ujian: Langkah yang digunakan untuk menggambarkan tahap ujian perisian. Satu program yang mempunyai liputan yang tinggi bermakna kebanyakan kod telah diuji.

Untuk memanfaatkan tutorial ini, anda harus memenuhi syarat -syarat berikut:

• Akaun CIRCLECI: Kami akan menggunakan CircleCi, platform CI/CD untuk penggunaan automatik (termasuk aplikasi ujian dan bangunan sebelum penggunaan).
• Akaun GitHub: Kami akan menyimpan projek dan ujian mereka di repositori.
• Akaun Heroku: Kami akan menggunakan platform Heroku untuk menggunakan dan memperluaskan aplikasi.
• Akaun Coveralls: Coveralls adalah platform untuk merakam dan memaparkan liputan kod.
• NYC: Kami akan menggunakan pakej ini untuk memeriksa liputan kod.

Repositori yang mengandungi contoh -contoh dalam artikel ini boleh didapati di GitHub.

Mulakan tetapan

Pertama, pasang NYC dalam folder Projek:

 <code>npm i nyc</code>

Seterusnya, kita perlu mengedit skrip dalam package.json untuk memeriksa liputan ujian. Jika kita cuba menyemak liputan semasa menjalankan ujian unit, kita perlu mengedit skrip ujian:

 <code>"scripts": { "test:unit": "nyc vue-cli-service test:unit", },</code>

Perintah ini mengandaikan bahawa kami menggunakan VUE untuk membina aplikasi dengan merujuk kepada vue-cli-service . Perintah ini perlu ditukar untuk mencerminkan rangka kerja yang digunakan dalam projek.

Jika kita cuba menyemak liputan secara berasingan, kita perlu menambah baris lain ke skrip:

 <code>"scripts": { "test:unit": "nyc vue-cli-service test:unit", "coverage": "nyc npm run test:unit" },</code>

Sekarang kita boleh menyemak liputan menggunakan arahan terminal:

 <code>npm run coverage</code>

Seterusnya, kami akan memasang coveralls, yang bertanggungjawab untuk melaporkan dan memaparkan liputan:

 <code>npm i coveralls</code>

Sekarang, kita perlu menambah coveralls sebagai skrip lain dalam package.json . Skrip ini membantu kami menyimpan laporan liputan ujian ke coveralls.

 <code>"scripts": { "test:unit": "nyc vue-cli-service test:unit", "coverage": "nyc npm run test:unit", "coveralls": "nyc report --reporter=text-lcov | coveralls" },</code>

Mari pergi ke papan pemuka Heroku dan daftar aplikasi kami di sana. Kami akan menggunakan Heroku untuk menjadi tuan rumah.

Kami akan menggunakan CircleCi untuk mengautomasikan proses CI/CD kami. Teruskan melawat papan pemuka CircleCi untuk menubuhkan projek kami.

Kami boleh menavigasi ke projek kami melalui tab Projek di sidebar CircleCi, di mana kami harus melihat senarai projek dalam organisasi GitHub kami. Klik butang set Projek. Ini akan membawa kami ke halaman baru yang bertanya sama ada kami mahu menggunakan konfigurasi yang ada. Kami mempunyai konfigurasi kita sendiri, jadi mari kita pilih pilihan "Gunakan Konfigurasi Sedia Ada".

Selepas itu, kami akan pergi ke saluran paip yang dipilih. Sangat bagus! Kami telah melakukan kerja menyambungkan repositori kami ke CircleCi. Sekarang, mari tambahkan pembolehubah persekitaran kita ke projek CircleCi kami.

Untuk menambah pembolehubah, kita perlu menavigasi ke tetapan projek.

Tetapan projek mempunyai tab Pembolehubah Alam Sekitar di bar sisi. Di sinilah kita mahu menyimpan pembolehubah.

Pembolehubah yang diperlukan untuk tutorial ini:

• Nama Aplikasi Heroku: HEROKU_APP_NAME
• Kunci API Heroku kami: HEROKU_API_KEY
• Token repositori coveralls: COVERALLS_REPO_TOKEN

Kunci API Heroku boleh didapati di bahagian akaun papan pemuka Heroku.

Token repositori coveralls terletak di dalam akaun coveralls repositori. Pertama, kita perlu menambah repositori ke coveralls dengan memilih repositori GitHub dari senarai repositori yang ada.

Sekarang kami telah menambah repositori ke coveralls. Kita boleh mendapatkan tanda repositori dengan mengklik pada repositori.

Mengintegrasikan CircleCi

Kami telah menghubungkan Circle Ci ke repositori GitHub kami. Ini bermakna bahawa CircleCi akan diberitahu apabila perubahan atau tindakan berlaku di repositori GitHub. Apa yang perlu kita lakukan sekarang ialah melakukan langkah -langkah untuk memaklumkan CircleCi tentang tindakan yang kita mahu ia dijalankan selepas mengesan perubahan repositori.

Dalam folder root projek tempatan, mari buat folder yang dipanggil .circleci dan buat fail yang dipanggil config.yml di dalamnya. Di sinilah semua operasi CircleCi terletak.

Berikut adalah kod yang terkandung dalam fail:

 Versi: 2.1
Orbs:
  nod: circleCi/[dilindungi e -mel] # node orb
  Heroku: CircleCi/[dilindungi e -mel] # heroku orb
  coveralls: coveralls/[dilindungi e -mel] # coveralls orb
Aliran Kerja:
  Heroku_deploy:
    Pekerjaan:
      - membina
      -Heroku/Deploy-Via-Git: # Gunakan keperluan pekerjaan yang telah dikonfigurasikan:
          - membina
        Penapis:
          Cawangan:
            Hanya: Guru
Pekerjaan:
  Membina:
    Docker:
      - Imej: CircleCi/Node: 10.16.0
    Langkah:
      - checkout
      - memulihkan_cache:
        Key: Dependency-Cache-{{checksum "Package.json"}}
      - lari:
        Nama: Install-Npm-Dependencies
        Perintah: NPM Pasang
      - SAVE_CACHE:
        Key: Dependency-Cache-{{checksum "Package.json"}}
        Laluan:
          - ./node_modules
      - Jalankan: # Jalankan Nama Ujian: Ujian
        Perintah: Ujian Jalan NPM: Unit
      - Jalankan: # Run Code Liputan Laporan Nama: Pelindung Kod
        Perintah: NPM Run Coveralls
      - Run: # Run Build Name: Build
        Perintah: NPM Run Build
      # - coveralls/muat naik

Ini adalah sekeping kod yang besar. Mari kita pecahkan sehingga kita tahu apa yang dilakukannya.

Bola

 Orbs:
  nod: circleCi/[dilindungi e -mel] # node orb
  Heroku: CircleCi/[dilindungi e -mel] # heroku orb
  coveralls: coveralls/[dilindungi e -mel] # coveralls orb

Orbs adalah pakej sumber terbuka yang memudahkan integrasi perisian dan pakej merentasi projek. Dalam kod kami, kami menunjukkan bola untuk proses CI/CD. Kami merujuk Node Orb kerana kami menggunakan JavaScript. Kami memetik Heroku kerana kami menggunakan aliran kerja Heroku untuk penggunaan automatik. Akhirnya, kami merujuk perlindungan Orb kerana kami merancang untuk menghantar hasil liputan kepada coveralls.

Heroku dan orbs coverall adalah bola luaran. Jadi jika kita menjalankan aplikasi sekarang melalui ujian, ini akan mencetuskan kesilapan. Untuk menghapuskan kesilapan, kita perlu menavigasi ke halaman Tetapan Organisasi dalam akaun CircleCi kami.

Kemudian, mari kita menavigasi ke tab Keselamatan dan biarkan bola tidak sah:

Aliran kerja

 Aliran Kerja:
  Heroku_deploy:
    Pekerjaan:
      - membina
      -Heroku/Deploy-Via-Git: # Gunakan keperluan pekerjaan yang telah dikonfigurasikan:
          - membina
        Penapis:
          Cawangan:
            Hanya: Guru

Aliran kerja digunakan untuk menentukan koleksi pekerjaan dan menjalankannya secara berurutan. Bahagian kod ini bertanggungjawab untuk hosting automatik. Ia memberitahu CircleCi untuk membina projek itu dan kemudian menggunakannya. requires cara kerja heroku/deploy-via-git perlu dibina-lengkap-bermakna ia akan menunggu binaan selesai sebelum penggunaan.

Operasi

 Pekerjaan:
  Membina:
    Docker:
      - Imej: CircleCi/Node: 10.16.0
    Langkah:
      - checkout
      - memulihkan_cache:
          Key: Dependency-Cache-{{checksum "Package.json"}}
      - lari:
          Nama: Install-Npm-Dependencies
          Perintah: NPM Pasang
      - SAVE_CACHE:
          Key: Dependency-Cache-{{checksum "Package.json"}}
          Laluan:
            - ./node_modules

Pekerjaan adalah koleksi langkah. Dalam coretan kod ini, kami memulihkan kebergantungan yang dipasang semasa proses binaan sebelumnya melalui kerja restore_cache .

Selepas itu, kami memasang kebergantungan yang tidak dicapai dan kemudian simpannya supaya kami tidak perlu memasang semula mereka semasa binaan seterusnya.

Kami kemudian memberitahu CircleCi untuk menjalankan ujian yang kami tulis untuk projek itu dan periksa liputan ujian projek. Perhatikan bahawa kebergantungan cache membuat pembentukan seterusnya lebih cepat kerana kami menyimpan kebergantungan supaya tidak perlu memasangnya semasa binaan seterusnya.

Muat naik liputan kod kami ke coveralls

 - Jalankan: # Jalankan Nama Ujian: Ujian
    Perintah: Ujian Jalan NPM: Unit
  - Jalankan: # Run Code Liputan Laporan Nama: Pelindung Kod
    Perintah: NPM Run Coveralls
# - coveralls/muat naik

Itulah keajaiban coveralls kerana kita sebenarnya menjalankan ujian unit di sini. Ingat ketika kami menambah perintah nyc dalam test:unit fail package.json ? Terima kasih, ujian unit kini menyediakan liputan kod.

Ujian unit juga menyediakan liputan kod, jadi kami akan memasukkannya dalam laporan liputan. Itulah sebabnya kami memanggil arahan di sini.

Akhirnya, kod menjalankan skrip coveralls yang kami tambah dalam package.json . Skrip ini menghantar laporan liputan kami ke coveralls.

Anda mungkin menyedari bahawa garis coveralls/upload dikomentari. Ini pada asalnya merupakan watak akhir proses, tetapi pada akhirnya ia menjadi halangan atau kesilapan dalam istilah pemaju. Saya mengulasnya kerana ia boleh menjadi kad Trump pemaju lain.

Menyatukan semuanya

Lihat! Aplikasi kami, termasuk integrasi dan penempatan berterusan!

Integrasi dan penempatan yang berterusan dapat membantu dalam banyak kes. Contoh yang sama adalah apabila perisian berada dalam fasa beta. Pada peringkat ini, banyak penyerahan akan berlaku untuk banyak pembetulan. Sebagai pemaju, perkara terakhir yang saya mahu lakukan ialah menjalankan ujian secara manual dan menggunakan permohonan saya secara manual selepas setiap perubahan kecil. Ughhh. Saya benci pengulangan!

Saya tidak tahu bagaimana keadaan anda, tetapi saya sudah biasa dengan CI dan CD untuk seketika, tetapi saya sentiasa mencari cara untuk meletakkannya kerana mereka terdengar sama ada terlalu keras atau terlalu memakan masa. Tetapi sekarang anda telah melihat persediaan yang agak mudah dan manfaat yang datang dengannya, semoga anda akan terinspirasi dan bersedia untuk mencuba projek anda sendiri.

Atas ialah kandungan terperinci Persediaan integrasi dan penempatan yang berterusan dengan CircleCi dan Coveralls. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!