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

Posted 2023-02-22

【中文标题】Nuxt.js 前端和 laravel api 在同一个 nginx 服务器上 数字海洋

【英文标题】：Nuxt.js front end and laravel api on same nginx server Digital ocean

【发布时间】：2021-03-29 19:59:41

【问题描述】：

我有一个用于前端的 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 时出于某种原因。它只是挂起。

是否有一种特殊的方式可以让我按预期运行？

【参考方案1】：

使用根

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;