Question

我有一个Vue Cli 3 SPA应用程序，可以对Laravel后端进行api调用。我已经在DigitalOcean上创建了一个LEMP液滴，并且已经在/var/www/html目录中克隆了这两个项目。 api/代表后端，web/代表前端。我已将nginx root配置为web/dist/index.html。现在，由于项目的根目录为index.html，我该如何进行api调用？

我搜索了很多东西。我看到了一些解决方案，必须将dist文件夹的内容复制到api/public，并将nginx的根调整为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应用程序。如果我尝试通过Vue应用程序对XXX.XXX.XX.XXX/api/something进行api调用，则我有405 Method not allowed

Answer 1

您需要为前端和后端设置两个独立的服务器。您可以通过api.example.com使api可访问，而通过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;    
  }
}

您还可以将所有流量定向到index.php并进行设置，以使Route::any('/')返回静态页面，包括静态资产，并且所有api路由都通过Route::any('/api/foo')处理。

Answer 2

以下配置适用于本地环境-ubuntu上的主目录。

文件夹结构

example / dist-vue应用程序
example / laravel-laravel API应用程序
example / laravel / public-laravel公共目录
example / laravel / public / images-laravel api图片目录

网址

example.lo-vue应用程序
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;
    }
}

使用Laravel后端部署Vue Cli 3 SPA

2 个答案: