Cara Deploy SolidJS di Ubuntu 24.04 LTS

SolidJS adalah library JavaScript reaktif untuk membangun antarmuka pengguna, dengan performa mendekati vanilla JavaScript berkat pendekatan fine-grained reactivity tanpa virtual DOM. Panduan ini menjelaskan langkah deploy aplikasi SolidJS di Ubuntu 24.04 LTS, menggunakan paket qVM-2, dengan Nginx sebagai web server yang menyajikan hasil build statis secara langsung. Pembahasan mencakup instalasi environment server, kustomisasi halaman utama sebagai studi kasus, build project, konfigurasi Nginx untuk client-side routing, hingga pemasangan SSL gratis menggunakan Let's Encrypt.

Pengenalan

SolidJS pada mode default (tanpa SolidStart) menghasilkan aplikasi client-rendered SPA (Single Page Application) — seluruh HTML, CSS, dan JavaScript dikompilasi oleh Vite menjadi file statis pada proses build, kemudian dijalankan sepenuhnya di browser pengguna, berbeda dari Next.js yang butuh proses Node.js tetap berjalan di server untuk menangani server-side rendering. Konsekuensinya, deployment SolidJS lebih sederhana: setelah proses build selesai, Nginx cukup menyajikan folder hasil build sebagai file statis, tanpa perlu Node.js runtime, PM2, atau reverse proxy sama sekali di production. Node.js pada panduan ini hanya dipakai sekali saat proses build, bukan untuk menjalankan aplikasi.

Karena bersifat SPA, routing perpindahan halaman ditangani sepenuhnya oleh JavaScript di sisi client. Nginx perlu dikonfigurasi agar semua path yang tidak cocok dengan file fisik tetap diarahkan ke index.html, supaya routing tidak error saat halaman di-refresh langsung dari URL selain root.

Ubuntu 24.04 LTS dipilih sebagai basis OS karena mendapat dukungan resmi (security update dan bug fix) hingga April 2029, sehingga sesuai digunakan untuk server aplikasi yang membutuhkan masa pakai jangka panjang. Panduan ini ditujukan untuk VPS atau qVM yang baru saja di-deploy (fresh install) dan belum memiliki konfigurasi tambahan apa pun.

Persyaratan

Sebelum memulai deploy, pastikan hal-hal berikut sudah terpenuhi:

Software

• Ubuntu 24.04 LTS, kondisi fresh install (belum ada web server lain yang bentrok port)
• Akses root atau user dengan hak sudo
• Koneksi internet untuk mengunduh paket dari repository Ubuntu, dependensi npm, dan sertifikat SSL
• SSH client pada sisi lokal untuk remote ke qVM
• Project SolidJS yang akan di-deploy (project baru maupun repository Git yang sudah ada)

Hardware / Spesifikasi VPS qVM

Panduan ini menggunakan paket qVM-2, dengan spesifikasi:

• vCPU: 1 core
• RAM: 2 GiB
• Storage: 50 GiB
• Domain yang sudah diarahkan (A record) ke IP Publik qVM — digunakan untuk konfigurasi Nginx dan penerbitan sertifikat SSL

Karena hasil akhirnya berupa file statis tanpa proses Node.js yang berjalan terus-menerus, kebutuhan resource qVM-2 pada arsitektur ini lebih ringan dibanding menjalankan aplikasi Next.js dengan PM2 — RAM sebagian besar hanya terpakai sesaat, saat proses build berlangsung.

Tahapan

1. Update dan Upgrade OS Ubuntu 24.04 LTS

Lakukan update dan upgrade pada sistem operasi Ubuntu 24.04 LTS terlebih dahulu, sebelum memulai instalasi service lainnya.

apt update && sudo apt upgrade -y

2. Instalasi Nginx

Pada arsitektur ini, Nginx berperan langsung sebagai web server yang menyajikan file statis hasil build — bukan sebagai reverse proxy seperti pada deployment Next.js.

apt install nginx -y

Aktifkan agar berjalan otomatis saat qVM di-reboot, lalu periksa statusnya:

systemctl enable nginx
systemctl status nginx

Apabila status menunjukkan active (running), Nginx sudah dapat digunakan. Akses http://<IP-qVM> melalui browser untuk memastikan halaman default "Welcome to nginx!" tampil dengan benar.

3. Instalasi Node.js dengan NVM

Node.js pada panduan ini hanya dibutuhkan untuk menjalankan Vite saat proses build, bukan untuk menjalankan aplikasi di production.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.6/install.sh | bash

Muat ulang shell agar perintah nvm dapat langsung digunakan:

source ~/.bashrc

Instal Node.js versi Active LTS terbaru (saat ini Node.js 24.x) dan jadikan sebagai versi default:

nvm install --lts
nvm alias default lts/*

Verifikasi versi Node.js dan npm yang terpasang:

node -v
npm -v

4. Deploy Project SolidJS

Buat direktori project dan buat project SolidJS baru menggunakan CLI resmi:

mkdir -p /var/www
cd /var/www
npx create-solid@latest solidjs-app

Beberapa prompt interaktif akan muncul. Untuk deployment static SPA seperti pada panduan ini, pilih:

• Template? client-only (bukan SolidStart, supaya hasil build murni file statis)
• TypeScript? Yes

Instal dependensi:

cd solidjs-app
npm install

Apabila project sudah ada di repository Git, gunakan git clone diikuti npm install di dalam direktori project sebagai gantinya.

Pada qVM dengan RAM terbatas (misalnya qVM-2), proses instalasi dependensi maupun build project dapat memakan memori cukup tinggi. Apabila proses gagal karena kehabisan memori, tambahkan swap sementara sebagai penyangga sebelum menjalankan ulang perintah tersebut.

5. Studi Kasus: Kustomisasi Halaman Utama

Sebagai studi kasus, ganti komponen utama bawaan SolidJS dengan landing page yang menampilkan ringkasan proses deployment static SPA ini.

Buat file style pendukung:

vim /var/www/solidjs-app/src/App.css

.hero { background: linear-gradient(135deg, #4338ca 0%, #6366f1 50%, #22d3ee 100%); padding: 80px 20px; text-align: center; color: #fff; }
.badge { display: inline-block; background: rgba(255,255,255,0.15); padding: 6px 16px; border-radius: 999px; font-size: 0.85rem; margin-bottom: 20px; letter-spacing: 0.5px; }
.hero h1 { font-size: 2.5rem; margin-bottom: 16px; }
.hero p { font-size: 1.1rem; max-width: 560px; margin: 0 auto 32px; opacity: 0.95; }
.btn { display: inline-block; background: #fff; color: #4338ca; padding: 14px 32px; border-radius: 999px; font-weight: 600; text-decoration: none; }
main { font-family: 'Segoe UI', Arial, sans-serif; background: #0f172a; color: #f1f5f9; line-height: 1.6; }
section { padding: 60px 20px; max-width: 1000px; margin: 0 auto; }
h2 { text-align: center; font-size: 1.8rem; margin-bottom: 12px; }
.subtitle { text-align: center; color: #94a3b8; margin-bottom: 40px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.card { background: #1e293b; padding: 26px; border-radius: 16px; border: 1px solid #334155; }
.card h3 { margin-bottom: 8px; color: #fff; font-size: 1.05rem; }
.card p { color: #94a3b8; font-size: 0.9rem; }
footer { text-align: center; padding: 32px 20px; color: #64748b; font-size: 0.9rem; border-top: 1px solid #1e293b; }

Ganti isi komponen utama:

vim /var/www/solidjs-app/src/App.tsx

import type { Component } from "solid-js";
import "./App.css";

const App: Component = () => {
  return (
    <main>
      <section class="hero">
        <span class="badge">KB Sequel &middot; Landing Page Demo</span>
        <h1>Deployment Berhasil</h1>
        <p>
          Halaman ini adalah contoh landing page SolidJS yang di-build menjadi
          file statis dan disajikan langsung oleh Nginx, pada paket qVM-2.
        </p>
        <a href="#status" class="btn">Lihat Status &rarr;</a>
      </section>

      <section id="status">
        <h2>Apa yang Sudah Berjalan?</h2>
        <p class="subtitle">Ringkasan komponen yang sudah dikonfigurasi sampai tahap ini</p>
        <div class="grid">
          <div class="card">
            <h3>Build Static Berhasil</h3>
            <p>Project SolidJS sudah dikompilasi Vite menjadi HTML, CSS, dan JS statis.</p>
          </div>
          <div class="card">
            <h3>Nginx Menyajikan Langsung</h3>
            <p>Tidak ada proses Node.js yang berjalan di production — Nginx membaca file dari folder dist secara langsung.</p>
          </div>
          <div class="card">
            <h3>Client-Side Routing Siap</h3>
            <p>Konfigurasi fallback ke index.html membuat routing sisi client tetap berfungsi saat halaman di-refresh.</p>
          </div>
          <div class="card">
            <h3>Siap Dikustomisasi</h3>
            <p>Ganti konten komponen ini sesuai kebutuhan project Anda.</p>
          </div>
        </div>
      </section>

      <footer>
        <p>Landing page ini adalah contoh deploy SolidJS di atas paket qVM-2.</p>
        <p>&copy; {new Date().getFullYear()} KB Sequel — Semua hak cipta dilindungi.</p>
      </footer>
    </main>
  );
};

export default App;

Konten diatas merupakan landing page custom sederhana yang sudah kami siapkan sebagai studi kasus pada panduan ini.

6. Build Project SolidJS

cd /var/www/solidjs-app
npm run build

Perintah ini menghasilkan folder dist/ berisi HTML, CSS, dan JavaScript siap deploy. Folder inilah yang nantinya dibaca langsung oleh Nginx, tanpa memerlukan proses Node.js tambahan.

Atur kepemilikan agar dapat dibaca oleh Nginx:

chown -R www-data:www-data /var/www/solidjs-app/dist

7. Konfigurasi Nginx untuk Static SolidJS

vim /etc/nginx/sites-available/solidjs.sequel.web.id.conf

Isi dengan konfigurasi berikut:

server {
    listen 80;
    listen [::]:80;
    server_name solidjs.sequel.web.id;

    root /var/www/solidjs-app/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location ~* \.(js|css|png|jpg|jpeg|svg|woff2?)$ {
        expires 30d;
        access_log off;
    }

    access_log /var/log/nginx/solidjs-app_access.log;
    error_log /var/log/nginx/solidjs-app_error.log;
}

Baris try_files $uri $uri/ /index.html; adalah bagian terpenting untuk aplikasi SPA — apabila path yang diminta tidak cocok dengan file fisik di folder dist, request akan diarahkan ke index.html, lalu router sisi client yang mengambil alih. Blok cache pada aset .js/.css/gambar mempercepat kunjungan berikutnya karena browser tidak perlu mengunduh ulang file yang sama.

Aktifkan dengan symlink ke sites-enabled, lalu uji dan reload konfigurasi:

ln -s /etc/nginx/sites-available/solidjs.sequel.web.id.conf /etc/nginx/sites-enabled/
nginx -t
systemctl reload nginx

8. Uji Akses Aplikasi

Akses http://solidjs.sequel.web.id melalui browser. Pastikan subdomain yang Anda gunakan sudah dipointing ke IP Publik qVM Anda, contohnya seperti gambar di bawah ini

Apabila landing page pada tahap 5 tampil, berarti Nginx sudah berhasil menyajikan hasil build SolidJS dengan benar.

Setiap kali ada perubahan pada source code, ulangi tahap 6 (npm run build) agar folder dist ter-update — tidak perlu restart service apa pun karena Nginx membaca ulang isi file secara langsung.

9. Konfigurasi SSL dengan Let's Encrypt

Instal Certbot beserta plugin Nginx-nya untuk otomatisasi penerbitan dan pemasangan SSL.

apt install certbot python3-certbot-nginx -y

Jalankan Certbot dan arahkan ke domain yang digunakan:

certbot --nginx -d solidjs.sequel.web.id

Certbot akan meminta email untuk notifikasi perpanjangan, konfirmasi persetujuan term of service, kemudian menawarkan opsi redirect otomatis dari HTTP ke HTTPS — pilih opsi redirect agar seluruh trafik diteruskan melalui HTTPS. Plugin ini secara otomatis mengedit server block yang sudah dibuat pada tahap 7 untuk menambahkan blok listen 443 ssl beserta path sertifikat.

Sertifikat Let's Encrypt berlaku 90 hari dan diperpanjang otomatis melalui systemd timer bawaan Certbot. Periksa terlebih dahulu apakah mekanisme perpanjangan (renewal) berjalan dengan normal:

certbot renew --dry-run

Setelah tahap ini, https://solidjs.sequel.web.id sudah dapat diakses dengan koneksi terenkripsi SSL.

Kesimpulan

Sampai tahap ini, VPS qVM-2 (1 core, 2 GiB RAM, 50 GiB storage) sudah menyajikan aplikasi SolidJS sebagai static SPA lewat Nginx. Berbeda dari deployment Next.js yang membutuhkan Node.js runtime dan PM2 berjalan terus-menerus, aplikasi SolidJS pada arsitektur ini murni berupa file statis hasil build — Node.js hanya dipakai sesaat saat proses build, sehingga penggunaan resource server jauh lebih ringan. Studi kasus landing page berhasil menampilkan ringkasan proses deployment, dan aplikasi telah diamankan dengan SSL gratis dari Let's Encrypt beserta redirect otomatis ke HTTPS. Untuk pengembangan lebih lanjut, langkah yang disarankan adalah menyiapkan proses build otomatis (CI/CD) setiap ada perubahan source code, memanfaatkan CDN untuk aset statis, dan menambahkan header cache-control yang lebih detail sesuai kebutuhan aplikasi.