Блог

Я только начал изучать Angular Universal и рендеринг на стороне сервера. У меня есть существующий проект, который я вроде как запустил, используя руководство Angular Universal.

Однако в документации неясно, как мне применить это к производству?

• Нужны ли мне 2 отдельные сборки, одна для браузера, а другая, обслуживаемая приложением NodeJS / Express?
• Нужно ли мне что-то (например, NGINX), которое выполняет функцию балансировки нагрузки и пересылает запросы либо на сборку 1, либо на сборку 2?
• В общем, мой вопрос таков: как мне запустить приложение Angular в производство после того, как я успешно следую руководству Angular Universal?

В настоящее время, после всех команд сборки, я получаю папку / dist, которая выглядит следующим образом:

• /dist/browser/ (содержит index.html файл)
• /dist/server/ (содержит только main.js )
• /dist/server.js

Когда запрос попадает на внутренний сервер ( /dist/server.js ), сервер отобразит HTML-страницу, используя пакет server bundle ( dist/server/main.js ). Страница будет содержать сгенерированный html и встроенный css для быстрого отображения в браузере. После этого браузер также загрузит пакет client bundle ( dist/browser/* ) и выполнит его.

Универсальный сервер не должен быть доступен напрямую; вы можете использовать nginx для пересылки запросов. Вот пример базовой конфигурации

 server {
    listen 80;
    #...
    root /project/dist/browser;

    location / {
        index index.html;
        #Tries static files, otherwise transfers the request to the nodejs server
        try_files $uri  @universal;
    }


    location @universal {
        #port defined in your server.js
        proxy_pass http://localhost:4000; 
        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;

    }
  

Для запуска сервера NodeJS в рабочей среде рекомендуется использовать pm2, как указано Луисом Р. Если вы просто хотите протестировать принцип, просто запустите node dist/server.js

С Universal клиентское и серверное приложения работают вместе.

В принципе, вы можете разделить свои запросы на два типа :

• Некоторые из них требуются для загрузки страницы (до ngOnInit), эти запросы должны выполняться серверным приложением для отображения вашего динамического html.

• Другие запросы не обязательно должны выполняться сервером, это должно выполняться клиентским приложением.

Чтобы справиться с этим, вы должны использовать transferState, чтобы избежать повторного запуска одного и того же запроса.

https://angular.io/api/platform-browser/TransferState

Для развертывания вашего приложения вам часто понадобится Nginx или Apache, указывающий на порт, используемый в вашем server.ts. Для обслуживания вашего приложения вы просто запускаете свой сервер узлов (в документации angular используется express), например, с pm2 для управления вашим сервером :

http://pm2.keymetrics.io/