Come distribuire l'app Angular per la produzione su server Linux

Introduzione

La distribuzione di un'applicazione Angular in produzione è un passaggio critico nel processo di sviluppo, che richiede attenzione all'ottimizzazione, alla sicurezza e alle prestazioni. Questa guida completa illustra le best practice e le istruzioni dettagliate per garantire un processo di distribuzione senza intoppi. Che tu sia uno sviluppatore esperto o nuovo ad Angular, questo manuale mira a fornirti le conoscenze necessarie per avviare con successo le tue applicazioni Angular in un ambiente di produzione.

Angular è un framework versatile per la creazione di applicazioni web dinamiche. Quando si passa dallo sviluppo alla produzione, la distribuzione su un server Linux offre prestazioni, sicurezza e controllo affidabili. Questa guida si concentra sui passaggi di distribuzione specifici di Ubuntu e RHEL, scelte popolari per la loro stabilità e l'ampio supporto della comunità.

Prerequisiti

Prima di immergerti nel processo di distribuzione, assicurati di avere:

• Un'applicazione Angular pronta per la distribuzione
• Un server che esegue Linux (ad esempio: Ubuntu, Debian, CentOS o RHEL)
• Conoscenza base dei comandi del terminale e della configurazione del server

Passaggio 1: configurazione dell'ambiente

Prima di distribuire la tua applicazione, assicurati che il tuo server sia configurato correttamente e protetto.

1.1 Aggiorna il tuo sistema

Sia per Ubuntu che per RHEL, inizia aggiornando i pacchetti di sistema alle versioni più recenti:

Sui sistemi basati su RHEL:

sudo yum update

Sui sistemi basati su Debian:

sudo apt update && sudo apt upgrade

1.2 Installa Node.js e NPM

Le applicazioni angolari richiedono Node.js. Installa Node.js e npm (Node Package Manager) sul tuo server:

Sui sistemi basati su RHEL:

curl -sL https://rpm.nodesource.com/setup_20.x | bash -

sudo yum install nodejs -y

Sui sistemi basati su Debian:

curl -sL https://deb.nodesource.com/setup_20.x | sudo -E bash -

sudo apt-get install -y nodejs

Passaggio 2: preparare l'applicazione Angular

2.1 Costruire per la produzione

Il primo passo nella distribuzione della tua applicazione Angular è preparare la build per la produzione. Ciò comporta l'ottimizzazione dell'app in termini di prestazioni e sicurezza. Utilizza il comando CLI angolare:

ng build --prod

Questo comando esegue la compilazione anticipata (AOT), la minimizzazione dei file JS e CSS e altre ottimizzazioni. Il --prodflag garantisce che l'applicazione sia creata con le impostazioni di produzione, risultando in un'applicazione più piccola, più veloce e più sicura.

2.2 Configurazione dell'ambiente

Assicurati che le impostazioni specifiche dell'ambiente (ad esempio, endpoint API, connessioni al database) siano configurate per l'ambiente di produzione. Ciò in genere comporta la modifica del file Environment.prod.ts nel tuo progetto Angular.

2.3 Trasferisci file sul tuo server

Utilizza SCP (Secure Copy Protocol) per trasferire i file di build di produzione sul tuo server:

scp -r ./dist/your-app-name your-user@your-server-ip:/var/www/your-app-name

Assicurati di sostituire your-app-name , your-user e your-server-ip rispettivamente con il nome dell'applicazione, l'utente del server e l'indirizzo IP.

Passaggio 3: configurazione del server

3.1 Installa Nginx

Nginx è un server Web ad alte prestazioni che può servire la tua applicazione Angular. Installa Nginx:

Sui sistemi basati su RHEL:

sudo dnf install nginx

Sui sistemi basati su Debian:

sudo apt install nginx

3.2 Configura Nginx per la tua app Angular

Crea un nuovo file di configurazione Nginx per la tua applicazione:

sudo nano /etc/nginx/sites-available/your-app-name

Inserisci la seguente configurazione, regolando la direttiva root in modo che punti alla directory di build della tua applicazione:

server {
    listen 80;
    server_name your-domain.com;

    root /var/www/your-app-name;
    index index.html index.htm;

    # Security Headers
    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header X-XSS-Protection "1; mode=block" always;
    add_header Referrer-Policy "no-referrer-when-downgrade" always;
    add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://trusted.cdn.com; img-src 'self' https://trusted.cdn.com; style-src 'self' 'unsafe-inline' https://trusted.cdn.com; font-src 'self' https://trusted.cdn.com; frame-src 'self'; object-src 'none'" always;
    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

3.3 Personalizzazione della configurazione

• Modifica server_name , root e altre direttive secondo necessità per la tua specifica applicazione.
• Modifica la direttiva Content-Security-Policy in base ai requisiti della tua applicazione. L'esempio precedente è rigoroso e potrebbe richiedere modifiche per adattarsi a script, immagini, stili e così via esterni utilizzati dall'applicazione.
• Esamina e testa attentamente la configurazione, in particolare il CSP, poiché può interrompere la funzionalità se non configurato correttamente.

3.4 Attiva il sito web

Abilita la configurazione creando un collegamento simbolico alla directory abilitata ai siti:

sudo ln -s /etc/nginx/sites-available/your-app-name /etc/nginx/sites-enabled/

Ricarica Nginx per applicare le modifiche:

sudo systemctl reload nginx

Passaggio 4: proteggi la tua applicazione

4.1 Configurare un firewall

Assicurati che il tuo server sia sicuro configurando il firewall per consentire solo il traffico necessario. Per Ubuntu, potresti utilizzare UFW (Uncomplicated Firewall) e per RHEL, utilizzare firewalld.

Abilita il traffico HTTP (e HTTPS se disponi di un certificato SSL):

Sui sistemi basati su RHEL:

sudo firewall-cmd --permanent --zone=public --add-service=http

sudo firewall-cmd --permanent --zone=public --add-service=https

sudo firewall-cmd --reload

Sui sistemi basati su Debian:

sudo ufw allow 'Nginx Full'

4.2 Abilita HTTPS

Per maggiore sicurezza, configura un certificato SSL con Let's Encrypt. installa prima i pacchetti richiesti con i comandi seguenti:

Sui sistemi basati su RHEL:

sudo dnf install certbot-nginx

Sui sistemi basati su Debian:

sudo apt install certbot python3-certbot-nginx

Quindi emetti il ​​certificato SSL da Let's encrypt. Assicurati che il tuo dominio punti all'indirizzo IP del tuo server per completare la verifica.

sudo certbot --nginx -d your-domain.com

Segui le istruzioni per proteggere il tuo sito con HTTPS.

Passaggio 5: monitoraggio e manutenzione

5.1 Utilizzare i file di registro per il debug

I log Nginx possono fornire informazioni preziose per la risoluzione dei problemi. Controlla regolarmente i log degli errori:

sudo tail -f /var/log/nginx/error.log

5.2 Mantieni aggiornato il tuo sistema

Aggiorna regolarmente i pacchetti del tuo server e Node.js per garantire che la tua applicazione venga eseguita in un ambiente sicuro e stabile:

Sui sistemi basati su RHEL:

sudo dnf update

Sui sistemi basati su Debian:

sudo apt update && sudo apt upgrade

Conclusione

La distribuzione di un'applicazione Angular in produzione è un processo sfaccettato che va oltre il semplice trasferimento di file su un server. Comprende ottimizzazione, sicurezza, configurazione del server e monitoraggio continuo. Seguendo i passaggi descritti in questa guida, gli sviluppatori possono garantire che le loro applicazioni Angular non solo siano pronte per la produzione, ma anche ottimizzate in termini di prestazioni, sicurezza ed esperienza utente. Ricorda, la distribuzione non è la fine del ciclo di sviluppo ma l'inizio della vita della tua applicazione nel mondo reale. Monitoraggio, aggiornamenti e ottimizzazioni regolari sono fondamentali per mantenere e migliorare la tua applicazione nel tempo.