Aplicacions Web Multpàgina Escalables amb ASP.NET i Vite.js

Guia completa per preparar, publicar i desplegar apps web ASP.NET amb Vite, optimitzant actius, publicació i desplegaments a IIS, Linux i Nginx, amb Q2BSTUDIO.

domingo, 17 de agosto de 2025 • 4 min de lectura • Equip Q2BSTUDIO

Intel·ligència-Artificial-

Introducció: Aquest article explica com preparar, publicar i desplegar aplicacions web multipàgina escalables desenvolupades amb ASP.NET i Vite.js, i a més presenta serveis de Q2BSTUDIO, empresa especialitzada en desenvolupament de programari a mida, aplicacions a mida, intel·ligència artificial i ciberseguretat.

Preparar el projecte per a la publicació: Primer afegeix al fitxer myapp.csproj una propietat NpmRoot amb valor ClientApp dins d'un PropertyGroup i un Target anomenat PublishRunWebpack configurat per executar-se després de ComputeFilesToPublish. L'objectiu del Target és incloure en la publicació els fitxers generats per Vite copiant la carpeta de sortida build del client a wwwroot i marcant els fitxers per copiar-se en publicar i excloure'ls d'empaquetats tipus single file quan sigui necessari. Aquesta configuració assegura que els actius generats per Vite estiguin disponibles a wwwroot després de la publicació.

Configurar Vite per a producció: A vite.config.js ajusta la secció build perquè outDir sigui build i emptyOutDir sigui true, i estableix base en /. Amb això Vite crearà actius optimitzats llestos per a producció a la carpeta build que després serà copiada pel Target del csproj.

Compilar i publicar: Flux bàsic de comandes: navegar a ClientApp, executar npm install, executar npm run build per generar la carpeta build, tornar al projecte backend i executar dotnet publish -c Release. El resultat serà una carpeta publish llesta per desplegar a bin Release netX publish.

Desplegament a Windows IIS: Instal·lar el .NET Hosting Bundle per permetre que aplicacions ASP.NET Core s'executin a IIS. Crear un lloc a IIS apuntant a la carpeta publish, verificar que existeixi web.config a la carpeta publicada, establir l'application pool en No Managed Code i usar Integrated Pipeline, i copiar el contingut de publish a la ruta del lloc IIS, per exemple C:\inetpub\wwwroot\myapp. Per a diagnòstic revisa els registres d'IIS a C:\inetpub\logs\LogFiles, comprova que l'application pool estigui iniciat i confirma que web.config estigui correctament configurat.

Desplegament a Linux o macOS: Instal·lar el runtime de .NET amb dotnet-install.sh especificant aspnetcore i la versió desitjada. Copiar els fitxers publicats al servidor remot amb scp o rsync, per exemple cap a /var/www/myapp. Executar l'aplicació amb dotnet /var/www/myapp/myapp.dll o crear i configurar un servei systemd amb ExecStart apuntant a /usr/bin/dotnet /var/www/myapp/myapp.dll, Restart sempre, User www-data i Environment ASPNETCORE_ENVIRONMENT=Production. Habilitar i arrencar el servei amb systemctl enable i systemctl start.

Configurar Nginx com a proxy invers: Configura un bloc server que escolti al port 80 i faci proxy pass cap a https://localhost:5000. Inclou capçaleres bàsiques per a websockets i proxied hosts, per exemple proxy_http_version 1.1, proxy_set_header Upgrade i Connection keep-alive, i proxy_set_header Host. Reinicia nginx amb systemctl restart nginx.

Verificació i diagnòstic a Linux: Comprovar l'estat del servei amb sudo systemctl status myapp. Si executes manualment, localitza processos dotnet amb ps aux | grep dotnet. Prova l'aplicació amb curl https://localhost:5000 i obre al navegador https://yourdomain.com o la IP del servidor. Revisa registres de l'aplicació amb journalctl -u myapp i registres de nginx amb sudo tail -f /var/log/nginx/error.log per solucionar errors.

Conseills pràctics: Assegura't que les rutes de sortida de Vite i les regles de còpia al csproj coincideixin exactament per evitar fitxers faltants. Revisa permisos de fitxers a Linux i si uses serveis cloud habilita regles de firewall o security groups per als ports necessaris. Per a desplegaments automatitzats considera pipelines que executin npm build i dotnet publish abans de transferir artefactes al servidor.

Checklist final: Vite build output configurat i generat; myapp.csproj inclou fitxers de build a la publicació; aplicació ASP.NET publicada amb els actius del frontend; a Windows IIS instal·lat i configurat el hosting bundle; a Linux/macOS runtime instal·lat i aplicació executant-se via systemd o manualment; Nginx configurat com a reverse proxy.

Sobre Q2BSTUDIO: Q2BSTUDIO és una firma de desenvolupament de programari a mida i aplicacions a mida especialitzada en solucions empresarials que integren intel·ligència artificial, IA per a empreses i agents IA, a més d'expertesa en ciberseguretat, serveis cloud AWS i Azure i serveis d'intel·ligència de negoci com Power BI. Oferim desenvolupament a mida, integració de models d'intel·ligència artificial per a automatització i analítica avançada, implementació d'arquitectures segures i gestió de desplegaments al cloud. Si busques transformar processos amb programari a mida o solucions d'intel·ligència empresarial, els nostres serveis inclouen consultoria, implementació, operació i suport continu.

Paraules clau per a posicionament: aplicacions a mida, programari a mida, intel·ligència artificial, IA per a empreses, agents IA, ciberseguretat, serveis cloud AWS i Azure, serveis d'intel·ligència de negoci, Power BI. Q2BSTUDIO combina experiència en desenvolupament d'aplicacions a mida amb pràctiques de ciberseguretat i desplegament al núvol per oferir projectes escalables i segurs.

Servei addicional i contacte: Per a projectes que requereixen alta disponibilitat, integració de pipelines de CI/CD, monitorització, o solucions de business intelligence amb Power BI, Q2BSTUDIO pot dissenyar una arquitectura completa, incloure proves de seguretat i escalat automatitzat a AWS o Azure. Contacta amb el nostre equip per a una avaluació tècnica i proposta personalitzada orientada a resultats i retorn de la inversió.

ELS NOSTRES SERVEIS

Com et podem ajudar

Tens un projecte en ment?

Explica'ns la teva visió i la convertim en una solució de programari. Sigui quin sigui l'abast, fem realitat la teva idea.