Desplegar aplicació a VPS

Introducció

Tenim feta una aplicació webc i ara la volem desplegar. Per exemple, l'aplicació dels dòlmens que hem fet a M06:

• Mòduls_amb_Javascript._Mapes_amb_OpenLayers

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:

• https://openlayers.org/en/latest/examples/

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:

• http://vps-89148e22.vps.ovh.net/nom_usuari/dolmens/index_v2.html

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

(TBD)

rsync en comptes de scp

(TBD)

rsync a windows

• https://techlife.com.mx/noticias/f/use-rsync-en-windows-para-crear-copias-redundantes

S'ha d'habilitar el subsistema de Windows per a Linux (WSL). (TBD)

---

creat per Joan Quintana Compte, març 2022