En aquest tema, aprendrem com desplegar una aplicació Vue.js en un servidor de producció. Desplegar una aplicació Vue.js implica diversos passos, des de la construcció de l'aplicació fins a la configuració del servidor per servir els fitxers estàtics. A continuació, desglossarem aquests passos de manera detallada.

Abans de desplegar l'aplicació, hem de construir-la per a producció. Això implica minificar i optimitzar els fitxers per assegurar-nos que l'aplicació es carregui ràpidament.

1. Instal·lar les dependències: Assegura't que totes les dependències estan instal·lades. Pots fer-ho executant:

   npm install
   

2. Construir l'aplicació: Executa la comanda de construcció per crear una versió optimitzada de l'aplicació:

   npm run build
   

   Aquesta comanda generarà una carpeta dist que conté els fitxers optimitzats.

Netlify és una plataforma popular per desplegar aplicacions estàtiques. A continuació, es mostren els passos per desplegar una aplicació Vue.js amb Netlify:

1. Crear un compte a Netlify: Si no tens un compte, registra't a Netlify.

2. Connectar el repositori:

   • A la pàgina principal de Netlify, fes clic a "New site from Git".
   • Connecta el teu compte de GitHub, GitLab o Bitbucket.
   • Selecciona el repositori que conté la teva aplicació Vue.js.

3. Configurar els paràmetres de construcció:

   • Build command: npm run build
   • Publish directory: dist

4. Desplegar l'aplicació:

   • Fes clic a "Deploy site" i espera que Netlify construeixi i desplegui l'aplicació.

Vercel és una altra plataforma popular per desplegar aplicacions estàtiques i serverless. A continuació, es mostren els passos per desplegar una aplicació Vue.js amb Vercel:

1. Crear un compte a Vercel: Si no tens un compte, registra't a Vercel.

2. Connectar el repositori:

   • A la pàgina principal de Vercel, fes clic a "New Project".
   • Connecta el teu compte de GitHub, GitLab o Bitbucket.
   • Selecciona el repositori que conté la teva aplicació Vue.js.

3. Configurar els paràmetres de construcció:

   • Framework Preset: Selecciona "Vue.js".
   • Build and Output Settings: Vercel detectarà automàticament la configuració necessària.

4. Desplegar l'aplicació:

   • Fes clic a "Deploy" i espera que Vercel construeixi i desplegui l'aplicació.

Si prefereixes desplegar l'aplicació en un servidor personal, pots utilitzar un servidor web com Nginx per servir els fitxers estàtics.

1. Transferir els fitxers:

   • Utilitza un client FTP o SCP per transferir la carpeta dist al teu servidor.

2. Configurar Nginx:

   • Edita el fitxer de configuració de Nginx (normalment ubicat a /etc/nginx/sites-available/default):

     server {
         listen 80;
         server_name your_domain.com;
     
         location / {
             root /path/to/your/dist;
             try_files $uri $uri/ /index.html;
         }
     }
     

   • Substitueix /path/to/your/dist per la ruta real on has transferit la carpeta dist.

3. Reiniciar Nginx:

   • Reinicia Nginx per aplicar els canvis:

     sudo systemctl restart nginx
     

Si vols utilitzar un domini personalitzat, hauràs de configurar els registres DNS per apuntar al teu servidor o a la plataforma de desplegament (Netlify, Vercel, etc.). Consulta la documentació del teu proveïdor de domini per obtenir instruccions detallades.

És important servir la teva aplicació a través de HTTPS per garantir la seguretat. La majoria de plataformes de desplegament com Netlify i Vercel ofereixen certificats SSL gratuïts. Si utilitzes un servidor personal, pots obtenir un certificat SSL gratuït amb Let's Encrypt.

En aquesta secció, hem après com construir i desplegar una aplicació Vue.js en diferents plataformes, incloent Netlify, Vercel i un servidor personal amb Nginx. També hem discutit consideracions addicionals com la configuració de dominis i HTTPS. Amb aquests coneixements, estaràs preparat per portar la teva aplicació Vue.js a producció i fer-la accessible als usuaris.