Siapkan alur kerja ini untuk menerapkan aplikasi Anda secara otomatis ke produksi dan menyederhanakan proses rilis Anda.

Netlify adalah platform hosting web dan rangkaian alat lengkap untuk menerapkan dan mengelola aplikasi web di cloud.

Namun fitur-fiturnya jauh melampaui ini—fungsi tanpa servernya memungkinkan Anda menjalankan kode sisi server tanpa server khusus.

Jelajahi cara menyiapkan pipeline CI/CD untuk menerapkan REST API Node.js di Netlify menggunakan GitHub Actions.

Pipeline CI/CD Dengan Tindakan GitHub: Gambaran Umum

Pipeline Integrasi Berkelanjutan dan Pengiriman Berkelanjutan (CI/CD) adalah serangkaian proses otomatis berurutan yang dialami aplikasi perangkat lunak sebelum dikirim ke produksi.

Biasanya, pipeline CI/CD terdiri dari beberapa fase utama, termasuk fase sumber, build, pengujian, dan penerapan.

Meskipun mungkin untuk melakukan fase ini secara manual, mengotomatiskannya menawarkan beberapa keuntungan, termasuk:

  • Meminimalkan risiko kesalahan manusia.
  • Mempercepat proses rilis.
    • instagram viewer
  • Memastikan alur kerja yang konsisten untuk mengirimkan perangkat lunak berkualitas ke produksi.

Apa Itu Tindakan GitHub?

Tindakan GitHub adalah alat yang terintegrasi dalam GitHub yang menyediakan berbagai tindakan pra-bangun itu Anda dapat menggunakan untuk menentukan alur kerja sebagai kode secara langsung di repositori proyek Anda untuk mengotomatiskan CI/CD jaringan pipa.

Anda juga dapat membuat tindakan kustom yang sesuai dengan kebutuhan spesifik proyek Anda, memungkinkan Anda membangun dan menerapkan aplikasi ke produksi tanpa kerumitan. Salah satu keuntungan GitHub Actions adalah integrasinya yang mulus dengan fitur GitHub lainnya, seperti pull request dan pelacakan masalah.

Hal ini memungkinkan untuk memicu alur kerja berdasarkan peristiwa tertentu, seperti komit baru yang memastikan bahwa pipeline CI/CD Anda dipicu secara otomatis saat diperlukan.

Siapkan Proyek Node.js

Untuk memulai, Anda perlu membuat server web Ekspres. Untuk melakukannya, buat folder baru secara lokal dan ubah direktori di terminal Anda.

mkdir express-netlify
cd express-netlify

Selanjutnya, buat a package.json berkas menggunakan npm, Manajer Paket Node.

npm init -y

Terakhir, instal dependensi yang diperlukan dalam proyek.

npm instal express netlify-lambda tanpa server-http

Itu netlify-lambda package berfungsi sebagai server pengembangan lokal yang memfasilitasi pengujian fungsi tanpa server. tanpa server-http membantu mengadaptasi aplikasi Express.js ke format yang kompatibel dengan penangan fungsi tanpa server.

Netlify tidak memberikan dukungan asli untuk hosting dan menjalankan aplikasi backend lengkap. Sebaliknya, ia menawarkan fungsi tanpa server sebagai solusi alternatif untuk menangani fungsionalitas backend.

Fungsi ini mengelola logika sisi server, menangani permintaan API HTTP, dan menyajikan konten dinamis, menyediakan fungsionalitas seperti backend dalam paradigma tanpa server.

Anda dapat menemukan kode proyek ini di dalamnya repositori GitHub.

Buat Server Web Ekspres

Buat tiga folder: dist, fungsi, Dan src di direktori root folder proyek Anda.

Sebelum Anda mengatur server Express, buat kosong index.html berkas di dist map. File ini bertindak sebagai placeholder yang memungkinkan Netlify berhasil menerapkan aplikasi Express dan melayani rute API.

Sekarang, buat a src/aplikasi.js file dan tambahkan kode berikut:

const mengungkapkan = memerlukan("cepat");
const tanpa server = memerlukan("tanpa server-http");
const aplikasi = ekspres();
const router = ekspres. Perute();


router.dapatkan("/", (req, res) => {
 kirim ulang("Halo Dunia!")
});


aplikasi.penggunaan(`/.netlify/functions/app`, perute);
modul.ekspor = aplikasi;
modul.exports.handler = tanpa server (aplikasi);

Kode ini mendefinisikan server Express dengan satu rute untuk URL root yang menangani permintaan GET. Itu app.use fungsi mendaftarkan middleware rute dengan aplikasi Express, memastikan bahwa setiap permintaan HTTP dibuat ke jalur tersebut /.netlify/functions/app akan ditangani dengan benar oleh router, bahkan di lingkungan produksi.

Akibatnya, Jika Anda menambahkan titik akhir baru seperti /api/auth, itu akan dapat diakses di /.netlify/functions/app/api/auth. Terakhir, kode mengekspor aplikasi Express dan fungsi penangan tanpa server.

Hal ini memungkinkan pengujian server secara lokal dan memastikan Anda dapat menerapkannya sebagai fungsi tanpa server di Netlify.

Tentukan File Netlify.toml

Di direktori root, buat yang baru Netlify.toml file, dan tambahkan kode berikut.

[membangun]
 dasar = "/"
 perintah = "npm jalankan build"
 publikasikan = "/dist/"
 fungsi = "fungsi/"
[bangun.lingkungan]
 NODE_VERSION = "16"
[fungsi]
 external_node_modules = ["cepat"]
 node_bundler = "esbuild"
[[pengalihan]]
 kekuatan = benar
 dari = "/api/*"
 kondisi = 200
 ke = "/.netlify/functions/app/:splat"
[[pengalihan]]
 dari = "/*"
 kondisi = 200
 ke = "/index.html"

Kode menentukan pengaturan konfigurasi build dan deployment untuk aplikasi Express di Netlify. Ini mencakup pengaturan seperti direktori dasar, perintah build, direktori publikasi, dan direktori fungsi.

Selain itu, ini menentukan pengaturan redirect yang harus mengelola perutean permintaan API HTTP, memastikan mereka diarahkan dengan benar ke fungsi tanpa server Netlify.

Perbarui File Package.json

Buka package.json file dan tambahkan perintah ini ke objek skrip.

"skrip": {
"awal": "netlify-lambda melayani src",
"membangun": "netlify-lambda build src"
 },

Jalankan perintah berikut untuk membangun dan memulai aplikasi secara lokal.

npm jalankan build
npm jalankan mulai

Server akan dimulai pada port 9000. Anda dapat melanjutkan dan menguji API menggunakan Postman dengan mengajukan permintaan ke http://localhost: 9000/.netlify/fungsi/aplikasi

Terakhir, sebelum menyiapkan alur kerja Tindakan GitHub untuk mengotomatiskan penerapan di Netlify, buat repositori di GitHub, dan Dorong file proyek.

Terapkan Aplikasi Ekspres di Netlify

Pertama, terapkan API di Netlify sebelum mengonfigurasi alur kerja GitHub Actions. Ikuti langkah-langkah ini untuk menggunakan aplikasi Express di Netlify.

  1. Pergilah ke Netlify dan buat akun dan masuk ke Ringkasan halaman.
  2. Pilih dan klik pada Situs tab.
  3. Klik pada Impor dari Git tombol dan pilih GitHub sebagai platform penyedia Git. Netlify akan meminta Anda mengautentikasi dengan GitHub untuk memberinya akses ke akun Anda dan repositori proyek.
  4. Pilih repositori proyek Express dari daftar repositori yang ditampilkan.
  5. Setelah memilih repositori, Anda perlu mengonfigurasi pengaturan build untuk proses penerapan. Netlify menyederhanakan proses ini dengan mendeteksi secara otomatis teknologi yang digunakan untuk membangun aplikasi dan mengisi kolom terlebih dahulu dengan pengaturan build yang diperlukan. Dalam hal ini, perintah build, publikasikan, dan direktori fungsi.
  6. Terakhir, klik Terapkan situs tombol untuk menyelesaikan proses.

Buat Alur Kerja Tindakan GitHub

Klik pada Tindakan tab di repositori GitHub proyek Anda. Dalam Integrasi berkelanjutan bagian, pilih, dan klik Konfigurasikan Node.js alur kerja.

Dari editor GitHub, ganti nama file menjadi Netlify.yml, hapus kode alur kerja Node.js boilerplate, dan tambahkan kode di bawah ini:

nama:MembangunDanMenyebarkankeNetlify
pada:
dorongan:
pull_request:
pekerjaan:
membangun:
berjalan:ubuntu-22.04
Langkah:
-kegunaan:tindakan/checkout@v3
# (Bangun ke ./dist atau direktori lain... )
-nama:MenyebarkankeNetlify
kegunaan:nwtgck/[email protected]
dengan:
terbitkan-dir:'./dist'
cabang produksi:utama
token github:${{rahasia. GITHUB_TOKEN}}
menyebarkan-pesan:"Terapkan dari Tindakan GitHub"
aktifkan-tarik-permintaan-komentar:PALSU
aktifkan-komit-komentar:BENAR
timpa-tarik-permintaan-komentar:BENAR
env:
NETLIFY_AUTH_TOKEN:${{rahasia. NETLIFY_AUTH_TOKEN}}
NETLIFY_SITE_ID:${{rahasia. NETLIFY_SITE_ID}}
batas waktu-menit:1

Berikut ini rincian properti alur kerja:

  • pada: Peristiwa yang memicu tindakan dalam alur kerja ini.
  • pekerjaan: Menentukan kejadian yang harus dijalankan oleh Tindakan tertentu, yaitu: kejadian build dan deployment.
  • terus berjalan: lingkungan produksi host untuk tindakan tersebut.
  • Langkah: Menentukan serangkaian langkah yang terlibat untuk melakukan pekerjaan tertentu.
  • dengan: Menentukan argumen yang diperlukan agar Tindakan dapat berjalan dengan baik.
  • lingkungan: menentukan variabel lingkungan yang diperlukan untuk alur kerja.

Terakhir, komit pembaruan yang dilakukan pada file ini. GitHub harus secara otomatis memicu alur kerja.

Namun, build awal akan memicu error karena Anda perlu menambahkan variabel rahasia yang diperlukan oleh alur kerja: ID situs yang diterapkan dan token autentikasi Netlify. Kepala ke Anda Pengaturan situs di Netlify dan salin ID situs.

Untuk mendapatkan token autentikasi, klik Profil pengguna, lalu pilih Pengaturan pengguna pilihan dari jendela drop-down. Pada halaman pengaturan, pilih Aplikasi, dan klik Token akses baru untuk menghasilkan token autentikasi Anda.

Tambahkan dua variabel lingkungan sebagai NETLIFY_SITE_ID dan NETLIFY_AUTH_TOKEN ke bagian variabel lingkungan dan rahasia repositori di repositori GitHub Anda. Setelah melakukan perubahan ini, jalankan kembali alur kerja. Netlify akan secara otomatis menerapkan perubahan berikutnya yang Anda dorong menggunakan jalur pipa ini.

Silakan dan uji API menggunakan Postman dengan membuat permintaan ke URL ini: /.netlify/functions/app.

Mengonfigurasi Pipeline CI/CD Dengan Tindakan GitHub dan Netlify

Dengan memanfaatkan fungsi tanpa server Netlify, Anda dapat menerapkan aplikasi web lengkap yang mencakup fungsionalitas sisi klien dan backend di Netlify.

Selain itu, menyiapkan pipeline CI/CD untuk aplikasi dengan GitHub Actions menawarkan pendekatan yang disederhanakan untuk mengotomatiskan proses pembangunan dan penerapan. Ini memungkinkan Anda untuk menentukan alur kerja yang memastikan proses pengembangan yang lancar dan andal, mulai dari pembuatan ide dan berlanjut hingga tahap rilis.