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
(TBD)
Desplegament des de VStudio Code
Instal·lació:
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
(TBD)
rsync a windows
S'ha d'habilitar el subsistema de Windows per a Linux (WSL). (TBD)
creat per Joan Quintana Compte, març 2022
