Deployment Otomatis TypeScript ke Server: CI/CD Step Lanjutan untuk VPS, Vercel, dan Netlify

Setelah menguasai Continuous Testing, tahap berikutnya dalam pengembangan profesional adalah deployment otomatis. Tujuannya sederhana: setiap kali kamu push kode ke branch utama, sistem langsung membangun (build), menguji (test), dan mengirimkan hasilnya ke server produksi — tanpa campur tangan manual.

Dengan pipeline CI/CD ini, proses deploy menjadi lebih cepat, konsisten, dan minim kesalahan. Cocok untuk proyek TypeScript apa pun — baik itu REST API di VPS, aplikasi front-end di Vercel, atau Netlify.

Arsitektur CI/CD untuk TypeScript

Tahapan umum pipeline otomatis TypeScript adalah:

1. Build: Transpile TypeScript → JavaScript.

2. Test: Jalankan unit test (misalnya Jest/Vitest).

3. Deploy: Kirim hasil build ke server (VPS, Vercel, Netlify, dll).

Ilustrasi sederhana:

Developer Push → GitHub Actions/GitLab CI →
Build (tsc) → Test (Jest/Vitest) → Deploy ke Server

Persiapan Dasar Proyek TypeScript

Pastikan kamu sudah memiliki:

• tsconfig.json yang berisi konfigurasi build.

• Script build & test di package.json:

{
  "scripts": {
    "build": "tsc",
    "test": "jest --coverage"
  }
}

Jalankan build lokal untuk memastikan semuanya berjalan baik:

npm run build

Deployment Otomatis ke VPS (Via GitHub Actions)

Jika kamu memiliki VPS sendiri (misal Ubuntu server) dan ingin pipeline otomatis mengirim hasil build ke sana, kamu bisa memanfaatkan SSH dan GitHub Actions.

Langkah 1: Tambahkan Secret

Masukkan data server ke GitHub Secrets (Repo → Settings → Secrets → Actions):

• SERVER_IP → IP VPS

• SERVER_USER → user SSH (misal ubuntu)

• SERVER_KEY → isi private key SSH

Langkah 2: Buat File Workflow

.github/workflows/deploy-vps.yml

name: Deploy ke VPS

on:
  push:
    branches: [ main ]

jobs:
  build-test-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout kode
        uses: actions/checkout@v3

      - name: Install Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 18

      - name: Install dependencies
        run: npm install

      - name: Build project
        run: npm run build

      - name: Run tests
        run: npm test

      - name: Deploy ke VPS
        uses: appleboy/scp-action@v0.1.7
        with:
          host: ${{ secrets.SERVER_IP }}
          username: ${{ secrets.SERVER_USER }}
          key: ${{ secrets.SERVER_KEY }}
          source: "dist/"
          target: "/var/www/myapp"

      - name: Restart server (PM2)
        uses: appleboy/ssh-action@v1.0.3
        with:
          host: ${{ secrets.SERVER_IP }}
          username: ${{ secrets.SERVER_USER }}
          key: ${{ secrets.SERVER_KEY }}
          script: |
            cd /var/www/myapp
            npm install --production
            pm2 restart myapp || pm2 start dist/index.js --name myapp

Hasil:

• Setiap kali push ke main, pipeline otomatis build + test + upload ke VPS.

• Server otomatis restart menggunakan PM2.

Deployment Otomatis ke Vercel

Untuk aplikasi front-end (Next.js, React, Astro, dsb), Vercel menyediakan integrasi CI/CD bawaan.
Namun kamu tetap bisa menghubungkan pipeline custom agar build & test tetap dijalankan sebelum Vercel deploy.

Langkah 1: Setup Workflow di GitHub

.github/workflows/vercel.yml

name: Build & Deploy ke Vercel

on:
  push:
    branches: [ main ]

jobs:
  build-test-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout kode
        uses: actions/checkout@v3

      - name: Install Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 18

      - name: Install dependencies
        run: npm install

      - name: Build TypeScript
        run: npm run build

      - name: Run tests
        run: npm test

      - name: Deploy ke Vercel
        uses: amondnet/vercel-action@v20
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
          working-directory: ./

Catatan:

• Ambil VERCEL_TOKEN, ORG_ID, dan PROJECT_ID dari dashboard Vercel.

• Setelah workflow sukses, proyek akan otomatis dideploy ke Vercel domain (misal: myapp.vercel.app).

Deployment Otomatis ke Netlify

Netlify juga punya sistem CI/CD built-in, tapi kamu bisa memadukannya dengan testing pipeline manual.

Contoh Workflow

.github/workflows/netlify.yml

name: Deploy ke Netlify

on:
  push:
    branches: [ main ]

jobs:
  build-test-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout kode
        uses: actions/checkout@v3

      - name: Install Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 18

      - name: Install dependencies
        run: npm install

      - name: Build project
        run: npm run build

      - name: Test project
        run: npm test

      - name: Deploy ke Netlify
        uses: nwtgck/actions-netlify@v2.0
        with:
          publish-dir: ./dist
          production-deploy: true
          netlify-token: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          site-id: ${{ secrets.NETLIFY_SITE_ID }}

Hasil:

Setiap push ke main → Netlify otomatis build hasil dist kamu dan deploy ke domain netlify.app.

Tips Optimasi Pipeline CI/CD

Agar pipeline CI/CD TypeScript berjalan cepat dan stabil:
✅ Gunakan dependency caching (actions/cache) untuk mempercepat instalasi.
✅ Pisahkan job build/test/deploy agar error lebih mudah dilacak.
✅ Gunakan environment staging sebelum production.
✅ Tambahkan notifikasi ke Slack/Telegram saat deploy sukses/gagal.
✅ Gunakan linting otomatis (eslint) di tahap pre-test.

Kesimpulan

Dengan menerapkan CI/CD untuk TypeScript, kamu menciptakan workflow pengembangan modern yang:
Otomatis build dan test setiap commit.
Aman karena hanya kode yang lolos test yang dideploy.
⚡ Cepat dan konsisten tanpa campur tangan manual.

Baik kamu deploy ke VPS, Vercel, atau Netlify, prinsipnya tetap sama:

Automasi setiap langkah — dari build, test, hingga deployment.

Dengan pipeline seperti ini, kamu tidak hanya mempercepat proses rilis, tapi juga memastikan setiap versi aplikasi selalu stabil dan siap produksi.