En aquest tema, aprendrem com construir i desplegar una aplicació Angular. Aquest procés inclou la preparació de l'aplicació per a la producció, la configuració de l'entorn de desplegament i la publicació de l'aplicació en un servidor web.
- Preparació de l'aplicació per a la producció
1.1. Construcció de l'aplicació
Angular CLI proporciona una eina poderosa per construir l'aplicació per a la producció. Aquesta eina optimitza el codi, minimitza els fitxers i assegura que l'aplicació estigui llesta per ser desplegada.
Comandament per construir l'aplicació:
Aquest comandament genera una carpeta dist/ que conté els fitxers optimitzats de l'aplicació.
1.2. Configuració de l'entorn de producció
És important configurar correctament l'entorn de producció per assegurar que l'aplicació funcioni correctament. Angular permet definir diferents configuracions per a diferents entorns (desenvolupament, producció, etc.).
Exemple de configuració d'entorn:
// src/environments/environment.prod.ts
export const environment = {
production: true,
apiUrl: 'https://api.example.com'
};
- Desplegament de l'aplicació
2.1. Desplegament en un servidor web
Un cop l'aplicació està construïda, es pot desplegar en qualsevol servidor web estàtic com Apache, Nginx, o serveis de hosting com Firebase, Netlify, o GitHub Pages.
Exemple de desplegament en Nginx:
- Instal·la Nginx (si no està instal·lat):
- Copia els fitxers de la carpeta
dist/al directori de Nginx:
- Configura Nginx per servir l'aplicació Angular:
Afegeix la següent configuració:
server {
listen 80;
server_name example.com;
root /var/www/html;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}- Reinicia Nginx per aplicar els canvis:
2.2. Desplegament en Firebase Hosting
Firebase Hosting és una opció popular per desplegar aplicacions Angular gràcies a la seva facilitat d'ús i integració amb altres serveis de Firebase.
Passos per desplegar en Firebase Hosting:
- Instal·la Firebase CLI:
- Inicia sessió a Firebase:
- Inicialitza el projecte Firebase:
Selecciona "Hosting" i segueix les instruccions per configurar el projecte.
- Desplega l'aplicació:
- Millors pràctiques per al desplegament
3.1. Utilitza HTTPS
Assegura't que el teu lloc web utilitza HTTPS per garantir la seguretat de les dades dels usuaris. La majoria dels serveis de hosting ofereixen certificats SSL gratuïts.
3.2. Monitorització i logs
Implementa eines de monitorització i revisa els logs del servidor per detectar i solucionar problemes ràpidament.
3.3. Optimització del rendiment
Revisa les recomanacions de Google Lighthouse per optimitzar el rendiment de la teva aplicació Angular.
Resum
En aquest tema, hem après com construir i desplegar una aplicació Angular. Hem vist com preparar l'aplicació per a la producció, configurar l'entorn de producció, i desplegar l'aplicació en diferents servidors web. També hem revisat algunes millors pràctiques per assegurar un desplegament segur i eficient.
Amb aquests coneixements, estàs preparat per portar la teva aplicació Angular des del desenvolupament fins a la producció, assegurant que estigui optimitzada i llesta per als usuaris finals.
Curs d'Angular 2+
Mòdul 1: Introducció a Angular
- Què és Angular?
- Configuració de l'entorn de desenvolupament
- La teva primera aplicació Angular
- Arquitectura d'Angular
Mòdul 2: Conceptes bàsics de TypeScript
- Introducció a TypeScript
- Variables i tipus de dades en TypeScript
- Funcions i funcions fletxa
- Classes i interfícies
Mòdul 3: Components i plantilles
Mòdul 4: Directives i pipes
Mòdul 5: Serveis i injecció de dependències
Mòdul 6: Enrutament i navegació
Mòdul 7: Formularis en Angular
Mòdul 8: Client HTTP i observables
- Introducció al client HTTP
- Realització de sol·licituds HTTP
- Gestió de respostes HTTP
- Ús d'observables