SPA ve Laravel Entegrasyonu için Dizin Yapısı ve Nginx Yapılandırması

Son güncelleme: 15 Mart 2026 13:55

Bu makale, Laravel ile yapılan bir uygulamanın admin paneli için SPA uygulaması gerçekleştirirken Laravel dizin yapısının ve Nginx yapılandırma dosyasının nasıl değiştirileceğine dair kısa bir nottur.

Bu yapıyı iki ana parçaya ayırdım: backend-app backend için ve frontend-app frontend için. backend-app, kullanıcı arayüzü ekranlarını, API’leri ve arka uç işlemlerini yönetirken, frontend SPA admin panelinden sorumludur. Kullanıcı arayüzü ekranlarının da frontend-app altında olması gerekebilir, ancak bunu daha sonraki bir bölümde ele alacağım.
Böyle bir ayrım yapıyorsak tam yığın bir çerçeveden uzaklaşmak daha iyi olabilir… Şu an için ön yüzü ve arka ucu ayrı yönetmeyi kolaylaştıracak bir yapı oluşturdum.

Bu yapı, GitHub’da “Laravel SPA” veya “Laravel React” araması yaparken bulduğum yaygın kurulumlara dayanmaktadır.

.
├── backend-app
│   ├── app
│   ├── bootstrap
│   ├── config
│   ├── database
│   ├── node_modules
│   ├── public
│   ├── resources
│   ├── routes
│   ├── storage
│   ├── tests
│   └── vendor
└── frontend-app
    ├── _components
    ├── dist
    ├── node_modules
    └── src

backend-app ve frontend-app için location direktiflerini ayırdım. Eğer bunları server direktifi ile ayırmış olsaydım, alt alan adları oluşturmak gerekir ve bu uygulama için tuhaf olacağını düşündüm, bu nedenle bunu tercih etmedim. Yapılandırma üzerinde daha fazla çalışmam gerektiğini hissediyorum, ama lütfen beni affedin (_).

server {
    listen       80;
    server_name  laravel-spa;

    root /var/www/html/project/laravel-spa/backend-app/public;

    charset UTF-8;

    # Hata Sayfaları
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # backend-app
    location / {
        index index.php index.html index.htm;
        try_files $uri /index.php?$query_string;
    }

    # frontend-app
    location /dashboard {
        alias /var/www/html/project/laravel-react-redux-blog-boilerplate/frontend-app;
        index index.html index.html;
        try_files $uri $uri/ /dashboard//index.html;
    }

    # php-fpm
    location ~ \.php$ {
        fastcgi_pass   unix:/var/run/php-fpm/php-fpm.sock;
        fastcgi_index  index.php;
        fastcgi_param  SCRIPT_FILENAME  $document_root/$fastcgi_script_name;
        include        fastcgi_params;
    }
}

Not (Güncellenmiştir 2017/4/2)

SPA içinde kök altında (örneğin, laravel-app/dashboard/post) doğrudan erişim veya yenileme sırasında meydana gelen 404 hatasını düzelttim.

Düzeltmeden önce:

# frontend-app
location /dashboard {
    alias /var/www/html/project/laravel-react-redux-blog-boilerplate/frontend-app;
    index index.html index.html;
}

Düzeltmeden sonra:

# frontend-app
location /dashboard {
    alias /var/www/html/project/laravel-react-redux-blog-boilerplate/frontend-app;
    index index.html index.html;
    try_files $uri $uri/ /dashboard//index.html;
}