Quan desenrotllem aplicacions web, el normal és començar en un entorn local, executant-les en el nostre propi ordinador. Ací provem que el codi funciona correctament, ja siga amb un servidor senzill en Node.js, amb Apache/PHP, o amb qualsevol altra tecnologia.
No obstant això, treballar només en local té un límit: l’aplicació només està disponible per a nosaltres. El següent pas és portar-la a un entorn real en Internet, on altres persones puguen accedir a través d’una adreça IP o un nom de domini. Este procés es coneix com el desplegament o pas a producció.
Hui dia, el desplegament pot fer-se de diferents formes. En qualsevol cas, el desplegament no és només “pujar arxius”: també implica configurar, mantindre i assegurar el servidor i, en molts casos, automatitzar el procés amb Git i pipelines d’integració contínua (CI/CD).
En este document aprendrem els passos bàsics per a posar en marxa un servidor remot i desplegar una aplicació web real, partint de l’opció més versàtil i pròxima a la realitat professional: un VPS amb Linux i Node.js.
El desplegament en un servidor remot és el procés que permet que una aplicació web deixe d’estar limitada a l’ordinador del programador (localhost) i passe a ser accessible des de qualsevol lloc del món.
Abans de poder desplegar, necessitem preparar alguns elements bàsics:
Servidor o allotjament públic
Hem de disposar d’una ubicació en Internet on instal·lar l’aplicació. Pot ser un servidor compartit, un VPS, un servidor dedicat o fins i tot un servici en el núvol (AWS, Azure, Vercel, etc.). Una vegada contractat, en estos servidors és habitual usar tecnologies modernes com Nginx per a servir aplicacions, o Docker per a empaquetar-les i moure-les fàcilment entre entorns.
En este mòdul treballarem amb un VPS, perquè combina flexibilitat, sota cost i un entorn realista d’aprenentatge.
Mecanisme d’accés i transferència d’arxius
Per a administrar el servidor i pujar la nostra aplicació necessitem algun tipus de connexió remota:
Una vegada que tenim clar on desplegarem i com ens connectarem al servidor, podrem començar a instal·lar els servicis necessaris (servidor web, base de dades, etc.) i pujar el nostre projecte.
A l’hora de triar l’allotjament dels nostres projectes web, existixen diferents opcions, unes més costoses i altres més assequibles. En general, salve per a empreses fortes que disposen de la infraestructura adequada, se sol acudir a empreses especialitzades en allotjament web per a situar estos projectes. Elles s’encarreguen així del manteniment del servidor, mesures de seguretat, i altres elements com ara la disponibilitat, que es garantix mitjançant un acord del nivell de servici (Service Level Agreement, SLA). Vegem alguns exemples típics.
Un servidor dedicat és un equip físic reservat en exclusiva per a una empresa o projecte. Pot estar en les instal·lacions de la pròpia organització (amb la seua pròpia IP pública i administració interna), o bé en un centre de dades gestionat per un proveïdor.
El gran avantatge d’este model és que oferix el màxim rendiment i seguretat, ja que no es compartixen recursos amb altres clients. No obstant això, el seu principal inconvenient és el cost elevat, que sol començar entorn dels 100–110 € al mes per a configuracions modestes i pot superar fàcilment els 150–300 € mensuals en servidors més potents, a més de requerir coneixements tècnics avançats per a administrar-lo correctament.
Entre els proveïdors habituals es troben OVHcloud, IONOS o Acens.
El hosting compartit és l’opció més senzilla i econòmica d’allotjament web, pensada per a projectes que requerixen pocs recursos. Parlem d’aplicacions o llocs amb poques bases de dades, escassa necessitat d’emmagatzematge i baixos requisits d’amplada de banda o connexions simultànies.
En este model diversos clients compartixen un mateix servidor físic, la qual cosa abaratix costos però imposa limitacions clares: l’espai en disc, l’amplada de banda i el nombre de bases de dades disponibles són reduïts, i a més sol restringir-se l’ús d’uns certs llenguatges, sent PHP el més habitual, normalment acompanyat de bases de dades MySQL o MariaDB.
En comparació amb els servidors dedicats, este tipus d’allotjament presenta més problemes de seguretat. En compartir recursos amb altres usuaris, si un d’ells té una vulnerabilitat en el seu lloc web, un atacant podria intentar aprofitar-la per a accedir a altres llocs dins del mateix servidor.
Quant al preu, els plans més bàsics poden trobar-se hui des de 1–3 € al mes, mentres que els servicis amb majors recursos i prestacions solen situar-se en un rang de 5–10 € mensuals, encara que els plans més complets d’hosting compartit poden aconseguir fàcilment els 15–20 € segons el proveïdor.
Entre els proveïdors habituals d’esta mena d’allotjament trobem IONOS o Hostinger
Un VPS (Virtual Private Server) és una màquina virtual que simula el funcionament d’un servidor dedicat, però que en realitat ocupa una part d’un servidor físic compartit amb altres clients. Cada VPS disposa del seu propi sistema operatiu, processadors virtuals, memòria RAM i emmagatzematge assignats, la qual cosa dona la sensació de tindre un servidor complet amb gran llibertat de configuració, però amb un cost molt de menor que el d’un servidor dedicat.
El principal avantatge d’esta opció és el seu equilibri entre flexibilitat i cost: permet instal·lar qualsevol programari que necessitem i administrar el servidor com si fora propi, però sense l’elevada inversió d’un servidor dedicat. L’inconvenient és que, encara que més senzill que un dedicat, continua requerint coneixements bàsics d’administració de sistemes per a gestionar-lo correctament.
Quant al cost, els plans bàsics de VPS en proveïdors com OVHcloud poden trobar-se des de 4–7 € al mes, mentres que configuracions més potents amb més RAM, CPU i emmagatzematge solen situar-se en un rang de 15–30 € mensuals.
Entre els proveïdors habituals d’esta mena de servici trobem OVHcloud, IONOS o Hostalia.
Per la seua versatilitat, en este tema ens basarem en l’opció del VPS en OVHcloud, encara que els passos a seguir serien molt similars amb qualsevol altra empresa d’hosting.
En este apartat explicarem els passos a seguir per a contractar un VPS bàsic amb l’empresa OVHcloud, i veurem quines característiques oferix este tipus de servici. Per a començar, hem d’accedir a la web de l’empresa. Encara que en el mòdul treballarem amb OVHcloud, els passos a seguir en altres proveïdors són molt similars. Com contractarem un producte, haurem de registrar-nos des de la Àrea de client en la part superior, triant després l’opció de Crear un compte. Si ja som clients, podem loguearnos des d’esta mateixa secció de Àrea de client.
Per a triar el VPS a contractar, anem a la secció Bare Metall i triar Contractar. Allí podrem triar Servidors privats virtuals i, entre ells, l’opció que més s’ajuste a les nostres necessitats.
Veurem els diferents plans de VPS oferits. En el nostre cas triarem l’opció més bàsica i econòmica. Si fem clic en el botó corresponent de Configurar, es mostraran les opcions per a configurar la nostra instància de VPS.
Ens demanarà que especifiquem el període de compromís i algunes opcions més, com la localització del nostre VPS (Europa, si és possible). Permet triar quina distribució de sistema operatiu preinstal·lar. Podem triar entre distintes, com Linux Debian, CentOS, Ubuntu… En el nostre cas, utilitzarem una distribució Debian amb l’aplicació Docker instal·lada.
Una vegada completat el registre, i passat un temps, rebrem un e-mail de confirmació amb les dades per a accedir al VPS. A través de l’àrea de client de la pàgina web, al qual s’accedix amb l’usuari i contrasenya que indiquem en registrar-nos, podrem gestionar alguns aspectes: reinstal·lar el VPS, ampliar les seues capacitats, associar un nom de domini, etc.
Inicialment s’assignarà un nom de domini amb un codi aleatori, seguint el patró vps-xxxxxx.vps.ovh.net, sent XXXXXX el codi que se’ns haja assignat. Podem, a més, contractar altres noms de domini i associar-los al nostre VPS, com veurem a continuació.
En la secció de Inici podem consultar, entre altres coses, quina adreça IP se’ns ha assignat (IPv4 i IPv6), el nom del VPS, i en la part esquerra hi ha una sèrie d’opcions per a, per exemple, reiniciar el servidor, o reinstal·lar-lo de nou (en el cas que alguna instal·lació haja resultat defectuosa i necessitem tornar a començar, per exemple), utilitzant els botons de punts suspensius (…) d’algunes opcions.
Un pas habitual si desenvoluparem una aplicació web amb una certa visibilitat és contractar un nom de domini associat, de manera que puguem accedir a l’aplicació amb este nom de domini.
Des de la pròpia plataforma d’OVH podem contractar el domini, amb diferents extensions (.és, .com, .net, .org, .eu…). Podem, no obstant això, utilitzar el nom de domini vps-xxxxxx.vps.ovh.net que ens han assignat, per a fer webs d’ús privat o restringit. També podem contractar un domini .ovh si busquem un preu econòmic. Estos dominis se solen oferir entre 1 i 3 euros a l’any, aproximadament.
Des de la secció de Web Cloud en la nostra àrea de clients podem contractar el domini.
Buscarem primer el domini que volem comprar (per exemple, maycalle.ovh), i la plataforma ens informarà de si està disponible i el seu preu anual. Una vegada seleccionat el domini en qüestió, els següents passos són:
Quan ja tinguem contractat el domini amb les opcions que hàgem triat, hem de associar el domini al VPS. En la secció Web Cloud de la nostra àrea de clients existix una subsecció Dominis, on podem veure els dominis que tenim contractats. Fent clic en un d’ells veurem la seua configuració actual.
En la pestanya de Redirecció veurem el domini amb la IP actualment assignada. Esta IP correspon a una pàgina de benvinguda per defecte d’OVH. Fem clic en el botó de configuració a la dreta de la IP, i triem modificar registre. Assignem la que tenim assignada al nostre VPS.
A més, hem d’anar a la secció Zona DNS i modificar els registres A (Address Rècord) perquè el nostre domini apunte a la IP del nostre VPS.
Passats uns dies tindrem disponible el domini (si no és així, haurem de contactar amb OVH a través del suport del panell de client perquè ho refresquen). Podem comprovar-ho fent ping a este domini, i veient que la IP a la qual intenta connectar correspon amb la nostra.
ping maycalle.ovh
PING maycalle.ovh (92.222.22.170): 56 data bytes...
NOTA: si passades 24 o 48 hores seguim sense tindre associada la IP al nostre domini, seguint la documentació oficial d’OVH, hem d’acudir a la mateixa secció de dominis vista abans, però en lloc d’anar a Redirecció, hem d’anar a la secció Zona DNS, i fer clic en el botó Editar en mode text de la part dreta. Apareixerà un quadre per a editar la configuració de DNS manualment, però n’hi ha prou que enviem esta configuració sense més per a sol·licitar que es propague.
Afegir subdominis
Si volem afegir subdominis d’un contractat (per exemple, proves.maycalle.ovh), bastaria amb accedir a este mateix panell de redireccions i polsar el botó de Crear una redirecció en la part dreta. Posarem el nom del subdomini:
Després indicarem a què ho redirigirem (podem redirigir a una web, o a un servidor). En este cas, redirigiríem al nostre servidor VPS:
Després, triem el mètode de redirecció (per IP), i finalment especifiquem l’adreça IP, que serà la que se’ns ha assignat per al VPS. Després d’este pas, confirmarem les dades i quedarà el subdomini registrat en les redireccions.
Existixen diferents maneres d’accedir al VPS per a pujar arxius, descarregar-los o instal·lar programari, entre altres coses. Analitzarem ací algunes de les més habituals i còmodes.
El protocol SSH (Secure Shell) permet connectar-nos de manera segura i xifrada al nostre servidor. A través de SSH podrem executar comandos en el servidor, instal·lar programes, modificar configuracions o consultar registres, com si treballàrem directament en el propi servidor.
Una forma rudimentària, però útil, d’accedir al servidor, és a través d’un terminal per SSH (Secure Shell). Per a això, hem d’obrir la terminal del sistema operatiu i escriure el següent comando, indicant el nom del VPS que ens van donar en el correu de confirmació.
ssh debian@vps-xxxxxxxx.vps.ovh.net
En el cas de tindre un domini contractat i ja enllaçat amb el VPS (per exemple, maycalle.ovh), podem connectar així:
ssh debian@maycalle.ovh
Observa que s’anteposa l’usuari a la direcció del VPS, separats per una arrova.
La primera vegada que et connectes, el client SSH (el teu ordinador) et preguntarà si confies en l’empremta digital (fingerprint) del servidor. És una mesura de seguretat per a evitar atacs de suplantació (man-in-the-middle). L’empremta digital del servidor identifica de manera única a la teua VPS. Si algun dia tornes a connectar-te i SSH t’avisa que la clau ha canviat, això podria indicar un problema de seguretat o una reinstal·lació del servidor.
Escriu yes i polsa Enter. SSH guardarà la clau del servidor en el teu equip (en l’arxiu C:\Users\<el teu_usuari>\.ssh\known_hosts) i ja no tornarà a preguntar la pròxima vegada que connectes.
A continuació, et demanarà la contrasenya de l’usuari root (la que vas rebre per correu en contractar el VPS). En escriure-la no es mostraran caràcters en pantalla, però s’està introduint correctament. Polsa Enter per a accedir. Una vegada dins, i des del terminal, podrem instal·lar el programari que necessitem (servidors web, servidors de bases de dades, etc), i també detindre o reiniciar estos servicis, com veurem més avant.
També és possible utilitzar algun client SSH que recorde les dades de la connexió per a no haver-los de que indicar cada vegada. En el cas de Windows i Linux, podem utilitzar OpenSSH, per exemple. En el cas específic de Windows disposem de Solar Putty, que permet, entre altres coses, tindre diverses pestanyes de terminal obertes. Pel que fa a sistemes Mac, podem emprar la ferramenta Termius, per exemple. El principal avantatge d’estes ferramentes és simplement el recordar les dades de la connexió per a no haver-los de que posar cada vegada, però podem connectar per SSH amb un simple terminal del sistema operatiu.
Ací veiem un exemple amb SolarPutty. Polsant en el botó de New Session configurem les credencials d’accés segons les quals ens haja facilitat la plataforma:
Encara que podem accedir al servidor introduint la contrasenya de l’usuari debian, una forma segura i professional de fer-ho és mitjançant autenticació amb clau SSH. Este mètode usa un parell de claus (una pública i una privada) que permet connectar-se sense necessitat d’escriure contrasenyes, evitant atacs per força bruta.
Quan connectes, el servidor verifica que la teua clau privada coincidix amb la seua clau pública associada, i et permet entrar automàticament.
Pas 1. Crear la teua clau SSH (Windows):
ssh-keygen -t ed25519 -C "email@exemple.com". Veuràs alguna cosa com això:Generating public/private ed25519 key pair.
Enter file in which to save the key (C:\Users\TeuUsuari/.ssh/id_ed25519):
Enter per a acceptar la ruta per defecte. Després et demanarà una frase de contrasenya opcional (passphrase) per a protegir la teua clau privada.
id_ed25519 queda xifrat. Encara que algú copie la teua clau privada, no podrà usar-la sense eixa passphrase. Hauràs d’introduir-la quan uses la clau (o usar un agent SSH per a recordar-la).Enter passphrase (empty for no passphrase):
C:\Users\<el teu_usuari>\.ssh\:
dir ~/.sshPas 2. Copiar la clau pública al VPS:
Hem de copiar el contingut de l’arxiu id_ed25519.pub dins de /home/debian/.ssh/authorized_keys en el servidor.
Podem fer-ho de dos formes:
type "$env:USERPROFILE\.ssh\id_ed25519.pub" | ssh debian@vps-xxxxxxxx.vps.ovh.net "mkdir -p ~/.ssh && chmod 700 ~/.ssh && cat >> ~/.ssh/authorized_keys && chmod 600 ~/.ssh/authorized_keys"
id_ed25519.pub en el teu PC i còpia tota la línia.mkdir -p ~/.sshnano ~/.ssh/authorized_keyschmod 700 ~/.sshchmod 600 ~/.ssh/authorized_keysPas 3. Connectar-se al VPS sense contrasenya
Una vegada copiada la clau, ja pots accedir sense escriure la contrasenya. SSH usarà la teua clau privada automàticament i no demanarà la contrasenya.
ssh debian@vps-xxxxxxxx.vps.ovh.net
Pas 4. Desactivar l’accés per contrasenya (opcional)
Una vegada verificat que la connexió amb clau funciona correctament, pots desactivar l’accés per contrasenya per a reforçar la seguretat del VPS.
nano /etc/ssh/sshd_configPasswordAuthentication nosudo systemctl restart sshA partir d’eixe moment, només es podrà accedir amb clau SSH.
NOTA: Si accedim al mateix VPS des de diversos equips (per exemple, l’ordinador de classe i el portàtil personal), hem de repetir este procés en cada un. El VPS emmagatzemarà totes les claus públiques autoritzades, una per línia, en l’arxiu
/home/debian/.ssh/authorized_keys.
Una de les formes més còmodes i professionals de treballar amb la teua VPS és mitjançant Visual Studio Code i la seua extensió Remote - SSH. Esta opció permet connectar-te al servidor i editar, compilar o desplegar codi directament en el VPS, sense haver de pujar arxius manualment per FTP o similars. És la forma de treball més habitual en entorns de desenrotllament web i en equips DevOps.
Com a pas previ, hem d’assegurar-nos que l’accés SSH està ben configurat i funcionant des de la terminal (com es va explicar en l’apartat 4.2). En cas contrari, la connexió tampoc funcionarà des de VS Code.
Per a instal·lar l’extensió, accedim a l’apartat d’extensions (Ctrl+Shift+X, o Cmd+Shift+X en Mac) i busquem Remote - SSH (de Microsoft), i la instal·lem. Ara hem de configurar l’accés SSH en VS Code. Es recomana crear una configuració SSH permanent, que haurà de ser C:\Users\<el teu_usuari>\.ssh\config. Ho creem i afegim esta configuració:
Host vps-ovh
HostName vps-xxxxxxxx.vps.ovh.net
User debian
IdentityFile C:\Users\<el teu_usuari>\.ssh\id_ed25519
AddKeysToAgent yes
ForwardAgent no
Ara podràs connectar amb només escriure ssh vps-ovh des de la terminal o seleccionar-ho des de VS Code.
Una vegada connectat, pots obrir carpetes del servidor (File → Open Folder), usar la terminal integrada (Ctrl+ñ) que executa comandos en el VPS, o instal·lar extensions (Prettier, ESLint…) directament en el servidor remot. Els canvis es guarden en el VPS, no en el teu equip local.
Exercici 1. Accés inicial i configuració segura del VPS
Accedix al VPS de OVHCloud i deixa-ho configurat per a treballar de manera segura durant la resta del curs: accés sense contrasenya, usuari amb permisos de sue, bloqueig de l’accés root i connexió des de VS Code.
Seguix els següents passos:
- Accedix al VPS com debian i verifica que pots executar comandos bàsics (ls, apt update)
- Configura l’accés per clau SSH
- Genera un parell de claus SSH
- Còpia la teua clau pública al VPS per a l’usuari nou
- Assegura’t de poder accedir sense escriure la contrasenya
- (Opcional) Bloqueja l’accés remot de root
- Configura VSCode per a treballar amb el VPS
- Instal·la l’extensió
Remote - SSHen VSCode- Crea o edita
C:\Users\<el teu_usuari>\.ssh\configcom s’explica en els apunts (apartat 4.2)- Connecta’t des de VSCode i obri
/var/www- Crega un arxiu
prova.txti verifica la seua existència en la terminal remota
Ara que ja hem vist diferents mecanismes per a accedir al nostre VPS i gestionar les carpetes i comandos que necessitem, en este apartat veurem alguns mecanismes que ens permetran pujar arxius (i, en alguns casos, també descarregar-los).
Si tenim oberta una sessió SSH, podem emprar la ferramenta git per a descarregar aplicacions que tinguem pujades a algun repositori tipus GitHub, BitBucket o similar. Per a això, n’hi ha prou que:
git, si no ho hem fet ja:sudo apt install git
git config --global user.email el_teu_email@domini.com
git config --global user.name el teu_nick_en_github
git clone, seguida de la URL del repositori a clonar:git clone url_repositori_git
NOTA: es crearà una subcarpeta amb el nom del repositori en qüestió.
git pull, des de la carpeta del projecte en si:git pull
Exercici 2:
Instal·la git en el teu VPS i configura-ho amb les teues credencials
Si no tenim cap repositori remot disponible, podem utilitzar VS Code per a connectar un repositori local amb un repositori remot. Este procés implica els següents passos:
git init en la terminal.
git add en el terminal.
git commit -m "missatge" en el terminal.git remote add origin URL_DEL_REPOSITORI).git push, enviant els teus canvis locals a la branca remota que acabes de crear.README.md amb una breu descripció inicial. Per exemple:
Per a qualsevol nova modificació que es realitze en el projecte local, és important seguir un procés sistemàtic per a assegurar-se que els canvis es registren i se sincronitzen correctament amb el repositori remot:
Una altra via d’accés, aprofitant la connexió SSH citada anteriorment, consistix a utilitzar un client gràfic que suporte SFTP (SSH File Transfer Protocol). SFTP utilitza la sessió SSH i per tant xifra credencials i dades: és segur sempre que uses SFTP (no FTP) i no et connectes com root.
Un client SFTP permet veure de manera gràfica el sistema d’arxius remot. D’esta manera podem navegar fins a qualsevol carpeta i pujar o descarregar arxius. Alguns client habituals són: FileZilla (multiplataforma, web oficial), WinSCP (Windows) o Cyberduck (macOS/Windows). En el nostre exemple usarem FileZilla:
Des del gestor de llocs de FileZilla (botó de la cantonada superior esquerra) podem configurar una nova connexió. Crea una nova entrada, amb els següents paràmetres:
id_ed25519, que s’haurà generat seguint els passos de l’apartat 4.2En cas de no haver configurat les claus SSH, podem connectar amb usuari i contrasenya. En qualsevol cas, en connectar veurem en el panell dret el sistema d’arxius del servidor, i en l’esquerre l’el nostre local. D’esta manera és senzill pujar i descarregar arxius.