angular + laravel nginx на одном хосте

Question

angular + laravel nginx на одном хосте

Рейтинг: 0Ответов: 1Опубликовано: 23.03.2023

Я использую Angular 15 и Laravel 9 на сервере на одном порту (80). Laravel выступает в качестве API и файлового сервера. В Nginx я указал локацию / для фронтенда

 location / {
    root /var/www/front;
    try_files $uri $uri/ /index.html;
}

и /api для бекенда

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

Также я настроил CORS в laravel.

'paths' => ['api/*', 'sanctum/csrf-cookie', 'storage/*'],

Все работает отлично и я получаю данные по API. Но я также храню изображения на стороне Laravel в storage (символьная ссылка указана) и при запросе из Angular я получаю ошибку

unsafe: http://MYSITE/storage/icons/children.svg net::ERR_UNKNOWN_URL_SCHEME

Но если я делаю этот запрос в адресной строке, то я получаю свое изображение. Я храню ссылки на изображения в БД, у ссылок относительный путь вида /storage/events/9/kCbe9TOdoNh8BtE47Cx89rX4y13WQBtm67grHmTF.png

Я попытался настроить локацию в nginx, но все также получаю ошибку

location /storage {
    add_header 'Access-Control-Allow-Origin' '*';
    alias /var/www/laravel/public/storage;
    try_files $uri $uri/ =404;
}

Я понимаю что Angular по пути storage/ ищет фото у себя, но мне надо чтобы он брал фото с сервера. Как это исправить? Или при таком подходе не будет работать и надо разносить фронт и бек на разные порты?

Полная конфигурация nginx

server {   
listen 80;
server_name MY_IP;

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

root /var/www/laravel/public;    
index index.html index.php;

charset utf-8;

# location for front app 
location / {
    root /var/www/front;
    try_files $uri $uri/ /index.html;
}

# location for laravel api
location /api {
    try_files $uri $uri/ /index.php?$query_string;
}

# location for api images
location /storage {
    add_header 'Access-Control-Allow-Origin' '*';
    alias /var/www/laravel/public/storage;
    try_files $uri $uri/ =404;
}

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

access_log off;
error_log  /var/log/nginx/error.log error;
access_log /var/log/nginx/access.log;

sendfile off;

# pass the PHP scripts to FastCGI
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;
}

}

laravel nginx angular

Источник: Stack Overflow на русском

Answer 1

▲ 0

В общем разнес на разные порты и все запело.

    #FRONTEND CONF
server {   
    listen 80;
    server_name MY_FRON_IP;
    
    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";

    root /var/www/front;    
    index index.html index.php;
    
    charset utf-8;

    # location for front app 
    location / {
        root /var/www/front;
        try_files $uri $uri/ /index.html;
    }
    
}

#BACKEND CONF
server {
    listen 3000;
    server_name MY_BACK_IP;
    root /var/www/laravel/public;
 
    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-Content-Type-Options "nosniff";
 
    index 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;
    
    access_log off;
    error_log  /var/log/nginx/laravel.error.log error;
    access_log /var/log/nginx/laravel.access.log;
 
    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;
    }
}

angular + laravel nginx на одном хосте

Ответы