How to serve generated Vue app from Laravel route?

Question

I have not a default setup vue + laravel, vue completely separately from laravel. In my case laravel only as API. I finished doing a vue app and did a build command for production.

I got the generated resources in this form:

I was thinking about how to upload to the hosting such an application and came to the conclusion that i need to send vue files through my laravel server.

I wrote route in routes/web.php :

Route::get('{uri}', function ($uri = '/') {
    $sourceByUri = public_path('_frontend/' . $uri);

    if (is_file($sourceByUri)) {
        return file_get_contents($sourceByUri);
    }

    $indexSpa = public_path('/_frontend/index.html');

    return file_get_contents($indexSpa);
})->where('uri', '.*');

My api works as it should, but the files from the folder _frontend are not sent correctly(css not applicable). Screenshot

Should be like this: Screenshot

It turned out that all responses from the server are worth Content-Type: text/html

How do I properly open my application through a server?

Answer 1

You should serve your front-end app directly through Nginx and configure a reverse proxy to access the API through Laravel:

First, configure your laravel app so that Nginx can serve it (I made Nginx listen on a random port for this configuration):

server {
    listen 1222;

    root /var/www/html/your-app/public;
    index index.php;

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

    # Insert PHP configs here etc...
}

Then, serve your webapp and make calls that are going to the /api endpoint go to your laravel app instead of your front-end app. Make it listen on port 80 if you want to serve through http or 443 if you want it to be served through https:

server {
    listen 80;
    server_name your-app.com;

    root /var/www/your-app/public/_frontend;

    location /api {
        # Backend server to forward requests to/from
        proxy_pass          http://localhost:1222;
        proxy_http_version  1.1;
        proxy_set_header        X-Real-IP       $remote_addr;
        proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
        client_max_body_size 500M;
    }

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

Answer 2

从这个示例中 ，我了解了如何将Vue CLI与Laravel结合使用。