Cara Install Open-Design di VPS Ubuntu

Membuat desain untuk website atau aplikasi sering kali tidak berhenti pada proses membuat tampilan yang menarik. Desainer dan developer juga perlu berkolaborasi, melakukan revisi, hingga memastikan hasil desain dapat diterapkan ke dalam kode. Proses tersebut bisa menjadi semakin kompleks ketika proyek dan jumlah anggota tim terus bertambah. Salah satu solusi yang bisa dipertimbangkan adalah Install Open-Design secara self-hosted di VPS.

Open-Design merupakan platform untuk membuat dan mengelola desain antarmuka secara kolaboratif. Dengan menjalankannya di VPS, Anda dapat memiliki lingkungan desain yang berada di server sendiri sehingga data dan proyek dapat dikelola secara lebih terkontrol.

Pada artikel ini, Anda akan mempelajari cara Install Open-Design di VPS Ubuntu, mulai dari persiapan server, proses instalasi, konfigurasi, hingga mengakses Open-Design melalui browser.

Apa Itu Open-Design?

Open-Design adalah platform pengembangan website berbasis AI yang dirancang untuk membantu pengguna membuat website, landing page, maupun user interface aplikasi dengan lebih cepat. Dengan memanfaatkan kecerdasan buatan, pengguna cukup memberikan instruksi (prompt) mengenai tampilan atau fitur yang diinginkan, kemudian Open-Design akan menghasilkan desain maupun kode secara otomatis sehingga proses pengembangan menjadi lebih efisien.

Selain menghasilkan desain, Open-Design juga dapat membantu mempercepat proses iterasi dan pengembangan. Anda dapat meminta AI untuk mengubah tata letak, menambahkan komponen baru, memperbaiki tampilan, hingga menghasilkan kode yang siap digunakan tanpa harus melakukan semuanya secara manual. Hal ini membuat Open-Design cocok digunakan oleh developer, desainer, startup, maupun individu yang ingin membangun produk digital dalam waktu yang lebih singkat.

Salah satu keunggulan Open-Design adalah dukungannya terhadap berbagai penyedia Large Language Model (LLM). Platform ini dapat dihubungkan dengan layanan AI populer seperti OpenAI, Claude, Gemini, maupun layanan yang mendukung OpenAI Compatible API. Dengan demikian, Anda memiliki fleksibilitas untuk memilih model AI yang paling sesuai dengan kebutuhan, baik dari sisi performa, kualitas respons, maupun biaya operasional.

Selain fleksibel dalam pemilihan model AI, Open-Design juga dapat diinstal secara self-hosted pada VPS. Dengan menjalankannya di server sendiri, Anda memiliki kontrol penuh terhadap data, konfigurasi aplikasi, keamanan, serta performa sistem. Pendekatan ini sangat cocok bagi pengguna yang mengutamakan privasi, ingin mengelola infrastruktur sendiri, atau membutuhkan lingkungan pengembangan yang dapat disesuaikan dengan kebutuhan.

Persyaratan Sistem

Sebelum memulai proses install Open-Design, pastikan VPS yang akan digunakan telah memenuhi persyaratan sistem berikut agar Open-Design dapat berjalan dengan baik. Meskipun aplikasi dapat dijalankan pada spesifikasi minimum, penggunaan spesifikasi yang direkomendasikan akan memberikan performa yang lebih stabil, terutama saat memanfaatkan fitur berbasis AI atau mengerjakan proyek dengan kompleksitas yang lebih tinggi.

Spesifikasi Minimum

Sistem operasi Ubuntu 22.04 LTS atau Ubuntu 24.04 LTS
Node.js versi 20 atau lebih baru
Git
npm
RAM minimal 2 GB
Penyimpanan (storage) minimal 5 GB
Memiliki akses sebagai pengguna root atau hak akses sudo

Spesifikasi yang Direkomendasikan

4 vCPU
RAM 8 GB
Storage 10 GB atau lebih

Cara Install Open-Design di Ubuntu

Setelah semua persiapan sistem telah terpenuhi, terdapat beberapa langkah untuk dapat menjalankan Open-Design pada server VPS. Untuk proses instalasinya, kami menggunakan VPS KVM dari Rumahweb paket L dengan OS Ubuntu 22.04.

Berikut step by step cara install Open-Design di Ubuntu 22.04.

Step 1. Update server

Sebelum memulai instalasi, perbarui seluruh paket Ubuntu ke versi terbaru agar sistem tetap aman dan kompatibel.

sudo apt update && sudo apt upgrade -y

Selanjutnya, instal paket yang dibutuhkan selama proses instalasi Open-Design.

sudo apt install git curl build-essential -y

Step 2. Install Node.js

Open-Design membutuhkan Node.js untuk menjalankan aplikasi. Pada panduan ini, kita akan menggunakan Node.js LTS versi 24 dari NodeSource.

curl -fsSL https://deb.nodesource.com/setup_24.x | sudo -E bash -
sudo apt install nodejs -y

Selanjutnya, instal pnpm sebagai package manager.

npm install -g pnpm

Terakhir, pastikan Node.js dan npm telah berhasil terinstal.

node -v   # Output: v24.x.x
npm -v

Step 3. Clone Repository

Setelah Node.js berhasil diinstal, langkah berikutnya adalah mengunduh source code Open-Design dari repositori resminya di GitHub. Pada panduan ini, repository akan disimpan di direktori /opt, yang umum digunakan untuk menyimpan aplikasi pihak ketiga di Linux.

cd /opt
git clone https://github.com/nexu-io/open-design.git

Setelah berhasil terinstall, masuk ke direktori open-design

cd open-design

Apabila proses clone berhasil, seluruh file Open-Design akan tersedia di direktori /opt/open-design dan Anda dapat melanjutkan ke tahap instalasi dependensi.

Step 4. Install Dependency

Setelah source code berhasil diunduh, langkah berikutnya adalah menginstal seluruh dependency yang dibutuhkan oleh Open-Design. Dependency ini diperlukan agar aplikasi dapat dijalankan dan seluruh fiturnya berfungsi dengan baik.

Jika belum terinstal, pasang terlebih dahulu pnpm sebagai package manager.

npm install -g pnpm

Kemudian, instal seluruh dependency proyek menggunakan perintah berikut.

pnpm install

Proses instalasi mungkin memerlukan beberapa menit, tergantung pada spesifikasi server dan kecepatan koneksi internet. Setelah selesai tanpa error, Anda dapat melanjutkan ke tahap konfigurasi aplikasi.

Step 5. Build Project

Setelah seluruh dependency berhasil diinstal, lakukan proses build untuk mengompilasi source code Open-Design ke versi production. Tahap ini akan menghasilkan file yang siap dijalankan pada server.

Jalankan perintah berikut untuk melakukan build pada backend (daemon).

pnpm --filter @open-design/daemon build

Selanjutnya, lakukan build pada frontend (web).

pnpm --filter @open-design/web build

Apabila kedua proses build selesai tanpa error, maka Open-Design telah siap untuk dikonfigurasi dan dijalankan pada VPS.

Step 6. Konfigurasi Environment

Sebelum menjalankan Open-Design, buat terlebih dahulu file environment (.env) yang berisi konfigurasi dasar aplikasi. Untuk kebutuhan pengujian atau penggunaan lokal, Anda dapat menggunakan konfigurasi berikut.

cat > /opt/open-design/apps/daemon/.env << 'EOF'
HOST=0.0.0.0
PORT=7456
NODE_ENV=production
EOF

Apabila Open-Design akan diakses melalui internet atau digunakan pada server production, sebaiknya aktifkan autentikasi API menggunakan token agar akses ke backend menjadi lebih aman.

OD_API_TOKEN=$(openssl rand -hex 32)
echo "API Token: $OD_API_TOKEN"

cat > /opt/open-design/apps/daemon/.env << EOF
HOST=0.0.0.0
PORT=7456
NODE_ENV=production
OD_API_TOKEN=$OD_API_TOKEN
OD_ALLOWED_ORIGINS=https://domainanda.com
EOF

Jangan lupa mengganti https://domainanda.com dengan domain yang akan digunakan untuk mengakses Open-Design.

Step 7. Menjalankan Open-Design

Setelah konfigurasi environment selesai, Anda dapat menjalankan backend Open-Design (daemon). Pastikan berada di direktori proyek, kemudian jalankan perintah berikut.

cd /opt/open-design

# Jalankan daemon
pnpm --filter @open-design/daemon start

Jika proses berhasil, daemon akan berjalan pada port yang telah dikonfigurasi sebelumnya, yaitu 7456. Selanjutnya, Anda dapat melanjutkan ke tahap konfigurasi frontend atau reverse proxy agar Open-Design dapat diakses melalui browser.

Step 8. Membuka Firewall

Apabila VPS menggunakan UFW (Uncomplicated Firewall), buka port 7456 agar Open-Design dapat menerima koneksi dari luar.

sudo ufw allow 7456/tcp

Setelah itu, lakukan reload firewall agar perubahan konfigurasi diterapkan.

sudo ufw reload

Jika tidak menggunakan UFW, sesuaikan konfigurasi firewall dengan layanan atau panel yang digunakan pada VPS Anda.

Step 9. Mengakses Dashboard

Setelah Open-Design berhasil dijalankan, langkah berikutnya adalah mengakses dashboard melalui browser. Jika belum mengetahui alamat IP VPS, jalankan perintah berikut untuk menampilkannya.

curl ifconfig.me

Sebagai contoh, jika IP VPS Anda adalah 103.xxx.xxx.xxx, maka dashboard Open-Design dapat diakses melalui browser menggunakan alamat berikut.

http://103.xxx.xxx.xxx:7456

Atau, Anda dapat mengganti alamat IP dengan IP VPS yang dimiliki.

http://IP-VPS:7456

Apabila halaman Open-Design berhasil ditampilkan, berarti proses instalasi telah selesai dan aplikasi siap digunakan.

Menjalankan Open-Design di Background dengan PM2 (Opsional)

Secara default, Open-Design akan berhenti berjalan ketika terminal ditutup atau sesi SSH berakhir. Agar aplikasi tetap berjalan di background dan otomatis aktif kembali setelah VPS direstart, Anda dapat menggunakan PM2 sebagai process manager.

Instal PM2 terlebih dahulu menggunakan perintah berikut.

npm install -g pm2

Setelah itu, jalankan Open-Design menggunakan PM2.

pm2 start "pnpm --filter @open-design/daemon start" --name open-design

Simpan konfigurasi PM2 agar proses tetap tersimpan.

pm2 save

Terakhir, aktifkan PM2 agar otomatis menjalankan Open-Design setiap kali VPS melakukan reboot.

pm2 startup

Ikuti perintah yang ditampilkan PM2, kemudian jalankan:

pm2 save

Berikut beberapa perintah PM2 yang sering digunakan untuk mengelola aplikasi.

pm2 logs open-design        # Melihat log
pm2 restart open-design     # Restart aplikasi
pm2 stop open-design        # Menghentikan aplikasi
pm2 delete open-design      # Menghapus aplikasi dari PM2
pm2 list                    # Menampilkan seluruh proses

Menggunakan Domain dengan Nginx Reverse Proxy (Opsional)

Secara default, Open-Design diakses menggunakan alamat IP dan port 7456. Agar lebih mudah diakses serta mendukung SSL, Anda dapat menggunakan domain dengan bantuan Nginx sebagai reverse proxy.

Instal Nginx terlebih dahulu.

sudo apt install nginx -y

Selanjutnya, buat file konfigurasi virtual host.

sudo nano /etc/nginx/sites-available/open-design

Masukkan konfigurasi berikut ke dalam file tersebut. Jangan lupa mengganti design.example.com dengan domain yang akan digunakan.

server {
    listen 80;

    server_name design.example.com;

    client_max_body_size 100m;

    location / {
        proxy_pass http://127.0.0.1:7456;

        proxy_http_version 1.1;

        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";

        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

Setelah itu, aktifkan konfigurasi virtual host dan pastikan tidak ada kesalahan konfigurasi.

sudo ln -sf /etc/nginx/sites-available/open-design /etc/nginx/sites-enabled/

sudo nginx -t

sudo systemctl reload nginx

Agar Open-Design dapat diakses menggunakan HTTPS, instal Certbot beserta plugin Nginx.

sudo apt install certbot python3-certbot-nginx -y

Kemudian, buat sertifikat SSL untuk domain Anda.

sudo certbot --nginx -d design.example.com

Apabila proses instalasi SSL berhasil, Open-Design dapat diakses melalui browser menggunakan alamat berikut.

https://design.example.com

Update Open-Design

Untuk mendapatkan fitur terbaru, perbaikan bug, maupun pembaruan keamanan, lakukan update Open-Design secara berkala.

Masuk terlebih dahulu ke direktori instalasi Open-Design.

cd /opt/open-design

Ambil perubahan terbaru dari repository GitHub.

git pull

Apabila terdapat dependency baru, instal menggunakan perintah berikut.

pnpm install

Selanjutnya, lakukan build ulang agar perubahan diterapkan.

pnpm build

Terakhir, restart aplikasi menggunakan PM2 agar Open-Design berjalan dengan versi terbaru.

pm2 restart open-design

Setelah seluruh proses selesai tanpa error, Open-Design telah berhasil diperbarui ke versi terbaru.

Kesimpulan

Install Open-Design di VPS Ubuntu memungkinkan Anda menjalankan platform desain secara self-hosted dengan data dan proyek yang berada di server sendiri. Dengan Node.js sebagai lingkungan aplikasi, PM2 untuk menjaga aplikasi tetap berjalan, serta Nginx dan SSL untuk mengatur akses melalui domain, Open-Design dapat digunakan dengan lebih stabil dan mudah diakses.

Dengan mengikuti panduan ini, Anda dapat memasang Open-Design di VPS Ubuntu mulai dari persiapan server hingga aplikasi siap digunakan melalui browser. Pastikan VPS memiliki resource yang sesuai dan konfigurasi keamanan diterapkan dengan baik agar Open-Design dapat berjalan secara optimal.