Pembaca seperti Anda membantu mendukung MUO. Saat Anda melakukan pembelian menggunakan tautan di situs kami, kami dapat memperoleh komisi afiliasi. Baca selengkapnya.

React adalah pustaka JavaScript populer untuk membangun antarmuka pengguna fungsional dalam aplikasi web dinamis. Mungkin Anda telah menghabiskan banyak waktu, men-debug kode React dalam upaya membangun Instagram atau Airbnb berikutnya.

Terlepas dari apa yang Anda bangun, tujuan akhirnya adalah selalu memamerkan karya Anda kepada dunia. Di sinilah platform hosting seperti Netlify berguna. Mereka menyediakan seperangkat alat yang merampingkan proses penyebaran.

Ikuti terus untuk mempelajari cara menerapkan aplikasi React Anda menggunakan alat penerapan Netlify yang mudah digunakan.

Apa itu Netlify?

Netlify adalah platform pengembangan berbasis cloud dengan fitur yang membuat hosting dan penerapan aplikasi di web jauh lebih mudah. Sederhananya, ini menyediakan berbagai alat dan layanan yang merampingkan dan menyederhanakan proses yang memungkinkan Anda menerapkan dan menghosting aplikasi web dalam hitungan detik.

instagram viewer

Fitur Utama Netlify

Netlify memiliki serangkaian fitur yang menyederhanakan proses penerapan.

  • Ini memberikan akses penting dan fitur kontrol versi untuk memungkinkan tim pengembangan berkolaborasi secara efisien dan efektif dalam proyek.
  • Ini menawarkan layanan hosting aman yang dapat Anda sesuaikan dengan kebutuhan Anda. Selain itu, ini menyediakan pencadangan otomatis jika terjadi kehilangan data.
  • Ini terintegrasi dengan mulus dengan layanan pengembangan cloud populer seperti GitHub, GitLab, dan Bitbucket.
  • Ini menyediakan fitur yang memudahkan untuk menyiapkan dan mengonfigurasi URL domain khusus dan sertifikat SSL untuk aplikasi Anda.

Buat Aplikasi Reaksi Demo

  1. Untuk memulai, Anda harus terlebih dahulu buat demo aplikasi React yang pada akhirnya akan Anda gunakan di Netlify. Jalankan perintah di bawah ini di terminal Anda untuk membuat aplikasi React: 
    npx buat-reaksi-aplikasi demo-reaksi-netlify-aplikasi
  2. Selanjutnya, jalankan perintah terminal ini untuk menjalankan server pengembangan: 
    mulai npm
    Lanjutkan dan lihat hasilnya di browser Anda di http://localhost: 3000.
  3. Terakhir, jalankan perintah ini untuk membuat versi siap produksi dari aplikasi Anda: 
    npm jalankan build
    Perintah ini menghasilkan file dan aset produksi yang diperlukan di dalam folder baru di direktori root yang disebut, build. Folder build menangkap versi yang diperkecil dari seluruh aplikasi, berisi semua yang diperlukan untuk menerapkan aplikasi.

Deploy Aplikasi React di Netlify

Netlify menyediakan tiga metode yang dapat Anda gunakan untuk menerapkan aplikasi React Anda. Kamu bisa:

  • Impor proyek Anda dari host repositori Git seperti GitHub.
  • Gunakan Fitur Drag and Drop.
  • Gunakan alat baris perintah, CLI Netlify.

Terapkan Menggunakan Fitur Impor GitHub

  1. Mulai oleh membuat repositori di GitHub untuk menyimpan file proyek aplikasi React Anda. Atau, Anda juga dapat menghosting file proyek Anda di penyedia Git lain yang didukung seperti GitLab, Bitbucket, atau Azure DevOps.
  2. Selanjutnya, daftar akun di Netlify. Setelah Anda mendaftar, navigasikan ke dasbor akun Anda dan pilih Situs tab.
  3. Klik pada Impor dari Git tombol.
  4. Pilih platform penyedia Git Pilihan Anda. Netlify akan meminta Anda mengautentikasi dengan penyedia Git Anda untuk memberinya akses ke akun dan repositori Anda.
  5. Setelah Anda selesai melakukannya, Netlify akan menampilkan daftar repositori di penyedia Git Anda. Pilih repositori proyek React yang awalnya Anda dorong ke penyedia Git Anda.
  6. Setelah memilih repositori, Anda perlu menentukan bagaimana Netlify harus menangani proses penerapan. Biasanya, untuk situs web statis, Anda tidak perlu melakukan perubahan apa pun, namun untuk situs web dinamis seperti aplikasi React, Anda harus mengatur pengaturan build. Untungnya, Netlify secara default mendeteksi secara otomatis kerangka kerja yang digunakan untuk membangun aplikasi dan mengisi kolom dengan pengaturan build yang diperlukan.
  7. Terakhir, klik Terapkan situs untuk menyelesaikan proses.

Klik pada URL yang disediakan untuk melihat aplikasi di browser Anda. Jika Anda memiliki URL domain khusus, Anda dapat menginstruksikan Netlify untuk menggunakannya dengan situs Anda dengan memperbarui URL dari pengaturan situs.

Terapkan Menggunakan Fitur Seret dan Lepas

Ini adalah metode paling sederhana untuk menerapkan aplikasi React Anda di Netlify. Anda hanya perlu menyeret dan melepas folder build ke antarmuka pengguna drag-and-drop Netlify.

  1. Di dasbor Netlify, pilih Lokasi tab. Selanjutnya, klik Tambahkan situs baru lalu pilih Terapkan secara manual dari pilihan menu drop-down.
  2. Di halaman fitur drag-and-drop, pilih folder yang berisi file build React dan jatuhkan ke antarmuka pengguna ini. Proyek ini akan langsung diterapkan di Netlify. Atau, Anda dapat mengklik Telusuri untuk mengunggah untuk memilih folder build Anda dari sistem file.

Terapkan Menggunakan Antarmuka Baris Perintah Netlify

Dengan menggunakan antarmuka baris perintah (CLI) Netlify, Anda dapat menerapkan aplikasi React langsung dari terminal. Selain itu, CLI Netlify memungkinkan Anda untuk mengonfigurasi penerapan berkelanjutan sehingga saat Anda melakukan dan mendorong pembaruan baru ke repositori Git Anda, pembaruan tersebut diterapkan secara otomatis.

  1. Jalankan perintah di bawah ini di terminal Anda untuk menginstal CLI Netlify: 
    npm Install netlify-cli -g
  2. Sekarang, jalankan perintah di bawah ini untuk menerapkan aplikasi Anda. Pastikan Anda berada di direktori kerja proyek sebelum menerapkan. 
    penyebaran netlify
    CLI Netlify akan meminta Anda untuk mengizinkannya melakukan perubahan pada akun Anda. Setelah Anda memberikan izin, berikan nama akun tim yang Anda berikan saat mendaftar, lalu pilih apakah akan menautkan direktori aplikasi ke situs web yang ada atau membuat dan mengonfigurasi yang baru satu. Selesaikan dengan memberikan nama situs web khusus dan nama folder build Anda.
  3. CLI akan menerapkan versi draf aplikasi Anda. Periksa apakah semuanya berfungsi seperti yang diharapkan.
  4. Terakhir, jalankan perintah di bawah untuk men-deploy aplikasi Anda ke produksi. 
    penyebaran netlify --melecut

Membandingkan Tiga Metode Penerapan

Metode impor GitHub adalah yang paling efisien untuk menerapkan aplikasi produksi karena memungkinkan Anda untuk menautkan repositori Git Anda langsung ke Netlify dan tetap menyinkronkan kode Anda dengan situs web atau aplikasi live mereka. Saat Anda melakukan dan mendorong perubahan ke repositori Git Anda, Netlify akan memperbarui situs web secara otomatis.

Metode drag-and-drop lebih sederhana untuk menerapkan situs statis, karena tidak memerlukan pengkodean atau penyiapan. Namun, itu tidak memungkinkan pembaruan otomatis saat Anda membuat perubahan pada repositori Anda.

Metode CLI adalah yang paling komprehensif, karena memberi Anda kendali penuh atas proses penerapan dan memungkinkan konfigurasi khusus. Metode ini paling cocok jika Anda sudah memiliki pemahaman yang kuat tentang Netlify dan nyaman bekerja dengan baris perintah.

Ketiga metode ini berguna untuk menerapkan aplikasi ke Netlify. Pada akhirnya, pilihan mana yang akan digunakan akan bergantung pada kebutuhan masing-masing proyek.

Menggunakan Netlify untuk Menerapkan Aplikasi Lain

Netlify adalah alat yang ampuh dan serbaguna yang dapat Anda gunakan untuk menerapkan aplikasi selain React. Anda dapat menggunakannya untuk menyebarkan dan menghosting situs web statis dan aplikasi dinamis yang dibuat dengan kerangka kerja berbeda seperti Angular.

Antarmuka yang ramah pengguna memudahkan untuk mengonfigurasi, mengelola, dan menerapkan API Anda.