Angular Universal: как перейти на производство? - PullRequest
Новая
       9

Angular Universal: как перейти на производство?

0 голосов
/ 21 марта 2019

Я только начал изучать Angular Universal и Server Rendering.У меня есть существующий проект, который я как бы запустил, используя Angular Universal's Guide .

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

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

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

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

Ответы [ 2 ]

1 голос
/ 22 марта 2019

Когда запрос попадает на внутренний сервер (/dist/server.js), сервер будет отображать HTML-страницу с использованием пакета сервера (dist/server/main.js).Страница будет содержать сгенерированный HTML и встроенный CSS для быстрого отображения в браузере.После этого браузер также загрузит клиентский пакет (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

0 голосов
/ 21 марта 2019

С универсальным приложением клиент и сервер работают вместе.

По сути, вы можете разделить ваши запросы на два типа:

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

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

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

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

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

http://pm2.keymetrics.io/

...