Panduan Hosting Aplikasi Vite + Nitro di Shared Hosting Murah Rp20 Ribuan

Bismillahirrohmaanirrohiim. Alhamdulillahi Robbil 'Alamiin. Allahumma Sholli 'Alaa Sayyidinaa Muhammad. 

Screenshot v3.nitro.build oleh Muslim Aswaja

Kita akan praktik men-deploy/meng-hosting aplikasi berbasis Nitro ke shared hosting dua puluh ribuan.

Nitro di sini adalah plugin untuk Vite. Plugin ini digunakan untuk membuat aplikasi Vite kita menjadi fullstack dan dengan mudah bisa men-deploy-nya di berbagai macam platform, termasuk ke shared hosting murah.

Shared hosting yang kita gunakan adalah Hostdata.id dengan paket Developer (Rp20.000/bulan) dengan Direct Admin panel. Seharusnya menggunakan paket yang Starter (Rp10.000/bulan) atau Profesional (Rp30.000/bulan) juga sama saja.

Persiapan

Untuk itu, kita pastikan sudah melakukan beberapa hal berikut.

  1. Build aplikasi berbasis Nitro di lokal. Pada contoh kali ini, kita tidak menggunakan database apa pun.
  2. Memiliki akun Hostdata.id dan memiliki paket aktif, setidaknya paket Starter.
  3. Sudah membuat subdomain dengan SSL aktif serta men-Setup Node.js App di domain tersebut. Pada contoh kali ini, kita menggunakan subdomain hellonitro.muslimaswaja.my.id dan menempatkannya di direktori app/hellonitro. Startup file yang kita gunakan di sini adalah server.js.

Untuk contoh konfigurasi di Setup Node.js App-nya, kita bisa menggunakan contoh seperti berikut.

Screenshot konfigurasi untuk Nitro di Direct Admin oleh Muslim Aswaja

Langkah-langkah 

Jika sudah, silakan ikuti langkah-langkah berikut ini.

Pertama, kompres isi dari direktori .output dalam proyek Nitro Anda ke dalam format *.zip.

Jika menggunakan Windows 11, Anda bisa langsung memilih semua file (misal menekan kombinasi Ctrl + A), klik kanan pada salah satu file, kemudian klik Compress to..., kemudian pilih ZIP File untuk melakukan ini.

Berikut adalah hasil contoh hasil kompresannya. 

Tampilan hasil build proyek Nitro dan file *.zip-nya oleh Muslim Aswaja

Kedua, upload file *.zip tersebut ke direktori app/hellonitro menggunakan File Manager di Direct Admin.

Anda bisa melakukan ini dengan pertama-tama membuka File Manager di Direct Admin, kemudian masuk ke direktori tempat aplikasi Node.js kita disimpan. Pada contoh kali ini (seperti yang sudah saya beri tahu di awal) adalah di app/hellonitro. Nah, di sini, kita bisa langsung drag-and-drop file *.zip yang telah kita buat pada langkah pertama tadi. Berikut adalah contoh prosesnya.

 

Proses drag-and-drop file build Nitro ke Shared Hosting oleh Muslim Aswaja

Kemudian, tekan tombol START UPLOAD ketika muncul tampilan seperti berikut.

Dialog konfirmasu upload file di Direct Admin oleh Muslim Aswaja

Jika upload berhasil, Anda akan bisa melihat hasil upload-nya di direktori tersebut.

Hasil upload di Direct Admin oleh Muslim Aswaja

Ketiga, ekstrak file *.zip tersebut di dalam direktori yang sama.

Kita bisa melakukannya dengan mengklik kanan file *.zip yang baru kita upload, kemudian kita pilih Extract.

Proses ekstrasi di Direct Admin oleh Muslim Aswaja

Ketika muncul dialog seperti ini, klik EXTRACT. 

Dialog ekstrak file di Direct Admin oleh Muslim Aswaja

Keempat, ubah isi dari file server.js menjadi seperti berikut.

Startup file untuk Nitro di shared hosting oleh Muslim Aswaja

Ini dia snippet yang bisa kita copy-paste.

process.env.TEST = 'true';

import('./server/index.mjs').catch(err => {
    console.error('Failed to load Nitro:', err);
});

Kita bisa melakukannya dengan mengklik dua kali pada file server.js, kemudian menempelkan kode di atas. Omong-omong, dalam proses saya mencari tahu saya cara men-deploy ini, bagian process.env.TEST = 'true'; ini penting agar tidak error.

Ujicoba 

Mari kita coba akses di browser.

Tampilan hello nitro oleh Muslim Aswaja

Kita bisa juga mengklik tombol Click me to call /api/hello untuk mencoba apakah pemanggilan API berhasil. Jangan kaget jika mungkin tulisan yang muncul berbeda dengan milik Anda karena memang saya sudah melakukan sedikit modifikasi.

Tampilan pemanggilan API sukses dari Nitro oleh Muslim Aswaja

Selamat! Aplikasi berbasis Nitro Anda berhasil di-deploy.

Penutup 

Jika Anda merasa ada bagian yang kurang jelas atau ada yang perlu ditanyakan, silakan tinggalkan pertanyaan di kolom komentar.

Semoga bermanfaat. 

Wallahul muwaafiq ilaa aqwaamith thooriq. 

Komentar

Posting Komentar

Postingan populer dari blog ini

Cara Memilih Database MySQL Aktif via Terminal Ubuntu 22.04

Gambar
  Bismillahirrohmaanirrohiim. Alhamdulillahi Robbil 'Alamiin. Allahumma Sholli 'Alaa Sayyidinaa Muhammad. Singkatnya, kita bisa menggunakan command USE nama_database; . Tapi, saya perlu menambahkan konteks di sini. Berikut konteksnya. Konteks Sebelumnya, saya telah menulis cara membuat dan menampilkan semua database di Terminal Ubuntu 22.04. Tentu saja kita tidak hanya bisa melakukan dua hal tersebut. Kita bisa menambahkan data, memperbarui, dan menghapus data dalam suatu database . Namun, sebelum melakukan hal tersebut, kita perlu memilih dulu database yang akan kita kelola. Mengapa? Karena jika kita langsung coba melakukan suatu operasi dalam database sementara belum ada database yang kita pilih, MySQL akan menolak. Misal, kita ingin menampilkan seluruh tabel yang ada dalam database seperti tampilan di bawah. MySQL akan menolak. Karena itu, kita perlu terlebih dahulu memilih database yang ingin kita kelola. Hal pertama yang perlu kita lakukan tentu saja membuka Comman...
Baca selengkapnya

Cara Mengatasi "Access denied for user 'root'@'localhost' (mysqli_real_connect(): (HY000/1698))" di Ubuntu 20.04 LTS

Gambar
Bismillahirrohmaanirrohiim. Alhamdulillahi Robbil 'Alamiin. Allahumma Sholli 'Alaa Sayyidinaa Muhammad. Apakah Anda selalu menjumpai error tersebut ketika melakukan update di Ubuntu Anda? Jika iya, berarti kita mengalami hal yang sama. Saya juga selalu mengalami hal tersebut setiap selesai menjalankan sudo apt upgrade . Well . Sebenarnya tidak selalu. Mungkin lebih tepatnya adalah ketika sistem melakukan update pada MySQL-nya. So , pada artikel kali ini saya menunjukkan cara yang saya lakukan untuk mengatasi error tersebut. Ohiya. Sebenarnya, saya sudah lama menemui error ini dan sudah mengatasinya berulang kali dengan membuka kembali link ke StackOverflow yang pernah saya ceritakan pada artikel terdahulu . Lalu, mengapa saya menulis ini? Agar saya lebih mudah saja melakukannya secara terstruktur tanpa harus klik dan scroll-scroll jawaban di StackOverflow tadi. Baiklah, mari kita mulai saja. Langkah-langkah Mengatasinya Pertama, buka terminal . Buka mysql sebagai root ...
Baca selengkapnya

Cara Install DBeaver Up-To-Date di Ubuntu 22.04

Gambar
  Bismillahirrohmaanirrohiim. Alhamdulillahi Robbil 'Alamiin. Allahumma Sholli 'Alaa Sayyidinaa Muhammad. Singkatnya, kita bisa menggunakan command sudo apt install dbeaver-ce . Tapi, tentu kita perlu melakukan beberapa hal terlebih dahulu. Mengenal DBeaver DBeaver merupakan aplikasi yang bisa kita gunakan untuk mengelola berbagai macam database . Kita bisa melakukan hal-hal yang biasanya bisa kita lakukan di phpMyAdmin, pgSQL, dan lain sebagainya. Hal yang sangat menarik dari aplikasi ini adalah dia bisa kita gunakan untuk berbagai macam jenis DBMS. Misalnya, kita bisa menyambungkannya dengan MySQL , MariaDB , PostgreSQL , SQL Server , SQLite , dan lain sebagainya. Anda bisa membaca selengkapnya pada website resminya di sini . Hal menarik lainnya adalah dia cross-platform . DBeaver bisa kita gunakan di Ubuntu, Windows, bahkan MacOS. Tentu pada artikel kali ini, kita akan fokus membahas instalasi di Ubuntu. Saya Sudah Mencobanya, Tetapi Tidak Berhasil Apabila Anda langsung ...
Baca selengkapnya