{"id":66666,"date":"2026-08-21T08:26:00","date_gmt":"2026-08-21T01:26:00","guid":{"rendered":"https:\/\/www.rumahweb.com\/journal\/?p=66666"},"modified":"2026-08-18T17:21:28","modified_gmt":"2026-08-18T10:21:28","slug":"cara-install-open-design-di-vps-ubuntu","status":"publish","type":"post","link":"https:\/\/www.rumahweb.com\/journal\/cara-install-open-design-di-vps-ubuntu\/","title":{"rendered":"Cara Install Open-Design di VPS Ubuntu"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">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 <em>self-hosted<\/em> di VPS.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Apa Itu Open-Design?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Open-Design adalah platform pengembangan website berbasis AI yang dirancang untuk membantu pengguna membuat website, landing page, maupun <em><a href=\"https:\/\/blog.rumahweb.com\/user-interface-adalah\/\" target=\"_blank\" rel=\"noopener\" title=\"user interface adalah\">user interface<\/a><\/em> aplikasi dengan lebih cepat. Dengan memanfaatkan kecerdasan buatan, pengguna cukup memberikan instruksi (<em>prompt<\/em>) mengenai tampilan atau fitur yang diinginkan, kemudian Open-Design akan menghasilkan desain maupun kode secara otomatis sehingga proses pengembangan menjadi lebih efisien.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Salah satu keunggulan Open-Design adalah dukungannya terhadap berbagai penyedia<em> Large Language Model <\/em>(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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Selain fleksibel dalam pemilihan model AI, Open-Design juga dapat diinstal secara <em>self-hosted<\/em> 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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Persyaratan Sistem<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Spesifikasi Minimum<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Sistem operasi Ubuntu 22.04 LTS atau Ubuntu 24.04 LTS<\/li>\n\n\n\n<li>Node.js versi 20 atau lebih baru<\/li>\n\n\n\n<li>Git<\/li>\n\n\n\n<li>npm<\/li>\n\n\n\n<li>RAM minimal 2 GB<\/li>\n\n\n\n<li>Penyimpanan (<em>storage<\/em>) minimal 5 GB<\/li>\n\n\n\n<li>Memiliki akses sebagai pengguna root atau hak akses sudo<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Spesifikasi yang Direkomendasikan<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>4 vCPU<\/li>\n\n\n\n<li>RAM 8 GB<\/li>\n\n\n\n<li><em>Storage<\/em> 10 GB atau lebih<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Cara Install Open-Design di Ubuntu<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Setelah semua persiapan sistem telah terpenuhi, terdapat beberapa langkah untuk dapat menjalankan Open-Design pada server VPS. Untuk proses instalasinya, kami menggunakan\u00a0<strong><a href=\"https:\/\/www.rumahweb.com\/vps-murah\/\" target=\"_blank\" rel=\"noopener\" title=\"vps murah\">VPS KVM<\/a><\/strong>\u00a0dari Rumahweb paket L dengan OS Ubuntu 22.04. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Berikut step by step cara install Open-Design di Ubuntu 22.04.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1. Update server<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Sebelum memulai instalasi, perbarui seluruh paket Ubuntu ke versi terbaru agar sistem tetap aman dan kompatibel.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>sudo apt update &amp;&amp; sudo apt upgrade -y<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Selanjutnya, instal paket yang dibutuhkan selama proses instalasi Open-Design.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>sudo apt install git curl build-essential -y<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2. Install Node.js<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Open-Design membutuhkan Node.js untuk menjalankan aplikasi. Pada panduan ini, kita akan menggunakan Node.js LTS versi 24 dari NodeSource.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>curl -fsSL https:\/\/deb.nodesource.com\/setup_24.x | sudo -E bash -\nsudo apt install nodejs -y<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-46.png\"><img loading=\"lazy\" decoding=\"async\" width=\"841\" height=\"270\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-46.png\" alt=\"instalasi nodejs \" class=\"wp-image-66841\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-46.png 841w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-46-300x96.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-46-768x247.png 768w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-46-370x119.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-46-270x87.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-46-570x183.png 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-46-740x238.png 740w\" sizes=\"auto, (max-width: 841px) 100vw, 841px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Selanjutnya, instal pnpm sebagai package manager.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install -g pnpm<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Terakhir, pastikan Node.js dan npm telah berhasil terinstal.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>node -v   # Output: v24.x.x\nnpm -v<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3. Clone Repository<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>cd \/opt\ngit clone https:\/\/github.com\/nexu-io\/open-design.git<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-45.png\"><img loading=\"lazy\" decoding=\"async\" width=\"740\" height=\"189\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-45.png\" alt=\"clone open-design dari github\" class=\"wp-image-66840\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-45.png 740w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-45-300x77.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-45-370x95.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-45-270x69.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-45-570x146.png 570w\" sizes=\"auto, (max-width: 740px) 100vw, 740px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Setelah berhasil terinstall, masuk ke direktori open-design<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>cd open-design<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Apabila proses clone berhasil, seluruh file Open-Design akan tersedia di direktori \/opt\/open-design dan Anda dapat melanjutkan ke tahap instalasi dependensi.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4. Install Dependency<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Jika belum terinstal, pasang terlebih dahulu pnpm sebagai package manager.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install -g pnpm<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Kemudian, instal seluruh dependency proyek menggunakan perintah berikut.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>pnpm install<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-47.png\"><img loading=\"lazy\" decoding=\"async\" width=\"906\" height=\"367\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-47.png\" alt=\"instalasi dependency\" class=\"wp-image-66842\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-47.png 906w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-47-300x122.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-47-768x311.png 768w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-47-370x150.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-47-270x109.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-47-570x231.png 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-47-740x300.png 740w\" sizes=\"auto, (max-width: 906px) 100vw, 906px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 5. Build Project<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Jalankan perintah berikut untuk melakukan build pada backend (daemon).<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>pnpm --filter @open-design\/daemon build<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-48.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"125\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-48-1024x125.png\" alt=\"build daemon backend untuk open-design\" class=\"wp-image-66843\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-48-1024x125.png 1024w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-48-300x37.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-48-768x94.png 768w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-48-370x45.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-48-270x33.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-48-570x70.png 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-48-740x91.png 740w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-48.png 1030w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Selanjutnya, lakukan build pada frontend (web).<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>pnpm --filter @open-design\/web build<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-49.png\"><img loading=\"lazy\" decoding=\"async\" width=\"917\" height=\"454\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-49.png\" alt=\"build daemon frontend untuk open-design\" class=\"wp-image-66844\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-49.png 917w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-49-300x149.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-49-768x380.png 768w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-49-370x183.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-49-270x134.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-49-570x282.png 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-49-740x366.png 740w\" sizes=\"auto, (max-width: 917px) 100vw, 917px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Apabila kedua proses build selesai tanpa error, maka Open-Design telah siap untuk dikonfigurasi dan dijalankan pada VPS.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 6. Konfigurasi Environment<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>cat &gt; \/opt\/open-design\/apps\/daemon\/.env &lt;&lt; 'EOF'\nHOST=0.0.0.0\nPORT=7456\nNODE_ENV=production\nEOF<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-50.png\"><img loading=\"lazy\" decoding=\"async\" width=\"708\" height=\"99\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-50.png\" alt=\"setting env untuk open-design\" class=\"wp-image-66891\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-50.png 708w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-50-300x42.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-50-370x52.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-50-270x38.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-50-570x80.png 570w\" sizes=\"auto, (max-width: 708px) 100vw, 708px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>OD_API_TOKEN=$(openssl rand -hex 32)\necho \"API Token: $OD_API_TOKEN\"\n\ncat &gt; \/opt\/open-design\/apps\/daemon\/.env &lt;&lt; EOF\nHOST=0.0.0.0\nPORT=7456\nNODE_ENV=production\nOD_API_TOKEN=$OD_API_TOKEN\nOD_ALLOWED_ORIGINS=https:\/\/domainanda.com\nEOF<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Jangan lupa mengganti https:\/\/domainanda.com dengan domain yang akan digunakan untuk mengakses Open-Design.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 7. Menjalankan Open-Design<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Setelah konfigurasi environment selesai, Anda dapat menjalankan backend Open-Design (daemon). Pastikan berada di direktori proyek, kemudian jalankan perintah berikut.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>cd \/opt\/open-design\n\n# Jalankan daemon\npnpm --filter @open-design\/daemon start<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-52.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"298\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-52-1024x298.png\" alt=\"menjalankan open-design bagian 1\" class=\"wp-image-66893\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-52-1024x298.png 1024w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-52-300x87.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-52-768x223.png 768w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-52-370x108.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-52-270x78.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-52-570x166.png 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-52-740x215.png 740w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-52.png 1094w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Jika proses berhasil, daemon akan berjalan pada port yang telah dikonfigurasi sebelumnya, yaitu 7456. Selanjutnya, Anda dapat melanjutkan ke tahap konfigurasi <em>frontend<\/em> atau <em>reverse proxy<\/em> agar Open-Design dapat diakses melalui browser.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-53.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"650\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-53-1024x650.png\" alt=\"menjalankan open-design bagian 2\" class=\"wp-image-66894\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-53-1024x650.png 1024w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-53-300x191.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-53-768x488.png 768w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-53-1536x976.png 1536w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-53-370x235.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-53-270x171.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-53-570x362.png 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-53-740x470.png 740w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/07\/image-53.png 1628w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 8. Membuka Firewall<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Apabila VPS menggunakan UFW <em>(Uncomplicated Firewall)<\/em>, buka port 7456 agar Open-Design dapat menerima koneksi dari luar.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>sudo ufw allow 7456\/tcp<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Setelah itu, lakukan reload firewall agar perubahan konfigurasi diterapkan.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>sudo ufw reload<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Jika tidak menggunakan UFW, sesuaikan konfigurasi firewall dengan layanan atau panel yang digunakan pada VPS Anda.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 9. Mengakses Dashboard<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Setelah Open-Design berhasil dijalankan, langkah berikutnya adalah mengakses dashboard melalui browser. Jika belum mengetahui alamat IP VPS, jalankan perintah berikut untuk menampilkannya.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>curl ifconfig.me<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Sebagai contoh, jika IP VPS Anda adalah 103.xxx.xxx.xxx, maka dashboard Open-Design dapat diakses melalui browser menggunakan alamat berikut.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>http:&#47;&#47;103.xxx.xxx.xxx:7456<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Atau, Anda dapat mengganti alamat IP dengan IP VPS yang dimiliki.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>http:&#47;&#47;IP-VPS:7456<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Apabila halaman Open-Design berhasil ditampilkan, berarti proses instalasi telah selesai dan aplikasi siap digunakan.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Menjalankan Open-Design di Background dengan PM2 (Opsional)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Instal PM2 terlebih dahulu menggunakan perintah berikut.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install -g pm2<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Setelah itu, jalankan Open-Design menggunakan PM2.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>pm2 start \"pnpm --filter @open-design\/daemon start\" --name open-design<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Simpan konfigurasi PM2 agar proses tetap tersimpan.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>pm2 save<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Terakhir, aktifkan PM2 agar otomatis menjalankan Open-Design setiap kali VPS melakukan reboot.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>pm2 startup<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Ikuti perintah yang ditampilkan PM2, kemudian jalankan:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>pm2 save<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Berikut beberapa perintah PM2 yang sering digunakan untuk mengelola aplikasi.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>pm2 logs open-design        # Melihat log\npm2 restart open-design     # Restart aplikasi\npm2 stop open-design        # Menghentikan aplikasi\npm2 delete open-design      # Menghapus aplikasi dari PM2\npm2 list                    # Menampilkan seluruh proses<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Menggunakan Domain dengan Nginx Reverse Proxy (Opsional)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Instal Nginx terlebih dahulu.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>sudo apt install nginx -y<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Selanjutnya, buat file konfigurasi virtual host.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>sudo nano \/etc\/nginx\/sites-available\/open-design<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Masukkan konfigurasi berikut ke dalam file tersebut. Jangan lupa mengganti design.example.com dengan domain yang akan digunakan.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>server {\n    listen 80;\n\n    server_name design.example.com;\n\n    client_max_body_size 100m;\n\n    location \/ {\n        proxy_pass http:\/\/127.0.0.1:7456;\n\n        proxy_http_version 1.1;\n\n        proxy_set_header Upgrade $http_upgrade;\n        proxy_set_header Connection \"upgrade\";\n\n        proxy_set_header Host $host;\n        proxy_set_header X-Real-IP $remote_addr;\n        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n        proxy_set_header X-Forwarded-Proto $scheme;\n    }\n}\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Setelah itu, aktifkan konfigurasi virtual host dan pastikan tidak ada kesalahan konfigurasi.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>sudo ln -sf \/etc\/nginx\/sites-available\/open-design \/etc\/nginx\/sites-enabled\/\n\nsudo nginx -t\n\nsudo systemctl reload nginx<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Agar Open-Design dapat diakses menggunakan HTTPS, instal Certbot beserta plugin Nginx.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>sudo apt install certbot python3-certbot-nginx -y<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Kemudian, buat sertifikat SSL untuk domain Anda.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>sudo certbot --nginx -d design.example.com<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Apabila proses instalasi SSL berhasil, Open-Design dapat diakses melalui browser menggunakan alamat berikut.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>https:&#47;&#47;design.example.com<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Update Open-Design<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Untuk mendapatkan fitur terbaru, perbaikan bug, maupun pembaruan keamanan, lakukan update Open-Design secara berkala.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Masuk terlebih dahulu ke direktori instalasi Open-Design.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>cd \/opt\/open-design<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Ambil perubahan terbaru dari repository GitHub.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>git pull<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Apabila terdapat dependency baru, instal menggunakan perintah berikut.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>pnpm install<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Selanjutnya, lakukan build ulang agar perubahan diterapkan.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>pnpm build<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Terakhir, restart aplikasi menggunakan PM2 agar Open-Design berjalan dengan versi terbaru.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>pm2 restart open-design<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Setelah seluruh proses selesai tanpa error, Open-Design telah berhasil diperbarui ke versi terbaru.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Kesimpulan<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Install Open-Design di VPS Ubuntu memungkinkan Anda menjalankan platform desain secara <em>self-hosted<\/em> 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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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 <em>resource <\/em>yang sesuai dan konfigurasi keamanan diterapkan dengan baik agar Open-Design dapat berjalan secara optimal.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":363,"featured_media":67487,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[177],"tags":[2682,703,321],"class_list":["post-66666","post","type-post","status-publish","format-standard","has-post-thumbnail","category-vps","tag-open-design","tag-ubuntu","tag-vps"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.0.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"Pelajari cara Install Open-Design di VPS Ubuntu, mulai dari persiapan sistem server, instalasi, konfigurasi, hingga mengaksesnya melalui browser.\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Satya Maulana Fahreza\"\/>\n\t<meta name=\"google-site-verification\" content=\"wPstUwU5246IbK_1PqwGrc1LoSDnB-9rPbcT8_vSNgQ\" \/>\n\t<meta name=\"keywords\" content=\"open-design,ubuntu,vps\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.rumahweb.com\/journal\/cara-install-open-design-di-vps-ubuntu\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.0.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"id_Id\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Rumahweb Journal \u2013 Panduan Website, Hosting, dan Server\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Cara Install Open-Design di VPS Ubuntu \u2013 Rumahweb\" \/>\n\t\t<meta property=\"og:description\" content=\"Pelajari cara Install Open-Design di VPS Ubuntu, mulai dari persiapan sistem server, instalasi, konfigurasi, hingga mengaksesnya melalui browser.\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.rumahweb.com\/journal\/cara-install-open-design-di-vps-ubuntu\/\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/08\/Banner-Cara-Install-Open-Design-di-VPS-Ubuntu.webp\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/08\/Banner-Cara-Install-Open-Design-di-VPS-Ubuntu.webp\" \/>\n\t\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2026-08-21T01:26:00+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2026-08-18T10:21:28+00:00\" \/>\n\t\t<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/RumahwebIndonesia\/\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:site\" content=\"@rumahwebtweet\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Cara Install Open-Design di VPS Ubuntu \u2013 Rumahweb\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Pelajari cara Install Open-Design di VPS Ubuntu, mulai dari persiapan sistem server, instalasi, konfigurasi, hingga mengaksesnya melalui browser.\" \/>\n\t\t<meta name=\"twitter:creator\" content=\"@rumahwebtweet\" \/>\n\t\t<meta name=\"twitter:image\" content=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/08\/Banner-Cara-Install-Open-Design-di-VPS-Ubuntu.webp\" \/>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Cara Install Open-Design di VPS Ubuntu \u2013 Rumahweb","description":"Pelajari cara Install Open-Design di VPS Ubuntu, mulai dari persiapan sistem server, instalasi, konfigurasi, hingga mengaksesnya melalui browser.","canonical_url":"https:\/\/www.rumahweb.com\/journal\/cara-install-open-design-di-vps-ubuntu\/","robots":"max-image-preview:large","keywords":"open-design,ubuntu,vps","webmasterTools":{"google-site-verification":"wPstUwU5246IbK_1PqwGrc1LoSDnB-9rPbcT8_vSNgQ","miscellaneous":""},"schema":null,"og:locale":"id_Id","og:site_name":"Rumahweb Journal \u2013 Panduan Website, Hosting, dan Server","og:type":"article","og:title":"Cara Install Open-Design di VPS Ubuntu \u2013 Rumahweb","og:description":"Pelajari cara Install Open-Design di VPS Ubuntu, mulai dari persiapan sistem server, instalasi, konfigurasi, hingga mengaksesnya melalui browser.","og:url":"https:\/\/www.rumahweb.com\/journal\/cara-install-open-design-di-vps-ubuntu\/","og:image":"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/08\/Banner-Cara-Install-Open-Design-di-VPS-Ubuntu.webp","og:image:secure_url":"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/08\/Banner-Cara-Install-Open-Design-di-VPS-Ubuntu.webp","og:image:width":1200,"og:image:height":630,"article:published_time":"2026-08-21T01:26:00+00:00","article:modified_time":"2026-08-18T10:21:28+00:00","article:publisher":"https:\/\/www.facebook.com\/RumahwebIndonesia\/","twitter:card":"summary_large_image","twitter:site":"@rumahwebtweet","twitter:title":"Cara Install Open-Design di VPS Ubuntu \u2013 Rumahweb","twitter:description":"Pelajari cara Install Open-Design di VPS Ubuntu, mulai dari persiapan sistem server, instalasi, konfigurasi, hingga mengaksesnya melalui browser.","twitter:creator":"@rumahwebtweet","twitter:image":"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2026\/08\/Banner-Cara-Install-Open-Design-di-VPS-Ubuntu.webp"},"aioseo_meta_data":{"post_id":"66666","title":"#post_title #separator_sa Rumahweb","description":"Pelajari cara Install Open-Design di VPS Ubuntu, mulai dari persiapan sistem server, instalasi, konfigurasi, hingga mengaksesnya melalui browser.","keywords":null,"keyphrases":{"focus":{"keyphrase":"install open-design","score":0,"analysis":[]},"additional":[]},"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","location":null,"local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":{"faqs":[],"keyPoints":[],"schemas":[],"titles":[],"descriptions":[],"socialPosts":{"email":{"subject":"","preview":"","content":""},"linkedin":[],"twitter":[],"facebook":[],"instagram":[]}},"created":"2026-07-23 10:22:36","updated":"2026-08-21 01:30:52","seo_analyzer_scan_date":null,"focus_keyword":"install open-design","additional_keywords":null,"truseo_locale":"id_ID"},"_links":{"self":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/66666","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/users\/363"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/comments?post=66666"}],"version-history":[{"count":7,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/66666\/revisions"}],"predecessor-version":[{"id":67495,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/66666\/revisions\/67495"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media\/67487"}],"wp:attachment":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media?parent=66666"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/categories?post=66666"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/tags?post=66666"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}