Uzak VPS üzerinde Vite HMR Laravel çalıştıramayacağını düşündüm. Yanıldım.

Laravel ve Inertia kullanarak bir React projesi oluşturmak ve bunu bir VPS’te dağıtmakla ilgili bir işlem akışım var. İş akışım şu şekildeydi:

npm run build
php artisan serve --host 0.0.0.0

Sorun

npm run dev komutunu çalıştırdığınızda, Vite bir gelişim sunucusu ve HMR için bir WebSocket başlatır. Varsayılan olarak localhost‘a bağlanır — bu, yalnızca aynı makinadaki işlemlerin ona ulaşabileceği anlamına gelir. Dizüstü bilgisayarınızda oturan tarayıcı, buna bağlanamaz.

Ancak, Vite’in tüm arayüzlere bağlanmasını sağlayan bir server.host seçeneği vardır. Ayrıca, tarayıcıya WebSocket için nereye bağlanması gerektiğini bildiren bir server.hmr.host seçeneği bulunur. Çoğu eğitimin atladığı anahtar nokta budur.

Adım 1 — vite.config.ts’yi güncelle

Mevcut yapılandırmanıza bir server bloğu ekleyin. Diğer her şey aynı kalacak:

import { wayfinder } from '@laravel/vite-plugin-wayfinder';
import tailwindcss from '@tailwindcss/vite';
import react from '@vitejs/plugin-react';
import laravel from 'laravel-vite-plugin';
import { defineConfig } from 'vite';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.tsx'],
            ssr: 'resources/js/ssr.tsx',
            refresh: true,
        }),
        react({
            babel: { plugins: ['babel-plugin-react-compiler'] },
        }),
        tailwindcss(),
        wayfinder({ formVariants: true }),
    ],
    esbuild: { jsx: 'automatic' },

    // 👇 bu bloğu ekleyin
    server: {
        host: '0.0.0.0',
        port: 5173,
        hmr: {
            host: 'YOUR_VPS_IP',  // e.g. '123.123.123.123'
            port: 5173,
        },
    },
});

Niçin hmr.host önemli: Olmadan, tarayıcı WebSocket’i localhost üzerinden açmaya çalışır — bu, dizüstü bilgisayarınızdır, VPS değil. Sessizce hata verir ve canlı güncellemeleri göremezsiniz.

Adım 2 — .env dosyasını güncelle

Laravel Vite eklentisi, arka uç nereye bağlı olduğunu anlamak için APP_URL‘ya bakar. Bunu gerçek VPS IP’niz ve portunuz ile ayarlayın:

APP_URL=http://YOUR_VPS_IP:6040    # VPS'nin genel IP'si

Çalıştığını anladığınızda, npm run dev komutunu çalıştırdığınızda şunu göreceksiniz:

➜  APP_URL: http://YOUR_VPS_IP:6040    # VPS'nin genel IP'si

Adım 3 — firewall’da portları aç

Burada en uzun süre takıldım. UFW tek başına yeterli değil; eğer bir bulut sağlayıcısında iseniz.

OS güvenlik duvarı (UFW):

sudo ufw allow 5173
sudo ufw allow 6040
sudo ufw reload

Bulut güvenlik duvarı (Hetzner / DigitalOcean / AWS):

Çoğu VPS sağlayıcısı, sunucunuzun önünde duran ayrı bir bulut düzeyinde güvenlik duvarına sahiptir. UFW, trafiği hiç görmez. Bu portu orada da açmanız gerekiyor.

Hetzner için: console.hetzner.cloud → Güvenlik Duvarları → güvenlik duvarınız → Giriş kuralı ekle → TCP port 5173.

💡 Güvenlik ipucu: 0.0.0.0/0 yerine, port 5173’ü yalnızca kendi IP’nize kısıtlayın. Geliştirici sunucunun hiç kimseye açık olmamasını istiyorsunuz.

Adım 4 — her iki sunucuyu çalıştır

Daha fazla terminal oturumu açın (veya tmux kullanın):

# terminal 1 — Laravel
php artisan serve --host 0.0.0.0 --port 6040

# terminal 2 — Vite
npm run dev

Özet

vite.config.json dosyasını düzenleyin.

Artık tarayıcınızda http://YOUR_VPS_IP:6040 adresini açın, bir React bileşenini düzenleyin ve anında güncellendiğini izleyin. Yeniden inşa etmeye gerek yok. Yenileme yok. Uzaktan bir VPS’te tam HMR.