Desplegar aplicació a VPS
Contingut
Introducció
Tenim feta una aplicació webc i ara la volem desplegar. Per exemple, l'aplicació dels dòlmens que hem fet a M06:
Desplegar una aplicació web
Fem l'aplicació web
Tenim l'aplicació web dels dòlmens, o bé qualsevol altra aplicació web. Per exemple, pots utilitzar qualsevol dels exemples que pots trobar a:
Fixa't que en tots aquests exemples ens donen un index.html, main.js, i un fitxer package.json, que té la forma:
{
"name": "custom-circle-render",
"dependencies": {
"ol": "6.14.1"
},
"devDependencies": {
"parcel": "^2.0.0"
},
"scripts": {
"start": "parcel index.html",
"build": "parcel build --public-url . index.html"
}
}
Si fem:
$ npm install
s'instal·len les dependències, que són ol (llibreria Openlayers) i parcel (llibreria que s'utilitza per al desenvolupament).
Un cop instal·lades les dependències fem:
$ npm start
per arrencar l'aplicació, o bé:
$ npm run build
per muntar l'aplicació. Es crea la carpeta dist/, que significa distribució, i és el codi optimitzat per poder-lo posar en un servidor web (com ara Apache).
És la carpeta dist/ la que haurem de desplegar.
Desplegament: Resum comandes
Es tracta d'enviar els fitxers generats al nostre projecte a l'espai que tenim en el servidor web. Farem servir el VPS del Jaume Balmes.
Haurem de crear la carpeta del projecte. Per exemple, si volem crear la carpeta dolmens/, i ho volem fer remotament, farem:
$ ssh nom_usuari@vps-89148e22.vps.ovh.net -f 'mkdir /home/nom_usuari/html/dolmens'
I ara ja podem enviar els fitxers al servidor:
$ cd ruta_projecte_local/Dolmens/dist $ scp -r * nom_usuari@vps-89148e22.vps.ovh.net:/home/nom_usuari/html/dolmens/
I ara ja tenim disponible i pública la nostra web de dòlmens:
NOTA: No funciona? Si no funciona és perquè en fer el npm run build, en el index_v2.html tenim la línia:
<script src="main_v2.49837a9b.js">
i ha de ser:
<script src="./main_v2.49837a9b.js">
Resumint, per enviar els fitxers al servidor, la única cosa que hem de fer és:
$ scp -r * nom_usuari@vps-89148e22.vps.ovh.net:/home/nom_usuari/html/dolmens/
Desplegament des de Sublime Text
En el Sublime Text 3, primer instal·lem el plugin Shell Exec.
Dins del Sublime Text, Preferences > Key Bindings. Se'ns obre un fitxer de configuració, que físicament està a .config/sublime-text-3/Package/Users/Default (Linux).sublime-keymap.
Aquest fitxer conté un array de configuracions, i podem associar una drecera del teclat a les comandes que volem executar:
{
"keys": ["ctrl+shift+i", "ctrl+shift+p"],
"command": "shell_exec_run",
"args": {
"title": "Desplegar Dòlmens",
"format": "cd /home/joan/M06_WEC_2122/UF2/Dolmens/;npm run build;cd /home/joan/M06_WEC_2122/UF2/Dolmens/dist;scp -r * joan@vps-89148e22.vps.ovh.net:/home/joan/html/dolmens;echo FI"
}
}
Preferences > Settings
S'obre el fitxer de configuració Preferences.sublime-settings, i canviar
"shell_exec_output": "file"
per
"shell_exec_output": "panel"
Això significa que la sortida de la nostra comanda no es redirigirà a un fitxer, sinó al penell per poder-ho visualitzar.
Ara ja tenim disponibles els canvis que haguem fet a:
Desplegament des de VStudio Code
Instal·lació de VSCode a Linux:
code_1.63.2-1639562499_amd64.deb $ sudo dpkg -i code_1.63.2-1639562499_amd64.deb
Amb el VSCode el més pràctic és tenir el terminal integrat i des d'allà executar les comandes del deplegament.
Show Terminal Panel (Ctrl shift +)
I si volem associar una drecera de teclat per executar una sèrie de comandes:
File > Preferences > Keyboard shortcuts
i aleshores a dalt de tot
Open Keyboard shortcuts (JSON), i afegim una nova entrada:
{
"key": "ctrl+d",
"command": "workbench.action.terminal.sendSequence",
"args": {
"text": "ruta_apache/UF2/Dolmens;npm run build;cd ruta_apache/dist;scp -r * nom_usuari@vps-89148e22.vps.ovh.net:/var/www/nom_usuari/html/dolmens;echo FI"
}
}
rsync en comptes de scp
A una màquina Ubuntu/Debian rsync ja bé instal·lat per defecte.
$ man rsync
NAME
rsync - a fast, versatile, remote (and local) file-copying tool
rsync sigifica sincronització remota, i permet copia fitxers d'un recurs local a un recurs remot, o viceversa. A diferència del scp, només s'envien els fitxers nous o les diferències de fitxers. Per tant, és més útil quan els projectes que hem d'actualitzar són bastant grans i només volem enviar els petits canvis que hem fet des de l'última sessió.
$ rsync -av /path/to/source/directory /path/to/target/directory
Opcions:
- -a: "archive" mode, which ensures that symbolic links, devices, attributes, permissions, ownerships, etc. are preserved in the transfer.
- -v: opció verbose (per mostrar informació per la pantalla)
Per exemple, si volem copiar el projecte de dòlmens farem:
$ rsync -av ~/M06_WEC_2122/UF2/Dolmens/dist nom_usuari@vps-89148e22.vps.ovh.net:/home/nom_usuari/html/dolmens sending incremental file list dist/ dist/index_v2.html dist/index_v2.js dist/index_v2.js.map dist/main_v2.29a54931.css dist/main_v2.29a54931.css.map dist/main_v2.29a54931.js dist/main_v2.29a54931.js.map dist/main_v2.49837a9b.js dist/main_v2.49837a9b.js.map dist/main_v2.bb28b584.css dist/main_v2.bb28b584.css.map dist/img/ dist/img/dolmen_16.png dist/img/dolmen_24.png sent 11,133,561 bytes received 275 bytes 4,453,534.40 bytes/sec total size is 11,129,832 speedup is 1.00
Si ho tornem a fer una segona vegada:
$ rsync -av ~/M06_WEC_2122/UF2/Dolmens/dist joan@vps-89148e22.vps.ovh.net:/home/joan/html/dolmens sending incremental file list sent 468 bytes received 18 bytes 324.00 bytes/sec total size is 11,129,832 speedup is 22,900.89
veiem que només s'han enviat 468 bytes cap al servidor
rsync a windows
S'ha d'habilitar el subsistema de Windows per a Linux (WSL). (TBD)
FTP en comptes de scp
En el servidor OVH de l'assignatura tenim un servidor FTP, i per tant amb un client com el filezilla podem enviar els fitxers al servidor. Per defecte, l'usuari es connecta al seu home/. Recorda que dins del home hi ha la carpeta html/ que és on hem de desplegar els projectes web.
Si volem fer FTP en línia de comandes (per integrar-ho amb script d'automatització) també és possible.
creat per Joan Quintana Compte, març 2022
