Как вручную развернуть Angular 18 SSR на Nginx

Содержание

Вопрос или проблема
Ответ или решение
Как вручную развернуть Angular 18 с SSR на Nginx
Введение
Шаг 1: Проверка структуры проекта
Шаг 2: Настройка Nginx
Важные моменты:
Шаг 3: Запуск серверной части
Шаг 4: Доступ к приложению
Заключение

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

Я создал проект home-aap с использованием Angular 18 и включенным SSR. Теперь Angular 18 поддерживает встроенный SSR, поэтому после выполнения ng build были созданы следующие папки:

/var/www/dist/home-app/browser

/var/www/dist/home-app/server

Ниже приведена конфигурация home-config для Nginx:

server {
    listen 80;
    server_name localhost; # Измените на ваш домен

    # Обслуживание статических файлов прямо из сборки браузера
    location / {
        root /var/www/dist/home-app/browser; # Настройте на ваш фактический путь
        try_files $uri $uri/ /index.html; # Резервный вариант на index.html для SPA
    }

    # Обслуживание динамического контента SSR для конкретных маршрутов
    location /ssr {
        proxy_pass http://localhost:4000; # Node сервер
        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;
    }
}

Это успешно связано в папке sites-enabled:

Также, server.mjs работает на localhost:4000:

Так что, если я посещаю localhost, Nginx выдает 403:

Но если я посещаю http://localhost:4000/, приложение загружается успешно:

Но почему оно не загружается на localhost.
Я проверил официальную страницу Angular, но там не так много информации о ручном развертывании на сервере или VPS.
https://angular.dev/tools/cli/deployment

Будет действительно полезно, если кто-нибудь подскажет, как правильно развернуть Angular 18 с активированным SSR на Nginx на сервере/VPS вручную.

Заранее спасибо.

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

Как вручную развернуть Angular 18 с SSR на Nginx

Введение

Разработка приложения на Angular 18 с включенной серверной стороной рендеринга (SSR) может предоставить пользователям улучшенный опыт за счет более быстрой загрузки страниц и лучшей индексации поисковыми системами. Однако успешное развертывание на сервере, например, с использованием Nginx, может вызвать некоторые сложности, особенно для начинающих. В этом руководстве мы подробно рассмотрим, как настроить ваше Angular приложение с SSR на Nginx, учитывая ваш текущий опыт.

Шаг 1: Проверка структуры проекта

После выполнения команды ng build у вас должны быть созданы две папки в директории /var/www/dist/home-app:

browser — для статических файлов приложения.
server — для серверного кода (включая файл server.mjs).

Убедитесь, что структура каталогов выглядит следующим образом:

/var/www/dist/home-app/
    ├── browser/
    └── server/

Шаг 2: Настройка Nginx

Ваша текущая конфигурация Nginx, созданная в файле home-config, выглядит почти правильно, но имеет некоторые проблемы:

server {
    listen 80;
    server_name localhost;  # Измените на ваш домен

    # Обработка статических файлов приложения
    location / {
        root /var/www/dist/home-app/browser;  # Путь к статическим файлам
        try_files $uri $uri/ /index.html;  # Фолбек на index.html для SPA
    }

    # Обработка динамического контента SSR
    location /ssr {
        proxy_pass http://localhost:4000;  # Проксирование на Node сервер
        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;
    }
}

Важные моменты:

Путь к статическим файлам: Убедитесь, что права доступа на папку /var/www/dist/home-app/browser такие, чтобы Nginx мог их читать. Если возникают ошибки 403, это часто связано с недостаточными правами на чтение директории.
```
sudo chown -R www-data:www-data /var/www/dist/home-app
sudo chmod -R 755 /var/www/dist/home-app
```
Проверка конфигурации Nginx: После изменения конфигурационного файла проверьте конфигурацию на наличие ошибок:
```
sudo nginx -t
```
Если ошибок нет, перезапустите Nginx:
```
sudo systemctl restart nginx
```

Шаг 3: Запуск серверной части

Убедитесь, что ваш серверный код (например, server.mjs) запущен на порту 4000. Вы можете использовать node server/server.mjs для запуска, но рекомендуется использовать менеджеры процессов такие как pm2, чтобы поддерживать приложение в работоспособном состоянии:

npm install -g pm2
pm2 start server/server.mjs --name "home-app-server"

Шаг 4: Доступ к приложению

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

Перейдите по адресу http://localhost для доступа к статическим файлам.
Перейдите по адресу http://localhost/ssr для динамического контента от SSR.

Если после этих шагов приложение все еще не загружается, проверьте логи Nginx и сервера на наличие ошибок:

sudo tail -f /var/log/nginx/error.log
pm2 logs home-app-server

Заключение

Развертывание Angular 18 с SSR на Nginx требует тщательной настройки конфигурации сервера и прав доступа к файловой системе. Надеюсь, данное руководство поможет вам успешно развернуть ваше приложение. Если у вас возникли дополнительные вопросы или проблемы, обратитесь к документации Angular или сообществу.