如何在 Digital Ocean 上使用 Nuxt 和 Laravel 为 Web 应用程序设置 Nginx 配置？

Question

我正在 DigitalOcean Droplet 上设置一个应用程序，使用 Nuxt 3 作为前端，使用 Laravel 8 作为后端。 我已经安装了 Nginx 用于服务器虚拟化。 我当前的 /etc/nginx/sites-available 结构是 [api] 和 [md-alluminio]。

在 [api] 文件中我有后端的配置：

server {
    listen 8000;
    server_name 157.230.109.19;
    root /var/www/api/public;    #This is the path for the backend folder

    index index.php;

    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/php8.2-fpm.sock;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        include fastcgi_params;
    }

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

在 [md-alluminio] 文件中，我有前端的配置：

server {
    listen 80;
    listen [::]:80;
    index index.html;
    root /var/www/md-alluminio;    #This is the path for the frontend folder
    server_name 157.230.109.19;

    location / {
       proxy_pass http://localhost: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;
    }
}

如果我浏览IP地址（157.230.109.19），服务器会给我“502 Bad Gateway”错误，如果我浏览带有后端端口的IP地址，它工作正常（http://157.230.109.19： 8000/).

我认为这可能是 Nginx 配置的问题，因为在我的 Mamp 服务器本地它工作正常，有人知道我做错了什么？

我已经尝试过重新启动 Nginx 和服务器。我认为这可能是 [md-alluminio] 文件的 location / { ... } 部分的问题，如果我删除它，错误从 502 更改为 403。

Answer 1

问题似乎出在前端应用程序的 Nginx 配置上。让我们通过确保前端请求正确代理到您的 Nuxt 应用程序来解决这个问题。

这是您的 md-alluminio 文件的更新配置：

server {
    listen 80;
    listen [::]:80;
    index index.html;
    root /var/www/md-alluminio;    #This is the path for the frontend folder
    server_name 157.230.109.19;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /api {
        proxy_pass http://localhost:8000;  # Adjust the port if your Laravel backend is running on a different port
        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;
    }
}

进行这些更改后，不要忘记重新加载 Nginx 以使更改生效：

sudo systemctl reload nginx