Desplegament d'una aplicació web des de Sublime Text 3

De wikijoan
Salta a la navegació Salta a la cerca

Desplegament des de la línia de comandes

Captura quintana.png

Tenim l'aplicació

de la qual disposem el codi font.

El desplegament en línia de comandes a un servidor al núvol és:

cd ~/projectes/OSM/quintana/html
npm run build
ssh ubuntu@vps-f5d83567.vps.ovh.net -f 'sudo chmod -R 777 /var/www/quintana/dist'
cd ~/projectes/OSM/quintana/html/dist
scp -r * ubuntu@vps-f5d83567.vps.ovh.net:/var/www/quintana/dist
ssh ubuntu@vps-f5d83567.vps.ovh.net -f 'sudo chmod -R 755 /var/www/quintana/dist'

Per passos:

  1. anem al directori del projecte
  2. muntem (build) l'aplicació (amb parcel)
  3. dins del servidor web al núvol, donem permisos d'escriptura al directori Apache on està ubicada l'aplicació
  4. anem al directori dist/ on ha quedat muntada l'aplicació web.
  5. copiem (scp) el nostre projecte al servidor web
  6. treiem els permisos d'escriptura.

Desplegament des de l'editor Sublime Text 3

Cerquem quin és el plugin que pot resoldre la tasca. Una de les opcions és el plugin Shell Exec.

Run shell commands like git, rvm, rspec, ls, etc. with Bash, Zsh and others inside your Sublime Text 3.

Per instal·lar paquets a Sublime Text 3:

Tools > Command Palette

o bé

Open the Command Palette: Press Ctrl+Shift+P (Windows) or Cmd+Shift+P (OS X).

A la paleta de comandes posem Install, i aleshores ja podem cercar el paquet que volem instal·lar: Shell Exec

Podem veure que ja el tenim instal·lat:

Preferences > Package Control > List Packages

o bé Preferences > Package Settings > Package Control > Settings

Per definir els settings del meu nou plugin:

Preferences > Settings

i dins de les claus copio les opcions per defecte:

// Shell executable: "/bin/bash", "/bin/sh", "/usr/bin/zsh"...
"shell_exec_executable": "/bin/bash",

// Shell executable option: --login # Run as login load your ~/.bashrc or other user settings.
"shell_exec_executable_option": "--login", // ["-l"] ["--login"]

// The output of the command can be shown on the Panel or in a New File: "panel", "file" or "none".
"shell_exec_output": "file",

// Set the Output File Syntax. Default is Ruby, because Ruby looks nice. =)
"shell_exec_output_syntax": "Ruby",

// Enable or Disable the  word wrap at the Output File.
"shell_exec_output_word_wrap": true,

// Enable or Disable the Debug infos (for plugin developers).
"shell_exec_debug": false,

// Name of the Shell Exec command box.
"shell_exec_title": "Shell Exec",

// Defines where the command should be executed: false, "project_folder" or "file_folder".
// If "project_folder" is set, will execute: cd project_folder && your_commnad.
"shell_exec_context": "project_folder",

I aleshores ja puc fer Ctrl+Shift+C, que és l'opció per defecte

S'ha d'obrir una línia de comandes a sota que posi Shell Exec, i puc executar una línia de comandes com ara

ls

Amb les opcions per defecte s'obrirà un nou fitxer de text amb la sortida de la comanda ls, doncs en les preferències per defecte hem posat l'opció:

"shell_exec_output": "file",

Els fitxers de configuració estan a:

/home/joan/.config/sublime-text-3/Packages/User

I si vull definir una drecera que executi una sèrie de comandes ho farem de la següent manera:

Preferences > Key Bindings

que de fet edita el fitxer User/Default (Linux).sublime-keymap

dins de la carpeta /home/joan/.config/sublime-text-3/Packages/User

i fem la prova que ens proposa el tutorial:

{
  "keys": ["ctrl+shift+u", "ctrl+shift+p"],
  "command": "shell_exec_open",
  "args": {
    "title": "Find Process",
    "format": "ps aux | grep ${input}"
  }
}

I ara fem ctrl-shift-u i p, i se'ns obre el Shell Exec, però ara amb el missatge Find Process. Entrem apache2 i obtenim com a sortida:

> ps aux | grep apache2

root        1107  0.0  0.2 198980 19108 ?        Ss   de gen.26   0:04 /usr/sbin/apache2 -k start
www-data    1113  0.0  0.1 199444  8188 ?        S    de gen.26   0:00 /usr/sbin/apache2 -k start
www-data    1114  0.0  0.1 199444  8188 ?        S    de gen.26   0:00 /usr/sbin/apache2 -k start
www-data    1114  0.0  0.1 199444  8188 ?        S    de gen.26   0:00 /usr/sbin/apache2 -k start
www-data    1114  0.0  0.1 199444  8188 ?        S    de gen.26   0:00 /usr/sbin/apache2 -k start
www-data    1114  0.0  0.1 199444  8188 ?        S    de gen.26   0:00 /usr/sbin/apache2 -k start
www-data    1115  0.0  0.1 199444  8188 ?        S    de gen.26   0:00 /usr/sbin/apache2 -k start
www-data    1116  0.0  0.1 199444  8088 ?        S    de gen.26   0:00 /usr/sbin/apache2 -k start
www-data    1117  0.0  0.1 199444  8088 ?        S    de gen.26   0:00 /usr/sbin/apache2 -k start
joan      133161  0.0  0.0  12052  3472 ?        S    10:32   0:00 /bin/bash --login -c  ps aux | grep apache2
joan      133168  0.0  0.0  11608   660 ?        S    10:32   0:00 grep apache2

Desplegament de l'aplicació des del Sublime

Captura deplegament.png

Per tant, ara ja estem en condicions de fer el desplegament de la nostra aplicació. Assignem la drecera ctrl+d+p:

Recordem quines eren les nostres comandes (afegim echo FI com a informació de què hem acabat):

cd ~/projectes/OSM/quintana/html
npm run build
ssh ubuntu@vps-f5d83567.vps.ovh.net -f 'sudo chmod -R 777 /var/www/quintana/dist'
cd ~/projectes/OSM/quintana/html/dist
scp -r * ubuntu@vps-f5d83567.vps.ovh.net:/var/www/quintana/dist
ssh ubuntu@vps-f5d83567.vps.ovh.net -f 'sudo chmod -R 755 /var/www/quintana/dist'
echo FI

Afegim una nova drecera a Preferences > Key Bindings

	{
	  "keys": ["ctrl+shift+d", "ctrl+shift+p"],
	  "command": "shell_exec_run",
	  "args": {
	    "title": "Desplegar Quintana",
	    "format": "cd ~/projectes/OSM/quintana/html;npm run build;ssh ubuntu@vps-f5d83567.vps.ovh.net -f 'sudo chmod -R 777 /var/www/quintana/dist';cd ~/projectes/OSM/quintana/html/dist;scp -r * ubuntu@vps-f5d83567.vps.ovh.net:/var/www/quintana/dist;ssh ubuntu@vps-f5d83567.vps.ovh.net -f 'sudo chmod -R 755 /var/www/quintana/dist';echo FI"
	  }
	}

I també canviem l'opció file per panel en les preferències generals (Preferences > Settings)

"shell_exec_output": "panel",

Ja podem desplegar la nostra aplicació fent Ctrl+D+P.

Desplegament a VSCode

Captura deplegament vscode.png
Captura deplegament vscode2.png

Instal·lació del VS Code 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": "cd ~/projectes/OSM/quintana/html;npm run build;ssh ubuntu@vps-f5d83567.vps.ovh.net -f 'sudo chmod -R 777 /var/www/quintana/dist';cd ~/projectes/OSM/quintana/html/dist;scp -r * ubuntu@vps-f5d83567.vps.ovh.net:/var/www/quintana/dist;ssh ubuntu@vps-f5d83567.vps.ovh.net -f 'sudo chmod -R 755 /var/www/quintana/dist';echo FI"
      }
    }



creat per Joan Quintana Compte, gener 2021