Cara Deploy Project Website ke Internet Menggunakan Netlify - Perwira Learning Center

Apa Itu Netlify?

Netlify adalah sebuah platform hosting berbasis cloud yang dirancang untuk mempermudah proses deploy website dan aplikasi web. Platform ini sangat populer di kalangan developer karena menyederhanakan alur kerja, dari tahap pengembangan hingga publikasi. Netlify sangat cocok untuk proyek berbasis statis seperti HTML, CSS, dan JavaScript, serta berbagai framework modern seperti React, Vue.js, Angular, Gatsby, dan Hugo.

Keunggulan utama Netlify terletak pada fitur continuous deployment (deploy otomatis). Fitur ini memungkinkan Netlify terintegrasi langsung dengan repository Git seperti GitHub, GitLab, atau Bitbucket. Artinya, setiap kali Anda melakukan perubahan kode dan mengunggahnya (push) ke repository, Netlify secara otomatis akan membangun ulang dan memperbarui website Anda. Proses ini menghilangkan langkah-langkah manual yang memakan waktu.

Selain itu, Netlify menawarkan berbagai fitur menarik lainnya, seperti pemberian sertifikat SSL (HTTPS) secara otomatis dan gratis, dukungan untuk custom domain, hingga fitur drag and drop deploy untuk pengguna yang ingin cara paling sederhana.

Cara Deploy Projek di Netlify

Netlify menawarkan dua metode utama untuk mendeploy projek: secara otomatis melalui Git dan secara manual dengan drag and drop. Berikut langkah-langkah untuk keduanya:

A. Metode Deploy Otomatis dari Repository Git (Metode yang Direkomendasikan)

Metode ini adalah cara terbaik untuk mengelola website profesional karena menghubungkan kode Anda langsung dengan proses deploy.

1.  Buka browser dan kunjungi situs netlify.com. 

2. Klik tombol Sign up untuk mendaftar. Untuk mendaftar dapat menggunakan email atau langsung dengan akun GitHub, GitLab, atau Bitbucket.

3.  Setelah berhasil Sign Up akan masuk ke halaman dashboard

4. klik tombol "Add new project" dan pilih "Import an existing project".

5. Akan ada beberapa pilihan dan disini saya akan menggunakan Github.

6. Cari dan pilih repository (projek) yang ingin di deploy dari daftar yang muncul.

7. Masukkan nama projeknya.

8.  Netlify akan secara otomatis mendeteksi build yang umum digunakan. Tahap ini dapat dibiarkan atau disesuaikan jika diperlukan.

9.  Setelah yakin dengan pengaturannya, klik tombol "Deploy [nama projek]".

10.  Tunggu beberapa saat hingga proses build dan deploy selesai. Setelah selesai, akan diarahkan ke halaman Site overview. Klik domain tersebut untuk melihat website yang sudah online.

11. Berikut contoh hasil projek yang sudah di deploy

B. Metode Deploy Manual dengan Drag and Drop

Metode ini sangat mudah dan cocok untuk proyek sederhana atau bagi Anda yang ingin mencoba Netlify dengan cepat.

1.  Siapkan Folder Projek. Pastikan semua file website Anda (HTML, CSS, JS, aset gambar) sudah berada dalam satu folder.

2.  Buka Dashboard Netlify.

3.  Di halaman dashboard, Anda akan melihat area yang bertuliskan "Drag and drop your site folder here". Cukup seret folder projek Anda dan lepaskan di area tersebut.

4.  Netlify akan langsung mengunggah dan mempublikasikan website Anda. Dalam beberapa detik, website Anda akan online dengan domain acak Netlify. Metode ini tidak memerlukan konfigurasi apapun.

5. Untuk mengganti domain project pada bagian project configuration klik "Change project name".

6. Masukkan nama project lalu klik "Save".

7. Jika sudah maka domain project akan terganti sesuai nama yang kita masukkan.

8. Klik domain tersebut untuk melihat website yang sudah online. 

Hasil akhir dari kedua metode tersebut adalah website Anda yang dapat diakses secara publik melalui internet.

Fitur Unggulan Lainnya di Netlify

Selain fitur deploy yang telah disebutkan, Netlify juga memiliki sejumlah fitur canggih yang membuatnya unggul:

1. Fungsi Serverless (Netlify Functions): Netlify memungkinkan Anda untuk menambahkan fungsionalitas backend tanpa harus menjalankan server sendiri. Anda dapat menulis fungsi dalam JavaScript/TypeScript dan Netlify akan menjalankannya sesuai permintaan. Ini sangat berguna untuk membuat API, memproses formulir, atau berinteraksi dengan database.
2. Pratinjau Deploy (Deploy Previews): Untuk setiap pull request yang dibuat di repository Git Anda, Netlify secara otomatis akan membuat preview dengan URL unik. Fitur ini sangat memudahkan tim untuk meninjau dan menguji perubahan sebelum kode tersebut digabungkan ke cabang utama.
3. Pengelolaan Formulir (Form Handling): Netlify dapat secara otomatis menangkap data dari formulir di website statis Anda. Anda tidak perlu menulis kode backend untuk memproses formulir; Netlify akan menyediakan antarmuka untuk melihat data yang dikirim, serta dapat meneruskannya ke layanan email atau webhook lain.
4. Netlify CMS: Sebuah sistem manajemen konten (Content Management System) berbasis Git yang memungkinkan pengguna non-teknis untuk mengedit konten website (misalnya, halaman blog) tanpa harus berurusan dengan kode atau perintah Git.

Kelebihan dan Kekurangan Netlify

Berikut adalah rangkuman kelebihan dan kekurangan menggunakan Netlify:

A. Kelebihan Netlify

1. Mudah Digunakan: Antarmuka yang sederhana dan intuitif, sangat ramah untuk pemula.
2. Continuous Deployment: Integrasi sempurna dengan Git untuk alur kerja yang otomatis dan efisien.
3. Deploy Manual (Drag and Drop): Opsi termudah untuk mempublikasikan proyek sederhana dengan cepat.
4. SSL Gratis Otomatis: Website otomatis aman dengan protokol HTTPS tanpa konfigurasi tambahan.
5. Paket Gratis yang Murah: Paket gratisnya menawarkan fitur yang cukup lengkap untuk pelajar, proyek pribadi, dan bahkan situs bisnis kecil.
6. Mendukung Framework Modern: Dapat menangani build dan deploy untuk hampir semua framework JavaScript modern.
7. Fitur Backend Sederhana: Adanya Netlify Functions dan Form Handling memungkinkan pembuatan website yang lebih dinamis.

B. Kekurangan Netlify

1. Batasan pada Paket Gratis: Terdapat batasan jumlah bandwidth dan menit build per bulan. Untuk proyek dengan traffic tinggi, Anda mungkin perlu mempertimbangkan paket berbayar.
2. Tidak Cocok untuk Backend Kompleks: Netlify dioptimalkan untuk frontend dan static sites. Untuk aplikasi dengan logika backend yang berat, basis data yang kompleks, atau kebutuhan server yang spesifik, platform seperti Heroku, AWS, atau DigitalOcean mungkin lebih sesuai.
3. Proses Debugging: Jika terjadi kesalahan saat proses build, pesan error terkadang bersifat teknis dan memerlukan pemahaman yang cukup untuk memperbaikinya.
4. Ketergantungan pada Pihak Ketiga: Sebagai layanan cloud, performa website Anda bergantung pada infrastruktur Netlify. Jika terjadi gangguan di pihak mereka, website Anda pun akan ikut terdampak.