Cara Install React.js di cPanel: Panduan 2024

Diterbitkan: 2024-09-01
Daftar isi
  • Prasyarat
  • Langkah 1: Siapkan Aplikasi React.js Anda
  • Langkah 2: Siapkan Lingkungan cPanel Anda
  • Langkah 3: Konfigurasikan Pengaturan Server
  • Langkah 4: Finalisasi dan Pengujian
  • Pemecahan masalah
  • Kesimpulan

React.js telah menjadi salah satu perpustakaan JavaScript paling populer untuk membangun antarmuka pengguna yang dinamis dan interaktif. Meskipun umumnya digunakan dengan kerangka backend seperti Node.js, banyak pengembang berupaya menerapkan aplikasi React.js mereka di lingkungan hosting bersama yang menggunakan cPanel, panel kontrol populer untuk mengelola akun hosting web.

Artikel ini akan memandu Anda melalui proses instalasi dan penerapan aplikasi React.js menggunakan cPanel, meskipun penyedia hosting Anda tidak secara khusus melayani kerangka kerja JavaScript.

Anda juga dapat membaca: 7 Hosting Terbaik untuk React Apps 2024 (Dibandingkan)

Prasyarat

Sebelum masuk ke proses instalasi, ada beberapa prasyarat yang harus Anda miliki:

  1. Aplikasi React.js yang Siap Diterapkan : Pastikan aplikasi React Anda selesai dan siap untuk produksi. Ini berarti semua pekerjaan pengembangan telah selesai, dan Anda siap membuat versi aplikasi yang dapat disajikan kepada pengguna.
  2. Akses ke cPanel : Anda memerlukan akses ke cPanel, yang disediakan oleh layanan hosting web Anda. Sebagian besar penyedia hosting bersama menawarkan cPanel sebagai bagian dari layanan mereka. (Kami merekomendasikan Hostinger dengan penawaran khusus kami menggunakan kode kupon “ Tanpa Kode “)
  3. Nama Domain : Domain atau subdomain terdaftar tempat Anda akan menerapkan aplikasi React Anda. Jika Anda belum menyiapkannya, Anda dapat menggunakan domain yang sudah ada atau membuat subdomain melalui cPanel.

Langkah 1: Siapkan Aplikasi React.js Anda

Hasilkan Pembuatan Produksi

Langkah pertama dalam menerapkan aplikasi React.js ke cPanel adalah membuat versi produksi aplikasi Anda. Build ini dioptimalkan untuk performa, memastikannya berjalan secara efisien di web. Ikuti langkah-langkah berikut yang harus dilakukan di komputer lokal Anda.

  1. Buka Terminal : Navigasikan ke direktori proyek React Anda menggunakan terminal atau command prompt Anda.
  2. Jalankan Perintah Build : npm run build Jika Anda menggunakan Yarn sebagai manajer paket, Anda akan menggunakan: yarn build Perintah ini menghasilkan folder build di direktori proyek Anda. Folder build berisi semua file statis yang diperlukan untuk menjalankan aplikasi Anda, termasuk file HTML, CSS, dan JavaScript​.

Pratinjau Build (Opsional)

Sebelum menerapkan, ada baiknya untuk melihat pratinjau build produksi secara lokal untuk memastikan semuanya berfungsi dengan benar. Anda dapat melakukan ini dengan menggunakan alat server sederhana:

  1. Instal Sajikan Secara Global : npm install -g serve
  2. Sajikan Build : serve -s build Perintah ini akan memulai server lokal dan menyajikan aplikasi Anda dari direktori build , sehingga Anda dapat mempratinjaunya di browser Anda.

Langkah 2: Siapkan Lingkungan cPanel Anda

Setelah aplikasi React Anda siap untuk diterapkan, Anda perlu mengonfigurasi lingkungan cPanel Anda.

Buat Subdomain (Opsional)

Jika Anda ingin aplikasi React Anda dapat diakses melalui subdomain (misal, react.yourdomain.com ), Anda perlu membuatnya di cPanel:

  1. Masuk ke cPanel : Gunakan portal login penyedia hosting Anda untuk mengakses cPanel.
  2. Navigasikan ke Subdomain : Di bagian Domain, klik “Subdomain.”
  3. Buat Subdomain Baru : Masukkan nama yang diinginkan untuk subdomain Anda dan tentukan direktori root dokumen. Jika Anda membiarkan pengaturan default, cPanel akan membuat direktori baru di bawah public_html dengan nama subdomain Anda.

Unggah File Bangun

Setelah build produksi siap, Anda kini dapat mengunggahnya ke server Anda.

  1. Akses Manajer File : Di cPanel, cari “Manajer File” di bawah bagian “File”.
  2. Navigasikan ke Direktori yang Diinginkan : Jika Anda membuat subdomain, navigasikan ke direktori yang sesuai (misalnya, public_html/react ). Jika Anda menerapkan di domain utama, gunakan direktori public_html .
  3. Unggah Folder Bangun :
    • Pertama, kompres folder build di mesin lokal Anda menjadi file ZIP.
    • Gunakan tombol “Unggah” di Manajer File untuk mengunggah file ZIP ini ke direktori yang diinginkan.
    • Setelah diunggah, klik kanan file tersebut dan pilih "Ekstrak" untuk mendekompresi konten

Langkah 3: Konfigurasikan Pengaturan Server

Setelah mengunggah file build, Anda mungkin perlu mengonfigurasi beberapa pengaturan server, terutama jika aplikasi React Anda menggunakan perutean sisi klien dengan React Router.

Siapkan .htaccess (Opsional)

Jika aplikasi Anda menggunakan React Router, yang mengandalkan API riwayat pushState HTML5, server Anda perlu dikonfigurasi untuk menangani permintaan dengan benar. Hal ini sangat penting jika pengguna dapat menavigasi langsung ke rute selain halaman beranda.

  1. Cari atau Buat .htaccess :
    • Di direktori public_html atau subdomain Anda, periksa apakah ada file .htaccess .
    • Jika belum, buat file baru bernama .htaccess .
  2. Tambahkan Aturan Perutean :
    • Buka file .htaccess dan tambahkan konfigurasi berikut:bashCopy code Options -MultiViews RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^ index.html [QSA,L]
    Konfigurasi ini memastikan bahwa semua permintaan dirutekan melalui file index.html , yang penting untuk aplikasi satu halaman seperti yang dibangun dengan React​.

Langkah 4: Finalisasi dan Pengujian

Setelah semuanya diunggah dan dikonfigurasi, langkah berikutnya adalah menyelesaikan penerapan Anda dan memastikan semuanya berfungsi sesuai harapan.

Periksa Izin File

Pastikan file dan direktori memiliki izin yang benar untuk diakses oleh server web. Umumnya, direktori harus memiliki izin yang disetel ke 755 dan file ke 644 .

Uji Penerapannya

Kunjungi domain atau subdomain Anda (misalnya, react.yourdomain.com ) di browser web untuk memverifikasi bahwa aplikasi React Anda berjalan dengan lancar. Periksa semua halaman dan fitur untuk memastikan semuanya berfungsi dengan benar.

Jika Anda mengalami masalah apa pun, alat pengembang browser dapat membantu dalam mendiagnosis masalah. Selain itu, log kesalahan cPanel dapat memberikan wawasan tentang masalah sisi server.

Pemecahan masalah

Menerapkan aplikasi React di cPanel terkadang dapat menimbulkan masalah. Berikut beberapa masalah umum dan solusinya:

  • Kesalahan Perutean : Jika menavigasi ke halaman berbeda pada aplikasi Anda menghasilkan kesalahan 404, pastikan file .htaccess Anda dikonfigurasi dengan benar untuk menangani perutean sisi klien​.
  • Kesalahan File Tidak Ditemukan : Periksa kembali apakah semua file dari folder build telah diunggah dengan benar dan berada di direktori yang benar di server Anda.
  • Izin File Salah : Jika file tidak dimuat, periksa apakah izin file diatur dengan benar ( 755 untuk direktori dan 644 untuk file).
  • Masalah Caching : Terkadang, perubahan mungkin tidak langsung muncul karena caching. Hapus cache browser Anda atau coba akses situs dalam mode penyamaran untuk melihat apakah masalah masih berlanjut.

Kesimpulan

Menerapkan aplikasi React.js di server yang dihosting cPanel mungkin tampak menantang pada awalnya, terutama jika Anda terbiasa dengan proses penerapan yang lebih otomatis dengan layanan seperti Vercel atau Netlify atau lihat artikel kami: 10 Penyedia Hosting Node.js Terbaik tahun 2024 ( Murah & Gratis). Namun, dengan mengikuti langkah-langkah yang diuraikan dalam panduan ini, Anda berhasil mengaktifkan dan menjalankan aplikasi React di cPanel.

Proses ini mencakup mempersiapkan aplikasi React Anda untuk produksi, menyiapkan lingkungan cPanel Anda, mengonfigurasi pengaturan server yang diperlukan, dan memecahkan masalah apa pun yang muncul. Setelah selesai, aplikasi React.js Anda akan aktif dan dapat diakses oleh seluruh dunia melalui domain atau subdomain Anda.

Seiring bertambahnya pengalaman, Anda dapat menjelajahi topik lebih lanjut seperti mengintegrasikan layanan backend, menyiapkan jalur penerapan berkelanjutan, atau mengoptimalkan kinerja lebih lanjut. Untuk saat ini, nikmati berbagi proyek React Anda dengan dunia!