Cara Membuat Subdomain Dinamis atau WildCard Subdomain Di VPS Nginx

Membuat Subdomain Dinamis, jadi begini ceritanya, kemarin saya mendapatkan project untuk membuat sebuah situs yang memiliki subdomain yang dinamis atau biasa dikenal WildCard Subdomain. Wildcard subdomain ini dimaksudkan agar kita tidak selalu membuat subdomain baru di Panel ataupun menambahkan record baru di DNS.

Kamu pernah membuat blog di blogspot, wordpress atau tumblr? jika pernah alamat blog yang kamu buat pasti memiliki struktur:

namablog.blogspot.com
namablog.wordpress.com
namablog.tumblr.com
dst…

dimana namablog ini tiap2 orang akan berbeda dan tentunya akan sangat memakan resource jika tiap-tiap provider blog melakukan setup dns setiap ada blog baru.

Biar lebih mudah maka munculah istilah wildcard subdomain atau subdomain dinamis yang memungkinkan kita membuat subdomain tanpa harus setup DNS secara terus menerus.

Kabar baiknya adalah saya berhasil membuat wildcard subdomain tersebut dengan predikat memuaskan (hahahaha). dan diartikel ini akan saya tulisan step-by-stepnya (dijamin jadi) agar saya tidak lupa dan kamu, kalian semua yang berkunjung bisa memanfaatkannya.

Pengertian Subdomain

Subdomain adalah bagian dari domain yang biasanya digunakan untuk tujuan yang lebih spesifik, contohnya subdomain blog.neon.web.id yang ditujukan secara khusus untuk situs blogging dari situs neon.web.id atau demo.neon.web.id sebagai situs khusus untuk menampung demo-demo project dan sebagainya.

Biar lebih jelas tentang tentang subdomain bisa lihat gambar berikut:

skema domain

Oiya mungkin kamu bertanya-tanya kalo neon.web.id itu subdomainnya neon ya? jawabannya Bukan. sebab web.id itu cTLD atau Country Top Level Domain, biar lebih bisa baca di artikel Jenis-jenis domain yang pernah saya tulis.

Membuat Subdomain dinamis Wildcard Subdomain

Baik cuap-cuapnya udah cukup yaa, udah 300an kata hehehe, sekarang kita lanjut membuat wildcard subdomainnya.

Sistem Yang digunakan

Baik sebelum melangkah lebih jauh, kamu harus tau sistem apa saja yang saya gunakan:

  1. VPS V-Medium IIX dari Hostingan ID dengan OS Ubuntu 20.04
  2. NGINX/1.14.0 (Ubuntu)
  3. PHP7.4
  4. Certbot untuk konfigurasi HTTPS

Membuat Folder untuk Document Root

Tahap ini perlu dilakukan jika subdomain memiliki engine atau system sendiri yang berbeda dari domain utama.

Pertama buatlah direktori atau folder yang akan kamu jadikan sebagai Document Root untuk meletakkan file-file website yang akan jadi subdomain.

Jika sistem websitemu mendukung fitur multisite seperti WordPress, kamu tidak perlu membuat folder document root baru.

lebih detail bisa baca WordPress Multisite

Setting Wildcard Subdomain di Cloudflare

Disini saya menggunakan Cloudflare sebagai DNS (baca juga Apa Itu DNS), karena di server saya tidak menggunakan DNS Bind (berat hehehe) jadi pakai Cloudflare saja mudah, dan murah walau kadang konflik sama jaringan telkom (curhat) tapi tidak masalah.

  1. Login Akun Cloudflare
  2. Pilih domain yang ingin ditambahkan wildcard subdomain
  3. klik menu DNS
  4. klik +Add record
  5. pada kolom Type, pilih A,
  6. pada kolom Name isi dengan * bintang atau asterik
  7. pada Kolom IPv4 address. isikan IP Server yang kamu miliki (kalo ndak tau bisa tanya CS tempat kamu sewa server)
  8. terakhir Klik Save

Setting Wildcard Subdomain di Nginx

Selanjutnya kita akan mengatur server block khusus untuk menangani wildcard subdomain. oiya server block itu sama kayak Virtual Host di apache ya.

jadi yang perlu kamu lakukan adalah membuat server block baru di directory

/etc/nginx/sites-enabled/

lalu buat file baru disana dengan perintah

nano wildcard_subdomain

lalu isi dengan kode berikut

server {
    server_name *.neon.web.id;

    root /home/salwa/sites/subneon;

    index index.php index.html;
    
    location / {
       try_files $uri $uri/ /index.php?$args;
    }

    location ~\.php$ {
        # sesuaikan dengan versi php yang digunakan atau gunakan upstream
        fastcgi_pass unix:/run/php/php7.4-fpm.sock;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
        include snippets/fastcgi-php.conf;
    }

    location ~ /\.ht {
        deny all;
    }

    location ~* /(?:uploads|files)/.*\.php$ {
        deny all;
    }

    # Media: images, icons, video, audio, HTC
    location ~* \.(jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
         expires 356d;
         access_log off;
         add_header Cache-Control "public, no-transform";
    }

    # CSS and Javascript
    location ~* \.(css|js)$ {
         expires 2d;
         access_log off;
         add_header Cache-Control "public, no-transform";
    }

    listen 80;
    
}

Setelah itu Simpan. lalu check dengan perintah berikut agar tau sudah benar atau belum

sudo nginx -t

jika muncul pesan seperti ini berarti sudah benar

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

selanjutnya lakukan restart pada nginx

sudo systemctl restart nginx

Sampai disini subdomain sudah bisa digunakan, hanya saja belum https, dan untuk mengaktifkannya silahkan lanjut membaca hehehe.

Mengaktifkan HTTPS pada Wildcard Subdomain di Nginx

Biasanya dalam membuat subdomain bagi pengguna Cloudflare akan secara otomatis menjadi HTTPS karena ada fitur “Always use HTTPS” dicloudflare.

Tapi pada kasus ini saya menggunan HTTPS di VPS jadi tidak mengunakan fitur dari cloudflare (saya cuma pake fitur Cache dan DNSnya doang di CF).

Membuat Sertifikat SSL untuk Wildcard Subdomain

untuk mengatur HTTPS saya menggunakan certbot Kamu bisa ikuti tutorialnya di situs resminya https://certbot.eff.org/instructions

dengan certbot ini kita bisa mengatur ssl atau https untuk wildcard subdomain, caranya dengan memasukkan perintah berikut:

 sudo certbot certonly --manual \
  --preferred-challenges=dns \
  --email [email protected] \
  --server https://acme-v02.api.letsencrypt.org/directory \
  --agree-tos \
  --manual-public-ip-logging-ok \
  -d "*.neon.web.id"

ganti domain sesuai dengan domainmu.

setelah itu Enter untuk menjalankan perintah tersebut.

kemudian akan muncul pesan seperti berikut ini.

 Saving debug log to /var/log/letsencrypt/letsencrypt.log
 Plugins selected: Authenticator manual, Installer None
 Obtaining a new certificate
 Performing the following challenges:
 dns-01 challenge for neon.web.id
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 Please deploy a DNS TXT record under the name
 _acme-challenge.neon.web.id with the following value:
 ​
 SiPbTUGdqp37WnMNnG17N4qoZEVIiuO_MivrrhYmW-Y
 ​
 Before continuing, verify the record is deployed.
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 Press Enter to Continue
 Waiting for verification...
 Cleaning up challenges
 IMPORTANT NOTES:
  - Congratulations! Your certificate and chain have been saved at:
    /etc/letsencrypt/live/neon.web.id/fullchain.pem
    Your key file has been saved at:
    /etc/letsencrypt/live/neon.web.id/privkey.pem
    Your cert will expire on 2020-09-06. To obtain a new or tweaked
    version of this certificate in the future, simply run certbot
    again. To non-interactively renew *all* of your certificates, run
    "certbot renew"

manakan pesan tersebut karena kita sangat membutuhkan pesan tersebut untuk langkah selanjutnya jika perlu copy paste di notepad.

Menambahkan Record TXT untuk Wildcard Subdomain

Baik dari hasil pesan diatas, kita diminta untuk menambahkan Record TXT pada DNS agar wildcard subdomain kita bisa HTTPS.

perhatikan pesan pada bagian ini

 Please deploy a DNS TXT record under the name
 _acme-challenge.neon.web.id with the following value:
 ​
 SiPbTUGdqp37WnMNnG17N4qoZEVIiuO_MivrrhYmW-Y
 ​
 Before continuing, verify the record is deployed.

disana terdapat _acme_-challenge.neon.web.id (neon.web.id akan berubah sesuai domain yang kamu pakai ).

dan sederetan text tidak jelas SiPbTUGdqp37WnMNnG17N4qoZEVIiuO_MivrrhYmW-Y itu adalah kode untuk memverifikasi record dan domain.

lalu masukan kode kedalam DNS seperti gambar berikut:

pastikan sudah sama persis. lalu Simpan.

Setting SSL di Server Block Nginx

Selanjutnya, perhatikan pesan hasil certbot tadi khususnya bagian IMPORTANT NOTEs

IMPORTANT NOTES:
  - Congratulations! Your certificate and chain have been saved at:
    /etc/letsencrypt/live/neon.web.id/fullchain.pem
    Your key file has been saved at:
    /etc/letsencrypt/live/neon.web.id/privkey.pem
    Your cert will expire on 2020-09-06. To obtain a new or tweaked

disana terdapat informasi file sertifikat ssl untuk domain yang kita daftarkan yakni:

 /etc/letsencrypt/live/neon.web.id/fullchain.pem
 dan
 /etc/letsencrypt/live/neon.web.id/privkey.pem

buka server block yang tadi kita buat, kalo tidak salah namanya wildcard_subdomain. jadi jalankan perintah

nano wildcard_subdomain

setelah terbuka geser kebawah hingga ketemu dengan listen 80;

ubah listen 80; menjadi listen 443 ssl;

lalu tambakan script berikut ini dibawahnya

 listen 443 ssl;
 ssl_certificate /etc/letsencrypt/live/neon.web.id/fullchain.pem;
 ssl_certificate_key /etc/letsencrypt/live/neon.web.id/privkey.pem; 
 include /etc/letsencrypt/options-ssl-nginx.conf; 
 ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

Simpan, lalu cek dengan sudo nginx -t

jika tidak terjadi error, lalu restart nginx dengan

sudo systemctl restart nginx

Redirect Wildcard Subdomain http to https

Meski sudah kita tambahkan SSLm ternyata ketika ada yang menakses subdomain kita tanpa https alias cuma http tidak langsung teredirect ke https seperti saat kita melakukan setting subdoamin biasa, sehingga kita perlu menambahkan script baru di server block / vhost kita.

Tambahkan script berikut ini setelah tanda } yang paling bawah. (ingat setelah tanda ).

server { 
     listen 80;
     server_name .neon.web.id;
     return 301 https://$host$request_uri;
 }

Lalu simpan, cek dengan sudo nginx -t .

jika tidak ada error, lakukan restart dengan sudo systemctl restart nginx

Itu dulu, jika ingin diskusi bisa gunakan kolom komentar dibawah ini. terima kasih.

Oh ya saya ada beberapa snippet code yang mungkin bermanfaat buat kamu:

https://github.com/wichaksono/server-snippet

Leave a Comment