Развертывание Vue Cli 3 SPA с Laravel бэкэндом - PullRequest
Новая
       18

Развертывание Vue Cli 3 SPA с Laravel бэкэндом

0 голосов
/ 02 марта 2020

У меня есть Vue SPA-приложение Cli 3, которое выполняет вызовы API для Laravel Backend. Я создал каплю LEMP в DigitalOcean и клонировал два проекта в каталоге /var/www/html. api/ для внутреннего интерфейса, web/ для внешнего интерфейса. Я настроил nginx root на web/dist/index.html. Теперь, как я могу делать вызовы API, поскольку root проекта - index.html?

Я много искал. Я нашел решения, в которых я должен скопировать содержимое папки dist в api/public и настроить nginx root на api/public/index.html. Но это не меняет того факта, что я до сих пор не могу делать вызовы API, потому что index.php никогда не достигается.

Не могли бы вы посоветовать мне, как вы это делаете? Должен ли я создать поддомен?

Спасибо!

ОБНОВЛЕНИЕ

Я пробовал это в соответствии с ответом oshell: 

# 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;
        }

}

Теперь, что бы я ни открывал, оно просто идет в приложение vue. Если я попытаюсь сделать вызов API для XXX.XXX.XX.XXX/api/something из приложения vue, у меня будет 405 Method not allowed

1 Ответ

1 голос
/ 02 марта 2020

Вам необходимо настроить два отдельных сервера для внешнего и внутреннего интерфейса. Вы можете сделать API доступным через api.example.com и интерфейс через example.com. Конфигурация nginx должна выглядеть примерно так: 

#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;    
  }
}

Вы также можете перенаправить весь трафик c на ваш индекс. php и настроить его так, чтобы Route::any('/') возвращал данные c страница, включая ресурсы stati c и все маршруты API, обрабатываются с помощью Route::any('/api/foo').

...