Cara Upload NextJS ke cPanel: Panduan Langkah-demi-Langkah
🚀 Aplikasi Next.js dengan MySQL, Prisma, dan Tailwind CSS di cPanel
Halo developer! Anda baru saja menyelesaikan aplikasi Next.js full-stack yang canggih, lengkap dengan manajemen data rapi menggunakan Prisma dan MySQL, serta tampilan memukau berkat Tailwind CSS. Sekarang, saatnya membawa aplikasi Anda ke dunia nyata!
Banyak panduan deployment modern berfokus pada Vercel atau Netlify. Tapi, bagaimana jika Anda menggunakan shared cloud hosting dengan cPanel? Inilah tantangan utamanya:
-
Kendala Utama: Lingkungan shared hosting cPanel sering kali tidak dirancang untuk aplikasi server-side seperti Next.js. Anda mungkin menghadapi isu dengan konfigurasi Node.js, variabel lingkungan
(.env), dan, yang paling rumit, koneksi database Prisma karena keterbatasan runtime di lingkungan tersebut. -
Kendala Prisma/MySQL: Prisma (terutama client dasarnya) bergantung pada koneksi yang stabil dan terkadang membutuhkan penyesuaian khusus agar dapat bekerja dalam mode Node.js standalone di cPanel.
1. Persiapan Awal (Requirements)
2. Membuat Custom Server (Wajib untuk cPanel)
Ini adalah startup file utama yang akan di eksekusi oleh NodeJS untuk memulai aplikasi Anda / untuk booting pertama kali.
Secara default untuk banyak aplikasi NodeJS, nama file ini adalah app.js atau server.js.
server.js
3. Config file untuk package.json, next.config.ts dan .env
Mengapa Konfigurasi Ini Penting di cPanel Shared Cloud Hosting?
Pengaturan pada kedua file di atas sangat penting untuk stabilitas dan kemampuan deployment aplikasi Next.js di lingkungan shared cloud hosting cPanel, yang memiliki batasan sumber daya dan lingkungan yang berbeda dari cloud provider khusus.
Berikut Manifest aplikasi NodeJS/NextJS dan file .env yg perlu di perhatikan:
- pastikan DATABASE_URL sudah mengarah ke database yg berada di server, hindari password database yg menggunakan karakter ? (tanda tanya) dan & (Ampersand) Dalam standar URL, karakter-karakter ini memiliki fungsi khusus sebagai pemisah dan penanda dimulainya query parameters (misalnya ?schema=public&timeout=5).
- "type": "module" Menentukan bahwa file .js di proyek menggunakan sintaks ES Modules (import/export), bukan CommonJS (require).
- "scripts": "build"
- Menjalankan script prisma:generate terlebih dahulu.
- Kemudian, menjalankan proses build Next.js, membuat file-file siap produksi. Disini langsung di set pada bagian script file package.json mode production atau development.
- "scripts": "start" Script kunci untuk deployment. Ini menjalankan file server Next.js yang sudah di-build dalam mode produksi dan server.js start up file nya.
.env
package.json
next.config.ts
Setelah semua konfigurasi di atas sudah siap, jalankan terlebih dahulu aplikasinya di local untuk memastikan semuanya berjalan dengan baik sebelum melakukan build di Local dan upload ke server.:
npm run start
4. Build Aplikasi di Local
Karena proses build adalah tahap yang paling memakan memori dan tidak bisa dilakukan secara andal di shared hosting, solusi terbaik adalah melakukan build di tempat lain, lalu mengunggah hasilnya. Ini sangat cocok dengan konfigurasi Next.js yang sudah kita terapkan.
Persiapkan File untuk Upload
Ini adalah file penting yg perlu di perhatikan ketika persiapan Upload ke server sesuai dengan kebutuhan:
- Folder .next: pastikan semua isi folder di dalam .next ikut terbawa dari local ke server
- Folder node_modules: module ini mencakup dependensi produksi, tetapi kadang-kadang beberapa dependensi non-Node.js native masih dibutuhkan, jadi mengunggah ini adalah praktik yang aman. (lokasi upload folder harus di path tertentu pada lingkungan / environment server cloud hosting)
- package.json, .env, next.config.ts dan server.js: Diperlukan untuk memulai aplikasi.
5. Setup NodeJS App - cPanel
Setelah melakukan build aplikasi di local, persiapkan terlebih dahulu untuk setup aplikasi NodeJS nya pada lingkungan cloud hosting cPanel. Mulai dari:
- NodeJS Version yg akan di gunakan.
- Application Mode Production atau Development
- Application root: Tempat dimana data-data aplikasi akan di simpan.
- Application URL: Aplikasi akan menggunakan alamat domain apa, subdomain atau domain.
- Application Startup File: server.js / app.js file yg akan di gunakan untuk startup booting pertama kali aplikasi nya.
- Environment Variable: Nilai konfigurasi untuk sistem operasi aplikasi nya. contoh: NODE_OPTIONS = --max-old-space-size=4096
Setup NodeJS App di cPanel sudah terbuat, dan untuk struktur folder nya akan seperti ini pada cPanel nya:
server.js
U.htaccess
U6. Upload File ke cPanel
Setelah semua siap, saatnya mengunggah file ke server. Anda bisa menggunakan File Manager di cPanel atau FTP client seperti FileZilla. Berikut langkah-langkahnya menggunakan FTP (FileZilla):
- Buka FileZilla dan masukkan detail koneksi FTP Anda (host, username, password, port).
- Setelah terhubung, navigasikan ke direktori root aplikasi Node.js Anda di server (misalnya
inflo.kimino.my.id/inflo-data). - Unggah semua file dan folder yang telah Anda siapkan sebelumnya (folder
.next,node_modules,package.json,.env,next.config.ts,server.js, dll).
- Tunggu hingga semua file terunggah dengan sempurna.
Sehingga pada akhirnya struktur folder di cPanel Anda akan seperti ini:
app-build-manifest.json
app-path-routes-manifest.json
build-manifest.json
BUILD_ID
...
.env
Unext.config.ts
Upackage.json
Userver.js
U...
U.htaccess
U7. Create Database MySQL di cPanel
Selanjutnya, buat database MySQL di cPanel untuk aplikasi Anda:
- Masuk ke cPanel dan cari menu MySQL® Databases.
- Buat database baru, misalnya
d*vs***i_inflo_db. - Buat user baru untuk database tersebut, misalnya
d*v****i_inflo, dan atur password yang kuat. - Berikan user tersebut semua hak akses ke database yang baru dibuat.
- Catat nama database, username, dan password karena akan digunakan di file
.env.
- Pastikan variabel
DATABASE_URLdi file.envsudah sesuai dengan detail database yang baru dibuat.
8. Import Database MySQL
Jika Anda sudah memiliki file dump database (misalnya
inflo_db.sql), Anda bisa mengimpornya ke database MySQL yang baru dibuat:
- Kembali ke menu PHP My Admin di cPanel.
- Klik pada nama database yang baru dibuat.
- Pilih tab Import.
- Pilih file SQL dari komputer Anda dan klik Go untuk mengimpor data.
Jika menggunakan terminal, Anda bisa menggunakan perintah berikut:
mysql -u d*v****i_inflo -p d*vs***i_inflo_db < /path/to/inflo_db.sql
atau
gunzip -c /path/to/inflo_db.sql.gz | mysql -u d*v****i_inflo -p d*vs***i_inflo_db
Gantilah
d*v****i_inflo, d*vs***i_inflo_db, dan /path/to/inflo_db.sql sesuai dengan informasi Anda.
9. Menjalankan Aplikasi di cPanel
Setelah semua file diunggah dan database siap, saatnya menjalankan aplikasi Anda:
- Kembali ke menu Setup Node.js App di cPanel.
- Pilih aplikasi yang sudah Anda buat sebelumnya. ( Pastikan untuk aplikasi dalam keadaan stop )
- Setelah itu, klik tombol Start App untuk menjalankan aplikasi Anda.
- Jika aplikasi sudah berjalan, Anda akan melihat statusnya berubah menjadi Running.
- Klik Restart jika masih belum bisa atau ada yg belum sesuai, dan cek stderr.log untuk melihat error logs nya.
- Buka browser dan akses domain atau subdomain yang sudah Anda konfigurasikan untuk aplikasi Anda. Jika semuanya berjalan lancar, Anda akan melihat aplikasi Next.js Anda online!
Selamat! Anda telah berhasil melalui setiap langkah penting dalam proses deployment aplikasi Next.js Anda yang menggunakan stack teknologi modern (Prisma, MySQL, dan Tailwind CSS) ke lingkungan cPanel.
Meskipun proses deployment untuk aplikasi Node.js seperti Next.js di shared hosting cPanel bisa terasa kompleks karena membutuhkan konfigurasi custom server dan Setup Node.js App, kini Anda telah membuktikan bahwa hal tersebut sepenuhnya mungkin.
Aplikasi Anda kini sudah live dan siap diakses oleh pengguna. Ingatlah untuk selalu me-restart aplikasi Node.js di cPanel setiap kali Anda melakukan update atau perubahan penting pada kode sumber.
Selamat berkoding dan semoga sukses dengan aplikasi Anda! 🚀
