Как обслуживать сгенерированное приложение Vue из маршрута Laravel?

Question

У меня нет настройки по умолчанию vue + laravel, vue полностью отдельно от laravel. В моем случае laravel только как API. Я закончил работу с приложением vue и выполнил команду build для производства.

Я получил сгенерированные ресурсы в этой форме:

Я думал о том, как загрузить на хостинг такое приложение, и пришел к выводу, что мне нужно отправлять файлы vue через мой сервер laravel.

Я написал маршрут в routs / 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', '.*');

Мой API работает как надо, но файлы из папки _frontend отправляются неправильно (css не применимо). Скриншот

Должно быть так: Снимок экрана

Оказалось, что все ответы с сервера стоят Content-Type: text/html

Как правильно открыть свое приложение через сервер?

Answer 1

Из этого примера , я понял, как объединить Vue CLI с Laravel.

Answer 2

Вы должны обслуживать свое интерфейсное приложение напрямую через Nginx и настраивать обратный прокси-сервер для доступа к API через Laravel:

Сначала настройте приложение laravel так, чтобы Nginx мог его обслуживать (я заставил Nginx прослушивать случайный порт для этой конфигурации):

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...
}

Затем обслуживайте свое веб-приложение и совершайте звонки, которые отправляются на конечную точку /api, и переходят в приложение laravel, а не в интерфейсное приложение. Сделайте так, чтобы он прослушивал порт 80, если вы хотите обслуживать через http или 443, если вы хотите, чтобы он обслуживался через 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;
    }
}