SHELL-SCRIPTING AUTOMATION WORKFLOW DEVELOPER-PRODUCTIVITY CLI LINUX MACOS BASH ZSH WEB-DEVELOPMENT DEVOPS BEST-PRACTICES

Shell Scripting Praktis untuk Web Developer: Otomatisasi Workflow Sehari-hari

⏱️ 10 menit baca
👨‍💻

Shell Scripting Praktis untuk Web Developer: Otomatisasi Workflow Sehari-hari

1. Pendahuluan

Sebagai seorang web developer, kita sering kali dihadapkan pada tugas-tugas yang repetitif, bukan? Mulai dari setup proyek baru, menjalankan beberapa perintah server secara bersamaan, hingga melakukan deployment sederhana. Tugas-tugas ini, meskipun terlihat kecil, bisa memakan banyak waktu dan energi jika dilakukan secara manual berulang kali. Bayangkan, setiap kali Anda memulai proyek baru, Anda harus git clone, npm install, cp .env.example .env, npm run dev untuk frontend, dan npm run start untuk backend. Melelahkan, bukan? 😩

Di sinilah shell scripting datang sebagai penyelamat! Shell scripting adalah cara ampuh untuk mengotomatisasi serangkaian perintah command line. Dengan sedikit kode, Anda bisa mengubah workflow yang membosankan menjadi proses yang cepat, konsisten, dan bebas error. Artikel ini akan memandu Anda memahami dasar-dasar shell scripting dan menunjukkan contoh praktis bagaimana Anda bisa menerapkannya dalam workflow web development sehari-hari Anda. Mari kita ubah pekerjaan repetitif menjadi otomatisasi yang cerdas! 🚀

2. Apa itu Shell Scripting dan Mengapa Penting untuk Web Developer?

📌 Apa itu Shell Scripting? Secara sederhana, shell script adalah sebuah file teks yang berisi urutan perintah-perintah yang dapat dieksekusi oleh shell (seperti Bash, Zsh, atau Fish) di sistem operasi berbasis Unix (Linux, macOS). Ini seperti membuat “daftar tugas” untuk komputer Anda, yang bisa dijalankan dengan satu perintah saja.

💡 Mengapa Penting untuk Web Developer? Meskipun Anda mungkin lebih akrab dengan JavaScript, Python, atau Go, shell scripting adalah skill yang sangat berharga. Berikut beberapa alasannya:

Singkatnya, shell scripting adalah “glue code” yang membuat semua bagian dari workflow pengembangan Anda bekerja sama secara harmonis.

3. Dasar-Dasar Shell Scripting yang Wajib Diketahui

Sebelum kita menyelam ke contoh praktis, mari kita pahami beberapa konsep dasar dalam shell scripting.

Shebang (#!)

Setiap shell script harus dimulai dengan baris #! yang disebut “shebang”. Ini memberitahu sistem operasi interpreter mana yang harus digunakan untuk menjalankan script ini.

#!/bin/bash
# Ini adalah script Bash sederhana
echo "Halo, Developer!"

Variabel

Anda bisa menyimpan nilai dalam variabel.

#!/bin/bash
NAMA_PROYEK="MyAwesomeApp"
echo "Memulai proyek: $NAMA_PROYEK"

Argumen Command Line

Script Anda bisa menerima input dari user sebagai argumen. $1 adalah argumen pertama, $2 kedua, dan seterusnya. $@ mewakili semua argumen.

#!/bin/bash
echo "Argumen pertama: $1"
echo "Semua argumen: $@"

Cara menjalankannya: bash script.sh arg1 arg2

Kondisional (if, else)

Untuk membuat logika berdasarkan kondisi.

#!/bin/bash
if [ "$1" == "prod" ]; then
    echo "Melakukan deployment ke produksi..."
else
    echo "Melakukan deployment ke lingkungan development."
fi

Loop (for, while)

Untuk mengulang perintah.

#!/bin/bash
for FILE in *.js; do
    echo "Memproses file JavaScript: $FILE"
done

Fungsi

Untuk mengelompokkan perintah yang dapat digunakan kembali.

#!/bin/bash

# Mendefinisikan fungsi
install_dependencies() {
    echo "Menginstal dependensi..."
    npm install
    composer install # Jika Anda menggunakan PHP
}

# Memanggil fungsi
install_dependencies

Eksekusi Perintah

Anda bisa menjalankan perintah shell biasa di dalam script.

#!/bin/bash
echo "Melihat daftar file di direktori saat ini:"
ls -la

⚠️ Izin Eksekusi: Jangan lupa memberikan izin eksekusi pada script Anda setelah membuatnya: chmod +x nama_script.sh. Setelah itu, Anda bisa menjalankannya dengan ./nama_script.sh.

4. Contoh Praktis: Automasi Setup Proyek Baru

Mari kita buat script untuk mengotomatisasi setup proyek web yang umum (misalnya, React frontend dan Node.js backend).

#!/bin/bash

# --- Konfigurasi Proyek ---
REPO_FRONTEND="https://github.com/username/my-react-app.git"
REPO_BACKEND="https://github.com/username/my-nodejs-api.git"
DIR_PROYEK="my-fullstack-app"

# --- Fungsi untuk pesan log ---
log_info() {
    echo "💡 INFO: $1"
}

log_success() {
    echo "✅ SUKSES: $1"
}

log_error() {
    echo "❌ ERROR: $1" >&2
    exit 1
}

# --- Mulai Setup ---
log_info "Memulai setup proyek $DIR_PROYEK..."

# 1. Buat direktori utama proyek
if [ -d "$DIR_PROYEK" ]; then
    log_error "Direktori $DIR_PROYEK sudah ada. Hapus atau pilih nama lain."
fi
mkdir "$DIR_PROYEK" || log_error "Gagal membuat direktori $DIR_PROYEK."
cd "$DIR_PROYEK" || log_error "Gagal masuk ke direktori $DIR_PROYEK."
log_success "Direktori $DIR_PROYEK berhasil dibuat."

# 2. Clone repositori frontend
log_info "Meng-clone repositori frontend..."
git clone "$REPO_FRONTEND" frontend || log_error "Gagal meng-clone frontend."
log_success "Frontend berhasil di-clone."

# 3. Clone repositori backend
log_info "Meng-clone repositori backend..."
git clone "$REPO_BACKEND" backend || log_error "Gagal meng-clone backend."
log_success "Backend berhasil di-clone."

# 4. Instal dependensi frontend
log_info "Menginstal dependensi frontend..."
cd frontend || log_error "Gagal masuk ke direktori frontend."
npm install || log_error "Gagal menginstal dependensi frontend."
# Contoh: Jika ada file .env.example
if [ -f ".env.example" ]; then
    cp .env.example .env
    log_info "File .env untuk frontend berhasil dibuat dari .env.example."
fi
cd ..
log_success "Dependensi frontend berhasil diinstal."

# 5. Instal dependensi backend
log_info "Menginstal dependensi backend..."
cd backend || log_error "Gagal masuk ke direktori backend."
npm install || log_error "Gagal menginstal dependensi backend."
# Contoh: Jika ada file .env.example
if [ -f ".env.example" ]; then
    cp .env.example .env
    log_info "File .env untuk backend berhasil dibuat dari .env.example."
fi
# Contoh: Jika ada migrasi database
# npm run migrate
cd ..
log_success "Dependensi backend berhasil diinstal."

log_success "Setup proyek $DIR_PROYEK selesai! 🎉"
log_info "Anda bisa masuk ke direktori $DIR_PROYEK dan mulai coding."

Dengan script ini, Anda cukup menjalankan ./setup_proyek.sh dan seluruh proyek Anda akan siap dalam hitungan detik. Praktis, bukan?

5. Contoh Praktis: Manajemen Lingkungan Lokal (Start/Stop Services)

Seringkali kita perlu menjalankan beberapa servis secara bersamaan untuk pengembangan lokal (misalnya, frontend dev server, backend API, database, Redis). Mengelola ini secara manual di beberapa terminal bisa merepotkan.

#!/bin/bash

# --- Konfigurasi ---
DIR_FRONTEND="./frontend"
DIR_BACKEND="./backend"
DIR_DOCKER="./docker" # Jika Anda menggunakan Docker Compose

# --- Fungsi untuk pesan log ---
log_info() { echo "💡 INFO: $1"; }
log_warn() { echo "⚠️ PERINGATAN: $1"; }
log_success() { echo "✅ SUKSES: $1"; }
log_error() { echo "❌ ERROR: $1" >&2; }

start_services() {
    log_info "Memulai semua layanan..."

    # Start Docker Compose services (jika ada)
    if [ -d "$DIR_DOCKER" ]; then
        log_info "Memulai Docker Compose services..."
        (cd "$DIR_DOCKER" && docker compose up -d) || log_warn "Gagal memulai Docker Compose. Lanjutkan..."
    fi

    # Start Backend
    if [ -d "$DIR_BACKEND" ]; then
        log_info "Memulai backend (di background)..."
        (cd "$DIR_BACKEND" && npm run start:dev &) # `&` untuk menjalankan di background
        BACKEND_PID=$! # Simpan PID proses backend
        echo $BACKEND_PID > .backend_pid # Simpan PID ke file
        log_success "Backend dimulai dengan PID $BACKEND_PID"
    else
        log_warn "Direktori backend tidak ditemukan di $DIR_BACKEND."
    fi

    # Start Frontend
    if [ -d "$DIR_FRONTEND" ]; then
        log_info "Memulai frontend (di background)..."
        (cd "$DIR_FRONTEND" && npm run dev &)
        FRONTEND_PID=$!
        echo $FRONTEND_PID > .frontend_pid
        log_success "Frontend dimulai dengan PID $FRONTEND_PID"
    else
        log_warn "Direktori frontend tidak ditemukan di $DIR_FRONTEND."
    fi

    log_success "Semua layanan seharusnya sudah berjalan. Cek log di terminal masing-masing atau dengan `ps aux | grep node`."
}

stop_services() {
    log_info "Menghentikan semua layanan..."

    # Stop Frontend
    if [ -f ".frontend_pid" ]; then
        FRONTEND_PID=$(cat .frontend_pid)
        log_info "Menghentikan frontend dengan PID $FRONTEND_PID..."
        kill $FRONTEND_PID
        rm .frontend_pid
        log_success "Frontend dihentikan."
    else
        log_warn "PID frontend tidak ditemukan. Mungkin sudah mati atau belum pernah dimulai."
    fi

    # Stop Backend
    if [ -f ".backend_pid" ]; then
        BACKEND_PID=$(cat .backend_pid)
        log_info "Menghentikan backend dengan PID $BACKEND_PID..."
        kill $BACKEND_PID
        rm .backend_pid
        log_success "Backend dihentikan."
    else
        log_warn "PID backend tidak ditemukan. Mungkin sudah mati atau belum pernah dimulai."
    fi

    # Stop Docker Compose services
    if [ -d "$DIR_DOCKER" ]; then
        log_info "Menghentikan Docker Compose services..."
        (cd "$DIR_DOCKER" && docker compose down) || log_warn "Gagal menghentikan Docker Compose. Lanjutkan..."
    fi

    log_success "Semua layanan dihentikan."
}

case "$1" in
    start)
        start_services
        ;;
    stop)
        stop_services
        ;;
    restart)
        stop_services
        start_services
        ;;
    *)
        log_error "Penggunaan: $0 {start|stop|restart}"
        ;;
esac

Simpan sebagai dev.sh. Untuk memulai semua layanan, jalankan ./dev.sh start. Untuk menghentikan, ./dev.sh stop. Ini jauh lebih efisien daripada membuka tiga terminal dan mengetik perintah satu per satu! 🎯

6. Contoh Praktis: Deployment Sederhana ke Server SSH

Meskipun CI/CD adalah praktik terbaik untuk deployment, untuk proyek kecil atau proof-of-concept, shell script bisa sangat membantu untuk deployment manual yang lebih cepat.

#!/bin/bash

# --- Konfigurasi Deployment ---
USER="your_ssh_user"
HOST="your_server_ip_or_domain"
REMOTE_DIR="/var/www/my-app"
LOCAL_BUILD_DIR="./dist" # Direktori hasil build frontend

# --- Fungsi untuk pesan log ---
log_info() { echo "💡 INFO: $1"; }
log_success() { echo "✅ SUKSES: $1"; }
log_error() { echo "❌ ERROR: $1" >&2; exit 1; }

# --- Validasi ---
if [ ! -d "$LOCAL_BUILD_DIR" ]; then
    log_error "Direktori build lokal '$LOCAL_BUILD_DIR' tidak ditemukan. Jalankan proses build terlebih dahulu."
fi

log_info "Memulai deployment ke $HOST:$REMOTE_DIR"

# 1. Build aplikasi frontend (jika belum)
log_info "Melakukan build frontend..."
npm run build || log_error "Gagal melakukan build frontend."
log_success "Frontend berhasil di-build."

# 2. Sinkronisasi file ke server menggunakan rsync
# -avz: archive mode, verbose, compress
# --delete: menghapus file di remote yang tidak ada di lokal
log_info "Menyinkronkan file ke server..."
rsync -avz --delete "$LOCAL_BUILD_DIR/" "$USER@$HOST:$REMOTE_DIR/" || log_error "Gagal menyinkronkan file dengan rsync."
log_success "File berhasil disinkronkan ke server."

# 3. Restart service di server (contoh: PM2, Nginx, atau service systemd)
log_info "Mereset layanan di server..."
ssh "$USER@$HOST" "sudo systemctl restart my-app-backend.service" || log_warn "Gagal mereset layanan backend. Cek secara manual."
ssh "$USER@$HOST" "sudo systemctl restart nginx.service" || log_warn "Gagal mereset Nginx. Cek secara manual."
log_success "Layanan di server berhasil direset (jika ada)."

log_success "Deployment selesai! Aplikasi Anda seharusnya sudah diperbarui. 🎉"

Simpan sebagai deploy.sh. Jalankan ./deploy.sh. Pastikan Anda sudah mengatur SSH key untuk autentikasi tanpa password agar proses berjalan mulus.

7. Tips dan Best Practices Shell Scripting

Agar shell script Anda robust dan mudah di-maintain:

  1. Gunakan Komentar: Jelaskan apa yang dilakukan script Anda, terutama bagian yang kompleks.
  2. Penanganan Error:
    • set -e: Perintah ini akan membuat script keluar segera jika ada perintah yang gagal (mengembalikan exit code non-nol).
    • set -u: Akan menghentikan script jika mencoba menggunakan variabel yang tidak didefinisikan.