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

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:

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

Desplegament des de VStudio Code

• https://code.visualstudio.com/

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

• 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)

FTP en comptes de scp

(TBD)

---

creat per Joan Quintana Compte, març 2022