Cara membangun dan menerapkan aplikasi Angular langsung dari GitHub | Oleh Aurélien Leloup | Juni 2022

Programming

[ad_1]
Halo Sob di suratpembaca.web.id. Siang ini kita akan membahas tentang Linux yakni Cara membangun dan menerapkan aplikasi Angular langsung dari GitHub | Oleh Aurélien Leloup | Juni 2022

.

Semoga postingan mengenai Cara membangun dan menerapkan aplikasi Angular langsung dari GitHub | Oleh Aurélien Leloup | Juni 2022

bisa memberikan faedah bagi Teman-teman semua. Yuk baca artikel ini
hingga tuntas.

CI / CD tanpa kerumitan dengan tindakan GitHub dan halaman GitHub

Gambar oleh penulis

Saat ini, memiliki alur kerja yang andal sangat penting untuk integrasi dan penerapan yang berkelanjutan. Baik Anda bekerja sendiri atau sebagai bagian dari tim, memiliki kemampuan untuk mengotomatiskan konstruksi, peninjauan, dan penerapan proyek Anda dapat menghemat banyak waktu. Ada begitu banyak pilihan di pasar untuk membangun CI untuk Angular sehingga tidak mungkin untuk mencakup semuanya.

Pada artikel ini, kami hanya akan fokus untuk menyelesaikan semuanya menggunakan alat yang disediakan oleh GitHub. Jika Anda sudah menggunakan GitHub untuk menyalin proyek Anda, Anda mungkin tertarik untuk menggunakannya secara maksimal.

Saya akan membuat dan menjalankan program meteorologi sederhana yang saya gunakan di artikel sebelumnya.

Untuk menginisialisasi alur kerja CI Anda, cukup buka beranda repositori Anda dan klik Tindakan.

Seperti yang Anda lihat, GitHub menawarkan beberapa alur kerja yang telah ditentukan untuk Anda mulai, tergantung pada sifat kode di repositori Anda. Kami membuat alur kerja secara manual, sehingga kami dapat mengomentari setiap langkah. (File final lengkap disediakan di akhir artikel)

Setelah mengklik “Siapkan alur kerja Anda sendiri”, Anda akan menerima alur kerja hello world awal. Alur kerja sebagai .yml File memiliki komentar pada sintaks khusus dari setiap baris yang menjelaskan mengapa ada di sini. Kami dapat menyimpan file apa adanya dan mengklik komit.

Sekarang, jika Anda kembali ke tab tindakan, alur kerja Anda harus telah berhasil dijalankan.

File konfigurasi CI sekarang disimpan di proyek Anda di bawah ini/.github Map

Pertama-tama kita harus memutuskan kapan alur kerja akan dimulai. Saya memutuskan untuk mengaktifkannya setiap kali ada dorongan master Cabang. Bagi saya, itu masuk akal karena alur kerja saya seharusnya membangun dan menjalankan proyek saya. Anda dapat mengaktifkan traksi untuk setiap permintaan, atau bahkan menggunakan ekspresi reguler untuk mencocokkan nama cabang.

Awal file saya adalah sebagai berikut:

Selanjutnya, mari kita bersiap-siap untuk hal yang nyata. kita butuh:

  • Periksa kode sumber proyek
  • Luncurkan node.js
  • Instal dependensi
  • jobs Adalah cara untuk memulai bisnis. Alur kerja dapat memiliki pekerjaan sebanyak yang Anda inginkan.
  • build-and-deploy Nama pekerjaannya adalah Anda benar-benar dapat meletakkan apa pun di sini.
  • runs-on Di sinilah Anda memutuskan untuk menyiapkan platform untuk menjalankan pekerjaan Anda. Saya menggunakan Ubuntu, tetapi karena kami akan menggunakan lebih banyak npm Kita bisa memilih apa saja di sini.
  • uses Ini adalah cara untuk memasukkan tindakan eksternal
  • run Cukup jalankan perintah

Saya memulai Node.js menggunakan yang disediakan cache Parameter. Ini meregangkan dan mengambil dependensi ini, memungkinkan waktu pembuatan yang lebih singkat. Penting untuk dicatat bahwa itu tidak meregangkan keseluruhan node_modules Folder Jadi, saya bisa menggunakannya npm ci Memerintah

Dengan meluncurkan, kami sekarang dapat melakukan beberapa pemeriksaan untuk memastikan kualitas proyek baik sebelum benar-benar dibangun. Untuk contoh ini, kami melakukan pemeriksaan yang paling umum: pelapisan proyek dan pengujian unit yang berjalan.

Dengan menginstal Node, menjadi sangat sederhana:

Anda harus menjalankan perintah ini setidaknya sekali di mesin lokal Anda sebelum Anda dapat menyelesaikan proyek di CI. Meluncurkan konfigurasi lint dan menambahkan file yang diperlukan ke proyek Anda.

Untuk menguji program saya, Anda mungkin memperhatikan bahwa saya tidak menggunakannya secara langsungnpm run test Perintah yang ada dalam konfigurasi default. Saya malah membuat skrip khusus untuk CI:

  • Saya mengubah browser ke versi tanpa kepala Chrome. Tidak perlu membuka jendela browser untuk CI, karena kita tetap tidak bisa melihatnya.
  • aku menyiapkan watch Atribusi salah Jika Anda tidak melakukan ini, perintah tidak akan pernah berakhir karena mencari perubahan kode. Pekerjaan Anda selalu gagal melalui timeout.
  • Saya juga menambahkan code-coverage Fitur untuk menampilkan laporan cakupan kode.

Proyek kami melewati semua ulasan. Bagus sekali! Sekarang saatnya untuk membangunnya.

Ada langkah tambahan opsional sebelum melakukan ini. Dalam proyek contoh saya, saya menggunakan API cuaca melalui kunci API yang diberikan kepada saya. Tetapi jika Anda pergi ke saya environment.prod.ts File, di mana kuncinya seharusnya, adalah apa yang Anda lihat:

Kuncinya tidak ada. Bahkan jika API gratis, mengungkapkan rahasia dalam repositori adalah hal yang buruk, dan saya ingin menghormati prinsip itu. Tapi sekarang bagaimana kita membangun proyek?

Pertama-tama kita harus menyimpan kunci asli di tempat yang aman. Buka pengaturan repositori Anda dan klik Rahasia.

Kemudian, Anda dapat menambahkan repositori baru. Beri nama yang jelas karena Anda akan membutuhkannya nanti.

Kembali ke file alur kerja, kita perlu menambahkan langkah yang menggantikan nilai placeholder yang sesuai. Ada banyak langkah untuk menawarkan ini di pasar. Saya pergi untuk yang ini

Di file periferal saya, saya dengan hati-hati memasukkan nilai saya ke dalam tanda kurung untuk membuat plugin lebih mudah ditemukan. Pada kasus ini, SECRET_API_KEY Apakah nama token yang akan diganti dan API_KEY ID adalah rahasia.

Untuk membangun proyek, saya hanya dapat melakukan hal berikut:

Saya membuat skrip khusus untuk CI dengan menambahkan — deploy-url Parameter. Ini akan masuk akal pada langkah berikutnya.

Halaman GitHub menyediakan hosting tetap langsung dari GitHub. Ini bagus untuk halaman pribadi, dokumen proyek, atau bahkan menghosting aplikasi Angular kecil.

Kita perlu membuat cabang yang menyimpan versi proyek yang dikompilasi. Direktori ini akan menjadi cerminan langsung dari apa yang disematkan di halaman GitHub. Anda dapat menyebutnya dengan cara apa pun yang Anda inginkan.

Namun, gh-pages Apakah nama standar dikenali oleh GitHub. Setelah membuat dan menekan cabang ini, Anda dapat memeriksa apakah penerapan berhasil.

Dalam pengaturan repositori Anda, klik halaman. Cabang gh-pages Seharusnya secara otomatis terdeteksi dan disebarkan.

Saya menggunakan nama domain khusus untuk meng-host halaman GitHub saya, saya tidak akan menjelaskan bagaimana melakukannya dalam tutorial ini. URL default akan terlihat seperti ini http://<github_username>.github.io/<repository_name>

Proyek Anda akan ditempatkan di subfolder. Itu sebabnya deploy-url Fitur yang kita atur sebelumnya penting. Konstruksi harus melayani aset dengan cara yang benar.

Mengatakan situs Anda telah diterbitkan tetapi belum selesai! Jika cabang dari master, Maka Anda hanya memiliki kode sumber aplikasi Angular. Tidak bisa digunakan seperti ini, kita harus menyebarkan konstruksi yang kita hasilkan pada langkah sebelumnya.

Mari kembali ke file alur kerja dan tambahkan langkah terakhir.

Tindakan ini hanya menyalin isinya dist Folder ke direktori yang kita buat sebelumnya akan secara otomatis mulai digunakan di halaman GitHub. Anda dapat melihatnya di laporan CI.

Selamat! Anda sekarang memiliki CI sederhana untuk proyek Angular Anda serta versi yang diterapkan untuk tampilan.

Berikut adalah file alur kerja terakhir. Di sini Anda dapat mengakses repositori lengkap.

Terima kasih telah membaca artikel ini sampai akhir! Saya baru-baru ini mulai meninjau fitur GitHub Actions. Saya kagum pada betapa indah dan sederhananya itu.

Oleh karena itu, saya akan terus menggunakannya dan mendorong Anda untuk melakukan hal yang sama.

Itu tadi pembahasan mengenai Cara membangun dan menerapkan aplikasi Angular langsung dari GitHub | Oleh Aurélien Leloup | Juni 2022

, terimakasih telah mengunjungi website ini, mudah-mudahan informasinya ada manfaatnya ya.

[ad_2]

Source link

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan.