Configurarea NGINX pentru publicarea interfeței

de

Introducere

Serverul web al interfeței necesită un reverse proxy. A fost ales NGINX, care oferă ambele funcții. Publicarea interfeței în producție presupune următorii pași:

  1. Efectuează ajustările de cod
  2. Compilează aplicația pentru producție
  3. Instalează serverul NGINX
  4.  Configurează site-ul și reverse proxy-ul

Instrucțiunile de mai jos au fost testate pe Ubuntu 20.04; documentul menționează că ar putea funcționa și pe versiuni mai noi.

Instrucțiunile se aplică proiectelor ErpFrontend și ErpDocumentRenderer.

Înainte de compilarea interfeței pentru producție

La compilarea aplicației Angular pentru producție, unele optimizări de redenumire a claselor (class name mangle) sunt dezactivate. Codul folosește în anumite locuri constructor.name, iar redenumirea claselor poate afecta unele funcții ale interfeței.

Pentru dezactivarea acestor optimizări, versiunea descrisă necesită modificarea configurației compilatorului Angular din node_modules, deoarece nu oferă alt acces la setări. Caută mangle și setează false, apoi caută keepNames și setează true.

Mai jos sunt liniile modificate din node_modules/@angular-devkit/build-angular/src/webpack/configs/common.js, care dezactivează redenumirea claselor:

...
mangle: false, // this is commented out to disable mangle >>> environment_options_1.allowMangle && platform !== 'server',
...
keepNames: true, // this is commented out to keep class and variable name >>>  !environment_options_1.allowMangle || platform === 'server',
...

Configurațiile pot fi în alt fișier, în funcție de versiunea Angular. Exemplul este pentru Angular CLI 12.

Compilarea pentru producție

După pașii anteriori, rulează comanda următoare într-un terminal deschis în <root_UI_project_path>:

ng build

Notă: versiunile mai vechi Angular foloseau ng build -c production sau ng build –prod. În versiunile mai noi descrise, comanda build folosește implicit mediul de producție.

După compilare, copiază fișierele din dosarul de distribuție într-un dosar de pe server. De regulă sunt în <root_UI_project_path>/dist/ErpFrontend. Copiază doar dosarul ErpFrontend.

Instalarea NGINX

Rulează comenzile următoare în terminal pentru instalarea NGINX:

sudo apt update
sudo apt install nginx

Configurarea NGINX

Deschide /etc/nginx/sites-enabled:

cd /etc/nginx/sites-enabled

Adaugă un fișier pentru activarea site-ului. Proiectele ErpFrontend și ErpDocumentRenderer includ două configurații NGINX: erpfrontend_production și erpfrontend_staging.

Adaptează fișierele la nevoile și configurația serverului:

  • schimbă numele utilizatorului
  • schimbă calea site-ului
  • schimbă adresele IP și porturile, dacă este necesar

Copiază fișierul în dosarul indicat și repornește serverul NGINX:

sudo service nginx restart

Proiectul ERP conține scripturi care copiază automat configurația din dosarul de release în dosarul de configurare NGINX și repornesc serverul NGINX.

Mai multe informații despre instalarea NGINX și configurarea reverse proxy-ului sunt disponibile aici: