CODEWITHSUNDEEP
laravelvue.jsvue-cli-3
Nikolay Traykov
Nikolay Traykov

Reputation: 1695

Deploying Vue Cli 3 SPA with Laravel backend

I have a Vue Cli 3 SPA application which makes api calls to a Laravel Backend. I've created a LEMP droplet on DigitalOcean, and I've cloned the two projects in the /var/www/html directory. api/ for the backend, web/ for the frontend. I've configured nginx root to web/dist/index.html. Now, how can I make api calls, since the root of the project is index.html?

I've searched a lot. I saw solutions where I must copy the dist folder's contents to api/public, and adjust nginx's root to be api/public/index.html. But that doesn't change the fact that I still can't make api calls, because index.php is never reached.

Could you please advice me how you do it? Should I create a subdomain?

Thanks!

UPDATE

I've tried this according to oshell's answer:

# For the vue app
server {
        listen 80;

        root /var/www/html/web/dist;

        index index.html;

        server_name XXX.XXX.XX.XXX # the ip addreess that I have

        error_page 404 /;

        location / {
                try_files $uri $uri/ /index.html;
        }
}

# for the laravel application
server {
        listen 80;
        root /var/www/html/api/public;
        index index.php;
        server_name XXX.XXX.XX.XXX/api;

        location / {
                try_files $uri $uri/ /index.php?$query_string;
        }

        location ~ \.php$ {
               include snippets/fastcgi-php.conf;
               fastcgi_pass             unix:/var/run/php/php7.2-fpm.sock;
               fastcgi_param   SCRIPT_FILENAME $document_root$fastcgi_script_name;
        }

}

Now whatever I open, it just goes to the vue application. If I try to make an api call to XXX.XXX.XX.XXX/api/something from the vue app, I've got 405 Method not allowed

Upvotes: 0

Views: 2182

Answers (2)

Igor Balamut
Igor Balamut

Reputation: 11

The following configuration works for me on local environment - home directory on ubuntu.

Folder structure

  • example/dist - vue application
  • example/laravel - laravel api application
  • example/laravel/public - laravel public directory
  • example/laravel/public/images - laravel api images directory

Urls

  • example.lo - vue application
  • example.lo/api - laravel api
server {   

    # server name and logs
    server_name example.lo;
    access_log /var/log/nginx/example.lo_access.log;
    error_log /var/log/nginx/example.lo_error.log;

    root /home/username/example/laravel/public/;    
    index index.html index.php;

    # location for vue app 
    location / {
        root /home/username/example/dist/;
        try_files $uri $uri/ /index.html;
    }

    # location for laravel api
    location /api {
        try_files $uri $uri/ /index.php$is_args$args;
    }

    # location for api images
    location /images {
        try_files $uri $uri/ =404;
    }

    # pass the PHP scripts to FastCGI
    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/run/php/php7.4-fpm.sock;
    }
}

Upvotes: 1

oshell
oshell

Reputation: 9103

You need to setup two separated servers for frontend and backend. You could make api reachable via api.example.com and frontend via example.com. The nginx config should look something like this:

#laravel.conf
server {
    listen 80;
    root /var/www/html/project_name/api;
    index  index.php index.html index.htm;
    server_name  api.example.com www.api.example.com;

    location / {
        try_files $uri $uri/ /index.php?$query_string;        
    }

    location ~ \.php$ {
      include snippets/fastcgi-php.conf;
      fastcgi_pass             unix:/var/run/php/php7.2-fpm.sock;
      fastcgi_param   SCRIPT_FILENAME $document_root$fastcgi_script_name;
    }
}

#vue.conf
server {
  listen 80;
  root /var/www/html/project_name/web/dist;
  index index.html;
  server_name example.com www.example.com;

  location / {
    try_files $uri $uri/ /index.html;    
  }
}

You could also direct all traffic to you index.php and set it up so Route::any('/') returns the static page, including the static assets and all api routes are handled via Route::any('/api/foo').

Upvotes: 2

Related Questions