--- title: "Menginstall WireGuard-UI untuk Mengatur WireGuard Server Anda" description: "WireGuard-UI akan sangat mempermudah Anda dalam mengatur WireGuard peers. Artikel ini membahas langkah-langkah menginstall dan mengkonfigurasi WireGuard UI di VPS." summary: "WireGuard-UI akan sangat mempermudah Anda dalam mengatur WireGuard peers. Artikel ini membahas langkah-langkah menginstall dan mengkonfigurasi WireGuard UI di VPS." # linkTitle: date: 2023-06-06T04:20:43+07:00 lastmod: draft: false noindex: false # comments: false nav_weight: 1000 # nav_icon: # vendor: bootstrap # name: toggles # color: '#e24d0e' series: - WireGuard VPN categories: - Privasi - SysAdmin - Networking - Self-Hosted tags: - WireGuard - WireGuard UI - Nginx images: authors: - ditatompel - vie --- [Wireguard-UI][wireguard_ui_gh] adalah GUI berbasis website untu mmengatur konfigurasi WireGuard server yang ditulis oleh [ngoduykhanh][ngoduykhanh] menggunakan bahasa pemrograman **Go**. Ini bisa menjadi alternatif untuk menginstall dan mempermudah pengatur VPN server WireGuard Anda. Jika Anda lebih memilih untuk menginstall WireGuard server _"from scratch"_ dan mengatur dan mengkonfigurasi secara manual, Anda bisa mengikuti artikel saya sebelumnya mengenai "[Cara Setup VPN Server WireGuard Sendiri]({{< ref "/tutorials/how-to-setup-your-own-wireguard-vpn-server/index.id.md" >}})" ## Prasyarat - Sebuah **VPS** (**Ubuntu** `22.04` atau `24.04`) dengan alamat IP publik dan **Nginx** _webserver_ sudah terinstall di VPS tersebut. - Nyaman dan terbiasa dengan Linux _command-line_. - Paham dasar-dasar _subnetting_ di **IPv4** (_jujur, saya tidak begitu paham dan berpengalaman untuk subnetting di **IPv6**, jadi artikel ini hanya untuk **IPv4**_). - Mampu mengkonfigurasi **Nginx** _Virtual Host_. Pada artikel ini, tujuan kita adalah: - _**WireGuard** daemon_ berjalan di port `51822/UDP`. - **WireGuard UI** berjalan dari `127.0.0.1` port `5000`. - **Nginx** bertugas sebagai _reverse proxy_ supaya **WireGuard UI** dan WireGuard UI dapat diakses melalui protokol **HTTPS**. {{< youtube o_JcLMjYI1A >}} > Catatan: Video YouTube diatas tidak secara urut mengikuti artikel ini. Video > tersebut juga menggunakan subnet yang berbeda, jadi sesuaikan sesuai > kebutuhan. ## Mempersiapkan Server Anda Pertama, pastikan server sudah _up-to-date_ dan WireGuard sudah terinstall di server Anda. ```shell sudo apt update && sudo apt upgrade sudo apt install wireguard ``` Edit `/etc/sysctl.conf` dan tambahkan konfigurasi `net.ipv4.ip_forward=1` di bagian akhir file tersebut, kemudian jalankan perintah `sudo sysctl -p`. ```shell sudo sysctl -p ``` Hal tersebut perlu dilakukan supaya _kernel_ mengijinkan melakukan **IP forwarding**. ### Mengkonfigrasi Firewall Anda perlu untuk menambahkan _port_ yang akan digunakan oleh WireGuard _daemon_ ke _allow-list firewall_ Anda. Dari bawaan distro **Ubuntu**, **UFW** sudah terinstall dan dapat digunakan untuk mengkonfigurasi _firewall_. ```shell sudo ufw allow OpenSSH sudo ufw allow 80 comment "allow HTTP" # akan digunakan oleh Nginx sudo ufw allow 443 comment "allow HTTPS" # akan digunakan oleh Nginx sudo ufw allow proto udp to any port 443 comment "allow QUIC" # Jika konfigurasi Nginx Anda mensupport QUIC sudo ufw allow proto udp to any port 51822 comment "WireGuard listen port" ``` > _Perhatikan bahwa saya juga menambahkan **OpenSSH** ke allow list untuk > menghindari terputusnya koneksi SSH jika sebelumnya Anda belum > mengkonfigurasi atau mengaktifkan UFW._ _Enable_ / _restart_ `ufw` menggunakan perintah berikut: ```shell sudo ufw enable # untuk enable firewall, atau sudo ufw reload # untuk reload firewall ``` ## Mendownload & Mengkonfigurasi WireGuard-UI Download [Wireguard-UI dari halaman _latest release_-nya][wireguard_ui_release] ke server Anda (pilih sesuai dengan sistem operasi dan arsitektur CPU server Anda). _Extract_ file `.tar.gz` yang baru saja Anda download: ```shell tar -xvzf wireguard-ui-*.tar.gz ``` Buat folder `/opt/wireguard-ui` dan pindahkan `wireguard-ui` _binary_ (dari hasil _extract_ file `.tar.gz`) ke `/opt/wireguard-ui`. ```shell mkdir /opt/wireguard-ui mv wireguard-ui /opt/wireguard-ui/ ``` Buat _environment file_ untuk WireGuard-UI. Environment file tersebut nantinya akan dibaca dari `EnvironmentFile` melalui `systemd`: ```plain # /opt/wireguard-ui/.env SESSION_SECRET= WGUI_USERNAME= WGUI_PASSWORD= ``` Jika Anda ingin mengaktifkan fitur email, Anda perlu menambahkan setting `SMTP_*` ke _environment variable_ diatas. Baca [WireGuard UI Environment Variables details][wireguard_ui_env] untuk informasi lebih lanjut. ### Menemukan Default Interface Server Kemudian, cari tahu _network interface_ mana yang digunakan oleh server Anda sebagai _default route_-nya. Anda bisa menggunakan perintah `ip route list default` untuk itu. Sebagai contoh, _output_ dari perintah `ip route list default` saya adalah: ```plain default via 172.xxx.xxx.201 dev eth0 proto static ``` Catat kata setelah _output_ `dev` diatas, itu adalah _default network interface_ server Anda. Kita membutuhkan informasi tersebut nanti. Jika dilihat dari contoh _output_ diatas, _default network interface_ saya `eth0`. Buat file `/opt/wireguard-ui/postup.sh`, dan isi dengan contoh konfigurasi berikut: ```bash #!/usr/bin/bash # /opt/wireguard-ui/postup.sh ufw route allow in on wg0 out on eth0 iptables -t nat -I POSTROUTING -o eth0 -j MASQUERADE ``` _Bash script_ `postup.sh` diatas akan dieksekusi saat _service_ WireGuard **dijalankan (_started_)**. Buat file `/opt/wireguard-ui/postdown.sh`. dan isi dengan contoh konfigurasi berikut: ```bash #!/usr/bin/bash # /opt/wireguard-ui/postdown.sh ufw route delete allow in on wg0 out on eth0 iptables -t nat -D POSTROUTING -o eth0 -j MASQUERADE ``` _Bash script_ `postdown.sh` diatas akan dieksekusi saat _service_ WireGuard **diberhentikan (_stopped_)**. Ubah `eth0` dari dua _bash script_ diatas dengan _default network interface_ Anda (_lihat pada sesi [Menemukan Default Interface Server](#menemukan-default-interface-server) diatas_). Kemudian, ubah _file permission_ kedua _bash script_ tersebut (`/opt/wireguard-ui/postup.sh` and `/opt/wireguard-ui/postdown.sh`) supaya bisa dieksekusi: ```shell chmod +x /opt/wireguard-ui/post*.sh ``` ### WireGuard-UI daemon SystemD Untuk memanage **WireGuard-UI** daemon (Web UI) menggunakan `systemd`, buat `/etc/systemd/system/wireguard-ui-daemon.service` _systemd service_ file, dan isi dengan konfigurasi berikut: ```systemd [Unit] Description=WireGuard UI Daemon Wants=network-online.target After=network-online.target [Service] User=root Group=root Type=simple WorkingDirectory=/opt/wireguard-ui EnvironmentFile=/opt/wireguard-ui/.env ExecStart=/opt/wireguard-ui/wireguard-ui -bind-address "127.0.0.1:5000" [Install] WantedBy=multi-user.target ``` > WireGuard UI daemon akan _listen_ ke `127.0.0.1:5000` dengan konfigurasi > `systemd` service diatas. Sekarang _reload_ konfigurasi `systemd` _daemon_ dan cobalah untuk menjalankan `wireguard-ui-daemon.service`. ```shell sudo systemctl daemon-reload sudo systemctl start wireguard-ui-daemon.service ``` Periksa dan pastikan `wireguard-ui-daemon.service` Anda berjalan dengan baik dengan menggunakan perintah `systemctl status wireguard-ui-daemon.service`: ```plain ● wireguard-ui-daemon.service - WireGuard UI Daemon Loaded: loaded (/etc/systemd/system/wireguard-ui-daemon.service; disabled; vendor preset: enabled) Active: active (running) since Mon 2023-06-05 23:57:47 UTC; 5s ago Main PID: 4388 (wireguard-ui) Tasks: 4 (limit: 1115) Memory: 17.1M CPU: 1.243s CGroup: /system.slice/wireguard-ui-daemon.service └─4388 /opt/wireguard-ui/wireguard-ui -bind-address 127.0.0.1:5000 Jun 05 23:57:47 fra1-do1 wireguard-ui[4388]: Git Ref : refs/tags/v0.5.1 Jun 05 23:57:47 fra1-do1 wireguard-ui[4388]: Build Time : 06-05-2023 23:57:47 Jun 05 23:57:47 fra1-do1 wireguard-ui[4388]: Git Repo : https://github.com/ngoduykhanh/wireguard-ui Jun 05 23:57:47 fra1-do1 wireguard-ui[4388]: Authentication : true Jun 05 23:57:47 fra1-do1 wireguard-ui[4388]: Bind address : 127.0.0.1:5000 Jun 05 23:57:47 fra1-do1 wireguard-ui[4388]: Email from : Jun 05 23:57:47 fra1-do1 wireguard-ui[4388]: Email from name : WireGuard UI Jun 05 23:57:47 fra1-do1 wireguard-ui[4388]: Custom wg.conf : Jun 05 23:57:47 fra1-do1 wireguard-ui[4388]: Base path : / Jun 05 23:57:49 fra1-do1 wireguard-ui[4388]: ⇨ http server started on 127.0.0.1:5000 ``` Jika semuanya berjalan dengan baik, Anda bisa melihat bahwa **WireGuard-UI** sudah _listen_ ke `127.0.0.1:5000` (tapi, untuk saat ini, Anda tidak dapat mengakses web UI secara _remote_ sampai Anda menelesaikan sesi "_[Mengkonfigurasi Nginx Untuk WireGuard-UI](#mengkonfigurasi-nginx-untuk-wireguard-ui)_" dibawah). Supaya `wireguard-ui-daemon.service` otomatis berjalan ketika server _restart_, jalankan perintah berikut: ```shell sudo systemctl enable wireguard-ui-daemon.service ``` ### Auto Restart WireGuard Daemon Karena **WireGuard-UI** hanya bertugas untuk _menggenerate_ konfigurasi WireGuard, Anda perlu `systemd` _service_ lainnya untuk mendeteksi adanya perubahan pada konfigurasi WireGuard dan melakukan _restart_ WireGuard _service_ itu sendiri. Buat `/etc/systemd/system/wgui.service` dan isi dengan contoh konfigurasi berikut: ```systemd [Unit] Description=Restart WireGuard After=network.target [Service] Type=oneshot ExecStart=/usr/bin/systemctl restart wg-quick@wg0.service [Install] RequiredBy=wgui.path ``` Kemudian, buat `/etc/systemd/system/wgui.path`: ```systemd [Unit] Description=Watch /etc/wireguard/wg0.conf for changes [Path] PathModified=/etc/wireguard/wg0.conf [Install] WantedBy=multi-user.target ``` Reload `systemd` _daemon_ dengan menjalankan perintah berikut: ```shell systemctl daemon-reload systemctl enable wgui.{path,service} systemctl start wgui.{path,service} ``` ### Mengkonfigurasi Nginx Untuk WireGuard-UI Jika **Nginx** belum terinstall di server Anda, Anda perlu menginstallnya terlebih dahulu. Anda bisa menginstall Nginx mengunakan **default repositori dari Ubuntu** atau menggunakan [official Nginx repositori untuk Ubuntu][nginx_official_ubuntu]. Setelah Nginx terinstall, buat **Nginx virtual host server block** untuk WireGuard UI: ```nginx server { listen 80; server_name wgui.example.com; root /usr/share/nginx; access_log off; location /.well-known/acme-challenge/ { allow all; } location / { return 301 https://$host$request_uri; } } server { listen 443 ssl http2; server_name wgui.example.com; access_log off; ssl_certificate /path/to/your/ssl/cert/fullchain.pem; ssl_certificate_key /path/to/your/ssl/cert/privkey.pem; root /usr/share/nginx; location / { add_header Cache-Control no-cache; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; proxy_set_header X-Real-IP $remote_addr; proxy_set_header Host $http_host; proxy_pass http://127.0.0.1:5000/; } } ``` - Ubah `wgui.example.com` dengan nama (sub)domain Anda. - Ubah `ssl_certificate` dan `ssl_certificate_key` dengan _SSL certificate_ Anda. Setelah itu, _restart_ Nginx menggunakan perintah `sudo systemctl restart nginx`. **Harap diperhatikan** bahwa konfigurasi Nginx _virtual server block_ diatas adalah contoh yang **sangat _basic_**. Jika Anda memerlukan referensi konfigurasi SSL untuk Nginx, Anda bisa menggunakan [Mozilla SSL Configuration Generator][mozilla_ssl_config]. Jika Anda ingin menggunakan [Let's Encrypt][letsencrypt], install `python3-certbot-nginx` dan lakukan lakukan request untuk _SSL certificate_ Anda menggunakan perintah `certbot --nginx -d wgui.example.com`. ## Menggunakan WireGuard-UI Sekarang, setelah semua yang dibutuhkan selesai dikonfigurasi, saatnya untuk **mengkonfigurasi WireGuard menggunakan WireGuard-UI**. Kunjungi (sub)domain WireGuard UI Anda dan login menggunakan username dan password yang sudah Anda konfigurasi sebelumnya di `/etc/wireguard-ui/.env`. > _**CATATAN:** **Jangan** menekan **"Apply Config"** sebelum Anda selesai > mengkonfigurasi setting WireGuard dari WireGuard UI._ Masuk ke halaman **"WireGuard Server"** dan atur konfigurasi WireGuard, contoh: - **Server Interface Addresses**: `10.10.88.1/24` - **Listen Port**: `51822` - **Post Up Script**: `/opt/wireguard-ui/postup.sh` - **Post Down Script**: `/opt/wireguard-ui/postdown.sh` ![WireGuard- UI Server Settings](wg-ui-server-config.png#center) Kemudian, masuk ke halaman **"Global Settings"** dan pastikan semua konfigurasi sudah benar (terutama **"Endpoint Address"** dan **"Wireguard Config File Path"**). Setelah itu, cobalah untuk menekan **Apply Config**. Periksa dan pastikan semuanya berjalan dengan baik (pengecekan dapat menggunakan perintah `wg show` atau `ss -ulnt` dari _command-line_). ### Membuat Peer (client) Membuat _peers_ menggunakan WireGuard UI sangat mudah, Anda hanya perlu menekan tombol **"+ New Client"** di sisi kanan atas dan isi informasi yang diperlukan (Minimal Anda hanya perlu mengisi _field_ **"Name"**). Setelah menambahkan _peers_ (_clients_), tekan tombol **"Apply Config"** dan coba untuk melakukan koneksi ke WireGuard VPN server dari perangkat Anda. File konfigurasi untuk perangkat Anda dapat didownload dari **WireGuard UI**. Anda juga bisa dengan mudah mengimport konfigurasi untuk perangkat Anda menggunakan fitur _scan_ **QR Code**. ![WireGuard UI clients page](wg-ui-clients.png#center) Apa langkah selanjutnya? Bagaimana dengan [Mengkonfigurasi WireGuard VPN Client]({{< ref "/tutorials/configure-wireguard-vpn-clients/index.id.md" >}})? [wireguard_ui_gh]: https://github.com/ngoduykhanh/wireguard-ui "WireGuard-UI GitHub Repo" [ngoduykhanh]: https://github.com/ngoduykhanh "ngoduykhanh GitHub profile" [wireguard_ui_release]: https://github.com/ngoduykhanh/wireguard-ui/releases "WireGuard UI release page" [wireguard_ui_env]: https://github.com/ngoduykhanh/wireguard-ui#environment-variables "WireGuard UI environment variable" [nginx_official_ubuntu]: https://nginx.org/en/linux_packages.html#Ubuntu "Nginx official repository for Ubuntu" [mozilla_ssl_config]: https://ssl-config.mozilla.org/ "Mozilla SSL config" [letsencrypt]: https://letsencrypt.org/ "LetsEncrypt Website"