Как развернуть .NET-приложение с Angular 18 SSR на Nginx

Содержание

Вопрос или проблема
Ответ или решение
Шаги для корректной конфигурации Nginx

Вопрос или проблема

В настоящее время я работаю над проектом, который изначально был создан с использованием шаблона .NET Core и Angular 18 в Visual Studio. Проект был настроен как одностраничное приложение (SPA). Недавно я решил перейти на серверный рендеринг (SSR) из-за SEO и установил @angular/ssr.

Приложение отлично работает на IIS при локальном тестировании. Однако при развертывании приложения на сервере Nginx я сталкиваюсь с ошибкой 404.

Несмотря на эти шаги, приложение не загружается на Nginx, что приводит к ошибке 404. Я подозреваю, что проблема может быть связана с настройкой Nginx.

Не могли бы вы предоставить рекомендации по решению этой проблемы? Любая информация или советы будут очень полезны.

Это конфигурация Nginx:


server {
    listen 80;
    listen [::]:80;
    server_name stage.testsite.com;

    return 301 https://stage.testsite.com$request_uri;
}


server {
    listen 443 ssl;
    listen [::]:443 ssl;
    server_name stage.testsite.com;


    ssl_certificate /etc/letsencrypt/live/stage.testsite.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/stage.testsite.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;  # Рекомендуемые меры безопасности
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;    # Предварительно сгенерированные DH параметры

    # Установите корневую директорию для вашего stage приложения
    root /var/www/stage-site;
    index index.html;

    # Включите Gzip для улучшения производительности
    gzip on;
    gzip_min_length 1000;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

    # Прокси-запросы к вашему приложению .NET Core на порту 5187
    location / {
        proxy_pass http://127.0.0.1:5153;  # Порт, на котором работает ваше приложение .NET Core
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection keep-alive;
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # Обработка ошибок
    error_page 500 502 503 504 /custom_50x.html;
    location = /custom_50x.html {
        root /var/www/stage-site
    }
}

Ответ или решение

Для развертывания приложения .NET с Angular 18 и серверным рендерингом (SSR) на Nginx, важно убедиться, что конфигурация вашего веб-сервера настроена правильно, чтобы обрабатывать запросы к .NET Core приложению и корректно обслуживать статические файлы Angular. Давайте рассмотрим вашу проблему более подробно и предложим необходимые шаги для устранения ошибки 404.

Шаги для корректной конфигурации Nginx

Проверка конфигурации Nginx:
Убедитесь, что Nginx правильно настроен для работы с вашим приложением .NET и Angular. Ваши существующие серверные блоки, в общем, выглядят правильно, но давайте добавим некоторые детали.

Обновление конфигурации Nginx:
Вам необходимо добавить обработку статических файлов и удостовериться, что все маршруты, которые должны обрабатываться .NET приложением, корректно проксируются.

Вот изменённая версия вашей конфигурации Nginx:

server {
    listen 80;
    listen [::]:80;
    server_name stage.testsite.com;

    return 301 https://stage.testsite.com$request_uri;
}

server {
    listen 443 ssl;
    listen [::]:443 ssl;
    server_name stage.testsite.com;

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

    # Указываем корневую директорию для вашего приложения
    root /var/www/stage-site;
    index index.html; 

    # Обработка статических файлов
    location / {
        try_files $uri $uri/ @dotnet;
    }

    location @dotnet {
        proxy_pass http://127.0.0.1:5153;  # Порт, на котором работает ваше приложение .NET
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection keep-alive;
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # Включите сжатие для повышения производительности
    gzip on; 
    gzip_min_length 1000; 
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; 

    # Обработка ошибок
    error_page 500 502 503 504 /custom_50x.html; 
    location = /custom_50x.html { 
        root /var/www/stage-site; 
    }
}

Проверьте пути и разрешения:
Убедитесь, что Nginx имеет доступ к директории /var/www/stage-site и что в этой директории есть index.html файл вашего приложения Angular.
Запуск .NET приложения:
Убедитесь, что ваше .NET приложение правильно запущено и прослушивает указанный порт (в данном случае 5153). Вы можете использовать служебные команды для проверки:
```
sudo systemctl status your-dotnet-service.service
```
Если ваше приложение не работает, проверьте логи для устранения неполадок.
Перезапуск Nginx:
После внесения изменений в конфигурацию Nginx, обязательно перезапустите сервер:
```
sudo systemctl restart nginx
```
Проверка логов:
Если проблема не исчезла, проверьте логи Nginx для выявления ошибок:
```
sudo tail -f /var/log/nginx/error.log
```

Используя эти шаги, вы должны быть в состоянии устранить ошибку 404 и успешно развернуть ваш .NET с Angular 18 SSR проект на Nginx. Если у вас возникнут дополнительные вопросы или проблемы, не стесняйтесь задавать их.