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 updateSui sistemi basati su Debian:
sudo apt update && sudo apt upgrade1.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 -ySui sistemi basati su Debian:
curl -sL https://deb.nodesource.com/setup_20.x | sudo -E bash -sudo apt-get install -y nodejsPassaggio 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 --prodQuesto 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-nameAssicurati 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 nginxSui sistemi basati su Debian:
sudo apt install nginx3.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-nameInserisci 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 nginxPassaggio 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=httpsudo firewall-cmd --permanent --zone=public --add-service=httpssudo firewall-cmd --reloadSui 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-nginxSui sistemi basati su Debian:
sudo apt install certbot python3-certbot-nginxQuindi 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.comSegui 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.log5.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 updateSui sistemi basati su Debian:
sudo apt update && sudo apt upgradeConclusione
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.
