Skip to content

Setup-WSL-Docker.md

Latest commit

 

History

History
470 lines (338 loc) · 8.86 KB

Setup-WSL-Docker.md

File metadata and controls

470 lines (338 loc) · 8.86 KB
Raw

SETUP PEMROGRAMAN WEB 2026 (WSL + GITHUB + DOCKER)

Tolong dibaca dengan cermat dan teliti agar tidak terjadi kesalahan dalam Instalasi/Setup.
Jangan terlalu terburu-buru dan silahkan ikutin tahapannya.***

Semangat

Deskripsi

Tutorial ini menjelaskan langkah-langkah setup environment Mata Kuliah Web Development menggunakan:

  • WSL (Linux di Windows)
  • Visual Studio Code System
  • Docker (Container)
  • GitHub (Version Control)
  • Laravel (Framework PHP)

🚫 PERINGATAN WAJIB BACA!!!

  • Jangan pakai jaringan Esa Unggul (Wifi/LAN)
  • Pastikan Jaringan kamu stabil dan tidak LAG
  • Siapkan Kuota yang banyak karena akan download banyak hal
  • Sudah menginstall Visual Studio Code System, Docker, Navicat v17 dari Djambred

🌐 TOOLS PERKULIAHAN

  1. WSL
  2. Docker (https://www.docker.com)
  3. Navicat (https://shared.djncloud.my.id/tools_tempur/)
  4. VSCode (https://code.visualstudio.com/download)
  5. Github (https://github.com)
  6. VPS (sewa 3 bulan)
  7. Domain (sewa 1 tahun)
  8. Cloudflared (https://www.cloudflare.com)

kalo sudah SIAP, kita gass lanjut ke tahapannya hehe 😁

1. Install WSL

Langkah:

  1. Buka Settings → System → Optional Features
  2. Klik More Windows Features
  3. Centang:
    • Virtual Machine Platform
    • Windows Subsystem for Linux
  4. Restart komputer

Install Ubuntu

  • Install Ubuntu dari Microsoft Store

2. Set WSL ke WSL2 & ROOT

Buka PowerShell (Run as Administrator):

wsl --set-default-version 2

3. Konfigurasi WSL (WAJIB)

Edit file:

nano /etc/wsl.conf

nanti sekalian ganti jika kamu masih user, ganti jadi root

Isi konfigurasi (copy semua dan masukkan kedalamnya):

[network]
generateResolvConf=false
generateHosts=false
hostname=DemoHost

[boot]
systemd=true
command=service docker start

[user]
default=root

[automount]
enabled=true
root=/
options="metadata,uid=1003,gid=1003,umask=077,fmask=11,case=off"
mountFsTab=true

[interop]
enabled=true
appendWindowsPath=true

atau bisa didapatkan dari: https://learn.microsoft.com/en-us/windows/wsl/wsl-config#configure-global-options-with-wslconfig

lalu Restart WSL: Jalankan ini di PowerShell, jangan di WSL!!!

wsl --shutdown

4. Install Dependencies

Buka WSL lagi

jalankan: bisa langsung semua ataupun satu per satu

apt update && apt upgrade -y
apt install git -y
apt install python3 python3-pip -y
apt install default-jdk -y
apt install plantuml -y
apt install jq -y

5. Setup ZSH (biar Ganteng)

ZSH

apt install zsh -y

oh my Zsh

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

Install plugin:

git clone https://github.com/zsh-users/zsh-autosuggestions $ZSH_CUSTOM/plugins/zsh-autosuggestions
git clone https://github.com/zsh-users/zsh-syntax-highlighting $ZSH_CUSTOM/plugins/zsh-syntax-highlighting

Edit config:

nano ~/.zshrc

Cari dan ubah Ubah:

plugins=(git)

Menjadi:

plugins=(git zsh-autosuggestions zsh-syntax-highlighting)

Reload:

source ~/.zshrc

6. Setup GitHub SSH

Jalankan: bisa langsung semua ataupun satu per satu

ssh-keygen -t rsa -b 4096 -C "emailkamu@gmail.com"
eval "$(ssh-agent -s)"
ssh-add ~/.ssh/id_rsa
cat ~/.ssh/id_rsa.pub

Tambahkan ke GitHub: Login Github dulu

Klik Settings → SSH Keys → Add New Key masukkan SSH key nya

Test koneksi:

ssh -T git@github.com

Kalo sudah muncul Hi (username Github Kamu), berarti sudah Berhasil dan gas lanjut!!!

7. Clone Repository

cd ~
https://github.com/illhammf/boilerplate.git
cd boilerplate

nantinya proyek yang kamu buat ada di folder /root/perkuliahan/

8. Setup GitHub Token

Buka: https://github.com/settings/tokens

atau klik Settings - Developer Settings - Personal Access Tokens - Tokens (classic)

Buat Token Baru (Generate new token):

  1. Token Classic
  2. kasih nama INITSCRIPT
  3. No expiration (tidak ada kadaluarsa)

Lalu Centang:

  • repo
  • user
  • delete_repo

Simpan ke file:

Jalankan ini satu-satu

nano .github-token
nano .github-user

Isi:

.github-token → token (klasik yang tadi dibuat)
.github-user → username GitHub kamu

Jangan upload file ini ke GitHub!

9. Jalankan Project

masuk ke dalam Boilerplate

cd boilerplate

lalu lanjut

./start.sh nama_proyek

Beberapa Troubleshooting / Kalo terjadi Error ❌ mkcert tidak ditemukan (install dulu)

apt install mkcert -y
mkcert -install

❌ Permission denied (publickey)

SSH belum dikonfigurasi dengan benar

❌ Docker build lama

ditunggu aja, Normalnya (5–20 menit)

❌ Docker tidak jalan

Pastikan Docker Desktop aktif!

❌ Code tidak ditemukan

  1. Jalankan ini
ls / | grep -E '^c$|^d$'
  1. Kalau muncul c, lanjut:
ls "/c/Program Files"
  1. Terus cari VS Code:
ls "/c/Program Files" | grep -i "code\|vs"
  1. Lalu cari executable-nya:
find "/c/Program Files" -maxdepth 3 \( -iname "code" -o -iname "code.cmd" -o -iname "Code.exe" \) 2>/dev/null
  1. Karena cmd.exe juga nggak kebaca dari PATH, coba panggil langsung pakai absolute path:
"/c/Windows/System32/cmd.exe" /c "where code"
  1. Kalau itu juga gagal, cek dulu apakah folder Windows-nya ada:
ls "/c/Windows/System32/cmd.exe"

Kalau file itu ada, berarti interop Windows ada, cuma PATH-nya belum kebaca.

  1. Kalau hasil find nanti misalnya ketemu seperti ini:
/c/Program Files/VSCode-win32-x64-1.112.0/bin/code

atau:

/c/Program Files/Microsoft VS Code/bin/code

maka isi .zshrc harus pakai /c/..., bukan /mnt/c/...

Contohnya:

export PATH=$PATH:'/c/Program Files/VSCode-win32-x64-1.112.0/bin'
  1. Lalu reload:
source ~/.zshrc
hash -r
which code
code .

nanti hasil diatas dimasukkan ke dalam nano ~/.zshrc contoh punyaku:

export PATH="$PATH:/c/Program Files/VSCode-win32-x64-1.112.0/bin"

10. Masuk ke filenya

cd /root/perkuliahan/simanis

simanis adalah nama proyek yang ku buat

11. Reload Environment

source /root/.zshrc

Gas kita tes

coba docker compose up

dcu

jika hasilnya:

[+] up 4/4
 ✔ Network crkosongdua_default Created                                                                                 0.2ss
 ✔ Container crkosongdua_db    Healthy                                                                                 12.6s
 ✔ Container crkosongdua_php   Started                                                                                 12.5s
 ✔ Container crkosongdua_nginx Started                                                                                 12.7s

berarti sukses dan coba tes di web browser masukkan:

simanis.test
  • Jika Keluar halaman Laravel, berarti BERHASIL
  • Jika tidak, cek ulang siapa tau ada kesalahan (kalo bingung tanya AI)

untuk menghentikan tinggal di compose down

dcd

dan hasilnya akan:

[+] down 4/4
 ✔ Container crkosongdua_nginx Removed                                                                                  0.6s
 ✔ Container crkosongdua_php   Removed                                                                                  0.5s
 ✔ Container crkosongdua_db    Removed                                                                                  1.0s
 ✔ Network crkosongdua_default Removed                                                                                  0.3s

12. Buka di VS Code

Ketik ini di Terminal VS Code atau lanjutin di WSL tadi juga gapapa:

cd /root/perkuliahan/simanis

lalu

code .

nanti akan otomastis masuk ke Visual Studio Code, dan sedang membuat Folder kelas masing-masing pastikan extension untuk WSL sudah dipasang di VSCode kamu!!!

Kalo sudah sampai tahap itu, Mantapp kamu sudah selesai Set-up nya :), tinggal praktikum tanggal 13 April 2026 🤩

Penjelasan Tambahan:

13. Command Shortcut

Command Fungsi

- dcu :	docker-compose up -d
- dcd :	docker-compose down
- dci :	init project
- dcp :	git add + commit + push
- dca :	php artisan

14. Struktur Project

Folder Fungsi

  • src : Laravel
  • nginx : Web server
  • php PHP : config
  • db : Database
  • docker-compose.yml Docker config