时间戳

首页 > 解决方案 > Nuxt.js 前端和 laravel api 在同一个 nginx 服务器上 数字海洋

laravel - Nuxt.js 前端和 laravel api 在同一个 nginx 服务器上 数字海洋

问题描述

我有一个用于前端的 nuxt 应用程序 SPA 和一个 laravel API。Nuxt 调用 API 请求。我正在尝试将其部署在一个数字海滴中，但我遇到了问题。我的 laravel 应用程序似乎正在运行，但我无法让 nuxt 显示这里是我的设置

Ubuntu 20 nginx 1.18 php 7.4

laravel nginx 服务器块

server {
    listen 80;
    server_name DROPLET_IP;
    root /var/www/laravel-api/public;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";

    index index.html index.htm index.php;

    charset utf-8;

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

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    error_page 404 /index.php;

    location ~ \.php$ {
        fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        include fastcgi_params;
    }

    location ~ /\.(?!well-known).* {
        deny all;
    }

}

这是我的 nuxt 服务器块：

server {
    listen 3000;
    server_name DROPLET_IP;
    keepalive_timeout 60;
    index index.html;

    location / {
        root /var/www/nuxt-front/dist;

    }
}

这两个都在它们自己的站点中可用，并且启用站点的符号链接。

出于某种原因，当我访问http://DROPLET_IP:3000. 它只是挂起。

有没有一种特殊的方式我应该这样做才能按预期运行？

标签： laravelvue.jsubuntunginxnuxt.js

解决方案

使用根

server {
    listen 80;
    server_name example.com;
    keepalive_timeout 60;
    root /var/www/nuxt-front/dist;    
  
}

或者

使用代理通行证

server {
    listen 80;
    server_name example.com;
    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

推荐阅读