TL;DR
TL;DR
- Yerel bir Laravel uygulamasını genel bir HTTPS tüneli üzerinden paylaşmak, CSS’nin yüklenmemesi gibi sorunlara neden olabiliyor, çünkü
php artisan servearka planda düz HTTP kullanıyor ve bu da Livewire/Flux’ınhttp://URL’leri yayması ile sonuçlanıyor; tarayıcı da bu URL’leri karışık içerik olarak engelliyor. - Protokolü
trustProxies(at: '*')ile düzeltin, varlıkların kaynağını iseAPP_URLveASSET_URL‘yi tünel URL’sine yönlendirecek şekilde ayarlayın. - Bu işlemleri
composer sharekomutuna sararak, varlıkları oluşturup, tüneli açıp,.envdosyasını yeniden yazarak ve çıkışta geri yükleyerek otomatikleştirdim. Detaylara cleaniquecoders/kickoff‘dan ulaşabilirsiniz.
Problem
Problem
Bir takım arkadaşınıza çalışmanızın ilerleme aşamasını yayımlamadan göstermek istiyorsunuz. Klasik yöntem: cloudflared tunnel (veya ngrok) ile yerel php artisan serve komutunuza yönlendiren genel bir https://... URL’si alırsınız.
Fakat iki sorun ortaya çıkmaktadır.
| Belirti | Sebep | Çözüm |
|---|---|---|
| Takım arkadaşı ham HTML görüyor, stil yok | @vite geliştirme sunucunuza, yerel localhost‘a işaret ediyor (public/hot var) | Varlıkları oluşturun, public/hot dosyasını silin |
| Konsol: “karışık içerik engellendi”, rasgele 419 hataları | Tünel HTTPS ama artisan serve HTTP → request()->isSecure() false → http:// varlık/script URL’leri | Proxy’yi güvenilir olarak ayarlayın + ASSET_URL ayarlayın |
Çözüm 1: Proxy’yi güvenilir olarak işaretleyin
Çözüm 1: Proxy’yi güvenilir olarak işaretleyin
Tünel TLS’yi sonlandırır ve düz HTTP’yi uygulamanıza X-Forwarded-Proto: https başlığı ile iletir. Laravel, bu başlığı ancak proxy’nin güvenilir olduğunu belirtirseniz dikkate alır.
// bootstrap/app.php
->withMiddleware(function (Middleware $middleware) {
// Tünelden X-Forwarded-Proto'yu dikkate alın, böylece isSecure() true olur
// ve Livewire/Flux https:// URL'leri verir (karışık içerik engellenmez).
$middleware->trustProxies(at: '*');
// ...
})
at: '*' tüm proxy’leri güvenilir olarak işaret eder. Bu, kendi makinelerinizde geçici tüneller için uygundur. Üretimde, belirli yük dengelemesi IP’lerini güvenilir kılın – bir wildcard kullanmak, istemcinin iletilen başlıkları taklit etmesine olanak tanır.
Çözüm 2: Varlıkları tünele yönlendirin
Çözüm 2: Varlıkları tünele yönlendirin
HTTPS algılansa bile, @vite ve varlık yardımcıları APP_URL üzerinden çözülür. Eğer bu hala http://localhost ise, genel ziyaretçinin tarayıcısı localhost‘dan varlıkları almaya çalışır. Dolayısıyla, tünel açıldığında her ikisini de tünel URL’sine yönlendirin:
# tünelin genel https URL'sini yazdırmasını bekleyin, ardından:
set_env APP_URL "$PUBLIC_URL"
set_env ASSET_URL "$PUBLIC_URL"
php artisan config:clear
Bu süreçte dikkat etmeniz gereken bir alışkanlık: öncelikle .env yedeğini alıp ardından çıkışta geri yükleyin, böylece geçici bir URL konfigürasyona bırakılmaz.
ENV_BACKUP="$(mktemp)"; cp .env "$ENV_BACKUP"
cleanup() {
rm -f public/hot
cp "$ENV_BACKUP" .env # APP_URL / ASSET_URL'yi birebir geri yükle
php artisan config:clear >/dev/null 2>&1 || true
}
trap cleanup EXIT
trap 'exit 130' INT TERM
Tek Komut
Tek Komut
Bunları bir araya sararak, composer share her seferinde sıkıcı sırayı gerçekleştirir: npm run build → rm public/hot → php artisan serve → bir Cloudflare (veya ngrok) tüneli aç → genel URL’yi al → APP_URL/ASSET_URL‘yi ayarla → çıkışı takip et → Ctrl+C ile çıkınca .env geri yükle. Cloudflare’ın hızlı tüneli hesap gerektirmediği için varsayılan olarak kullanılır.
composer share
│
├─ npm run build (gerçek varlıklar, geliştirme sunucusu değil)
├─ rm public/hot ( @vite'i localhost'tan ayırın)
├─ php artisan serve (:8000)
├─ cloudflared tunnel -> https://xxxx.trycloudflare.com
├─ set APP_URL+ASSET_URL -> o URL'yi ayarla, config:clear
└─ Ctrl+C -> .env'i geri yükle, public/hot'ı sil
Alınacak Ders
Alınacak Ders
Tünel asıl zor kısım değildir – protokol uyumsuzluğu asıl sorun olanıdır. İletilen protokolü güvenilir hale getirin, varlık URL’sini genel ana makineye sabitleyin ve her zaman .env‘yi geri yükleyin. Bütün bu işlemleri tek bir komut haline getirerek “bana bir bağlantı gönder” ifadesinin beş saniye içinde sonuçlanmasını sağlayın; beş dakikalık boş CSS hata ayıklama süresine son verin.
Kod cleaniquecoders/kickoff‘da mevcuttur.
Kaynak: Orijinal Makale


