Не удалось установить nginx с помощью Nuxt Laravel API с HTTPS

#laravel #vue.js #nginx #nuxt.js #reverse-proxy

#laravel #vue.js #nginx #nuxt.js #обратный прокси

Вопрос:

Мое приложение разделено как:

  • Веб-сайт интерфейса Nuxt в репозитории
  • Серверная часть Laravel И API в другом репозитории (тот же сервер)

Чего я пытаюсь добиться, так это разделить nginx на два серверных блока, чтобы:

  • Nuxt обслуживается через порт 3000 (обратный прокси)
  • Серверная часть Laravel обслуживается как обычная веб-страница php на порту 80
  • API обслуживается на порту 8000, так что веб-сайт может извлекать данные

Это мои HTTP-конфигурации:

API и серверная часть

 server {
    listen 80;
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    root /var/www/api/public;
    server_name api.website.com;

    index index.php index.html;

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

    location /api {
        proxy_set_header      Host $host;
        proxy_set_header      X-Real-IP $remote_addr;
        proxy_set_header      X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header      X-Forwarded-Proto $scheme;
        proxy_pass            http://localhost:8000;
        proxy_read_timeout    90;

        proxy_redirect        http://localhost:8000 https://api.website.com;
    }

    location ~ .php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/run/php/php7.4-fpm.sock;
    }

    location ~ /.ht {
        deny all;
    }

    ssl_certificate /etc/letsencrypt/live/api.website.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/api.website.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
}
  

Веб-сайт

 server {
    listen 80;
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name website.com www.website.com;

    location / {
        proxy_set_header Host               $host;
        proxy_set_header X-Real-IP          $remote_addr;
        proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto  $scheme;
        proxy_redirect                      off;
        proxy_read_timeout                  1m;
        proxy_connect_timeout               1m;
        proxy_pass                          http://127.0.0.1:3000;
    }

    ssl_certificate /etc/letsencrypt/live/www.website.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/www.website.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
}
  

С этими настройками в nginx я получаю 403, когда пытаюсь связаться с бэк-офисом, и пока веб-сайт работает, я получаю тайм-аут шлюза («Произошла ошибка при попытке прокси-сервера») при любом запросе, который я делаю.

Как я могу это сделать, чтобы я мог:

  • Перейдите к api.website.com и иметь Laravel Vue.js веб-сайт открыт
  • Перейдите к website.com и открыть скомпилированный веб-сайт Nuxt и получить данные API из api.website.com:8000
  • Оба они находятся под HTTPS

Любая помощь была бы высоко оценена.