使用 Laravel 后端部署 Vue Cli 3 SPA

Question

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

我搜索了很多。我看到了必须将 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('/') returns 静态页面，包括静态资产和所有 api 路由通过 Route::any('/api/foo').

处理

Answer 2

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

文件夹结构

example/dist - vue 应用程序
example/laravel - laravel api 申请
example/laravel/public - laravel public 目录
example/laravel/public/images - laravel api 图片目录

网址

example.lo - vue 应用程序
示例。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

Deploying Vue Cli 3 SPA with Laravel backend

laravel

vue.js

vue-cli-3