Diferència entre revisions de la pàgina «Desplegar aplicació a VPS»

De wikijoan
Salta a la navegació Salta a la cerca
m
 
(Hi ha 15 revisions intermèdies del mateix usuari que no es mostren)
Línia 1: Línia 1:
 
=Introducció=
 
=Introducció=
−
(TBD)
+
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=
 
=Desplegar una aplicació web=
 
==Fem l'aplicació web==
 
==Fem l'aplicació web==
−
(TBE)
+
Tenim l'aplicació web dels dòlmens, o bé qualsevol altra aplicació web. Per exemple, pots utilitzar qualsevol dels exemples que pots trobar a:
−
==Resum comandes==
+
*https://openlayers.org/en/latest/examples/
−
(TBD)
+
Fixa't que en tots aquests exemples ens donen un ''index.html'', ''main.js'', i un fitxer ''package.json'', que té la forma:
 +
<pre>
 +
{
 +
  "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"
 +
  }
 +
}
 +
</pre>
 +
Si fem:
 +
<pre>
 +
$ npm install
 +
</pre>
 +
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:
 +
<pre>
 +
$ npm start
 +
</pre>
 +
per arrencar l'aplicació, o bé:
 +
<pre>
 +
$ npm run build
 +
</pre>
 +
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:
 +
<pre>
 +
$ ssh nom_usuari@vps-89148e22.vps.ovh.net -f 'mkdir /home/nom_usuari/html/dolmens'
 +
</pre>
 +
I ara ja podem enviar els fitxers al servidor:
 +
<pre>
 +
$ cd ruta_projecte_local/Dolmens/dist
 +
$ scp -r * nom_usuari@vps-89148e22.vps.ovh.net:/home/nom_usuari/html/dolmens/
 +
</pre>
 +
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:
 +
<pre>
 +
<script src="main_v2.49837a9b.js">
 +
</pre>
 +
i ha de ser:
 +
<pre>
 +
<script src="./main_v2.49837a9b.js">
 +
</pre>
 +
 
 +
Resumint, per enviar els fitxers al servidor, la única cosa que hem de fer és:
 +
<pre>
 +
$ scp -r * nom_usuari@vps-89148e22.vps.ovh.net:/home/nom_usuari/html/dolmens/
 +
</pre>
 +
 
 
==Desplegament des de Sublime Text==
 
==Desplegament des de Sublime Text==
−
(TBD)
+
[[Fitxer:Captura deplegament.png | thumbnail]]
 +
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:
 +
<pre>
 +
{
 +
  "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"
 +
  }
 +
}
 +
</pre>
 +
 
 +
Preferences > Settings
 +
 
 +
S'obre el fitxer de configuració ''Preferences.sublime-settings'', i canviar
 +
<pre>
 +
"shell_exec_output": "file"
 +
</pre>
 +
per
 +
<pre>
 +
"shell_exec_output": "panel"
 +
</pre>
 +
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==
 
==Desplegament des de VStudio Code==
−
(TBD)
+
[[Fitxer:Captura deplegament vscode.png | thumbnail]]
 +
[[Fitxer:Captura deplegament vscode2.png | thumbnail]]
 +
 
 +
*https://code.visualstudio.com/
 +
Instal·lació de VSCode a Linux:
 +
<pre>
 +
code_1.63.2-1639562499_amd64.deb
 +
$ sudo dpkg -i code_1.63.2-1639562499_amd64.deb
 +
</pre>
 +
 
 +
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)'', podem editar el fitxer ''keybindings.json'', i afegim una nova entrada:
 +
<pre>
 +
    {
 +
      "key": "ctrl+d",
 +
      "command": "workbench.action.terminal.sendSequence",
 +
      "args": {
 +
        "text": "cd ~/M06_WEC_2122/UF2/Dolmens;npm run build;cd ~/M06_WEC_2122/UF2/Dolmens/dist;scp -r * nom_usuari@vps-89148e22.vps.ovh.net:/home/nom_usuari/html/dolmens;echo FI"
 +
      }
 +
    }
 +
</pre>
 +
I per veure el resultat hem de tenir el terminal obert.
 +
 
 
==rsync en comptes de scp==
 
==rsync en comptes de scp==
−
(TBD)
+
A una màquina Ubuntu/Debian ''rsync'' ja bé instal·lat per defecte.
 +
<pre>
 +
$ man rsync
 +
 
 +
NAME
 +
      rsync - a fast, versatile, remote (and local) file-copying tool
 +
</pre>
 +
''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ó.
 +
<pre>
 +
$ rsync -av /path/to/source/directory /path/to/target/directory
 +
</pre>
 +
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:
 +
<pre>
 +
$ 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
 +
</pre>
 +
Si ho tornem a fer una segona vegada:
 +
<pre>
 +
$ 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
 +
</pre>
 +
veiem que només s'han enviat 468 bytes cap al servidor
  
 
===rsync a windows===
 
===rsync a windows===
Línia 17: Línia 190:
 
S'ha d'habilitar el subsistema de Windows per a Linux (WSL).
 
S'ha d'habilitar el subsistema de Windows per a Linux (WSL).
 
(TBD)
 
(TBD)
−
{{Autor}}, març 2022
+
 
 +
==FTP en comptes de scp==
 +
*[[OVH. VPS Essential jaumebalmes.net#Servidor FTP: ProFTPd]]
 +
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.
 +
=Treballar directament en el servidor. VSCode i extensió Remote SSH=
 +
En una sessió de SSH, podem utiltizar qualsevol editor de text (''nano'') per editar els fitxers. Ara bé si volem treballar amb els avantatges d'un IDE com el VSCode, farem el següent.
 +
 
 +
View > Extensions
 +
 
 +
Cercar l'extensió '''Remote SSH'''
 +
 
 +
<pre>
 +
Getting started
 +
Follow the step-by-step tutorial or if you have a simple SSH host setup, connect to it as follows:
 +
 
 +
Press F1 and run the Remote-SSH: Open SSH Host... command.
 +
Enter your user and host/IP in the following format in the input box that appears and press enter: user@host-or-ip or user@domain@host-or-ip
 +
If prompted, enter your password (but we suggest setting up key based authentication).
 +
After you are connected, use File > Open Folder to open a folder on the host.
 +
You can press F1 to bring up the Command Palette and type in Remote-SSH for a full list of available commands.
 +
</pre>
 +
Instal·lem l'extensió, i aleshores és molt fàcil. Amb F1 cerquem i executem l'extensió. Hi ha diverses entrades, ens quedem amb l'entrada:
 +
*Remotes SSH: connect to host
 +
Només cal afegir el nostre host:
 +
<pre>
 +
Add new SSH host: vps-89148e22.vps.ovh.net
 +
</pre>
 +
i se'ns obre una nova instància del VSCode, des de la qual podem obrir els fitxers directament en el servidor. Per exemple, podem modificar el nostre fitxer ''html/index.html''. I ja podem veure directament els canvis que hem fet:
 +
*http://vps-89148e22.vps.ovh.net/nom_usuari
 +
 
 +
{{Autor}}, abril 2022

Revisió de 10:26, 4 abr 2022

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

Captura deplegament.png

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

Captura deplegament vscode.png
Captura deplegament vscode2.png

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), podem editar el fitxer keybindings.json, i afegim una nova entrada: 

    {
      "key": "ctrl+d",
      "command": "workbench.action.terminal.sendSequence",
      "args": {
        "text": "cd ~/M06_WEC_2122/UF2/Dolmens;npm run build;cd ~/M06_WEC_2122/UF2/Dolmens/dist;scp -r * nom_usuari@vps-89148e22.vps.ovh.net:/home/nom_usuari/html/dolmens;echo FI"
      }
    }

I per veure el resultat hem de tenir el terminal obert.

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.

Treballar directament en el servidor. VSCode i extensió Remote SSH

En una sessió de SSH, podem utiltizar qualsevol editor de text (nano) per editar els fitxers. Ara bé si volem treballar amb els avantatges d'un IDE com el VSCode, farem el següent.

View > Extensions

Cercar l'extensió Remote SSH 

Getting started
Follow the step-by-step tutorial or if you have a simple SSH host setup, connect to it as follows:

Press F1 and run the Remote-SSH: Open SSH Host... command.
Enter your user and host/IP in the following format in the input box that appears and press enter: user@host-or-ip or user@domain@host-or-ip
If prompted, enter your password (but we suggest setting up key based authentication).
After you are connected, use File > Open Folder to open a folder on the host.
You can press F1 to bring up the Command Palette and type in Remote-SSH for a full list of available commands.

Instal·lem l'extensió, i aleshores és molt fàcil. Amb F1 cerquem i executem l'extensió. Hi ha diverses entrades, ens quedem amb l'entrada:

  • Remotes SSH: connect to host

Només cal afegir el nostre host: 

Add new SSH host: vps-89148e22.vps.ovh.net

i se'ns obre una nova instància del VSCode, des de la qual podem obrir els fitxers directament en el servidor. Per exemple, podem modificar el nostre fitxer html/index.html. I ja podem veure directament els canvis que hem fet:

creat per Joan Quintana Compte, abril 2022

Obtingut de «http://wiki.joanillo.org/index.php?title=Desplegar_aplicació_a_VPS&oldid=298841»