Muestra las diferencias entre dos versiones de la página.
Próxima revisión | Revisión previa | ||
clase:daw:daw:1eval:tema03 [2020/09/08 18:37] 127.0.0.1 external edit |
clase:daw:daw:1eval:tema03 [2023/10/23 21:24] (actual) admin [Scripts npm] |
||
---|---|---|---|
Línea 2: | Línea 2: | ||
- | ===== Contenidos ===== | + | ===== Despliegue Automatizado |
- | + | ||
- | * NodeJS | + | |
- | * Instalación de NodeJS | + | |
- | * NPM | + | |
- | * Proyectos con node | + | |
- | * Estructura de carpetas | + | |
- | * npm Scripts | + | |
- | + | ||
- | ===== Material ===== | + | |
- | + | ||
- | ==== Despliegue Automatizado ==== | + | |
En el tema anterior hemos visto como desplegar manualmente en los servidores Apache y Nginx. En este tema vamos a ver como hacer lo mismo pero de forma automatizada. Automatizar tareas es fundamental ya que se minimizan los errores que se cometen. Por otro lado el despliegue puede llegar a hacerse decenas de veces al día, por lo que obviamente debe estar automatizado. | En el tema anterior hemos visto como desplegar manualmente en los servidores Apache y Nginx. En este tema vamos a ver como hacer lo mismo pero de forma automatizada. Automatizar tareas es fundamental ya que se minimizan los errores que se cometen. Por otro lado el despliegue puede llegar a hacerse decenas de veces al día, por lo que obviamente debe estar automatizado. | ||
Línea 20: | Línea 9: | ||
- | ==== Estructura de carpetas ==== | + | ===== Estructura de carpetas |
Para poder automatizar el despliegue , lo primero es tener una estructura definida de nuestro proyecto y de nuestro servidor. Durante el curso vamos a usar este esquema tanto en este módulo como en los otros módulos. El esquema he intentado que sea lo mas fiel posible a la realidad de las empresas aunque he intentado simplificarlo. Sin embargo cada empresa tendrá la estructura que se adecue al proyecto que estén desarrollando. | Para poder automatizar el despliegue , lo primero es tener una estructura definida de nuestro proyecto y de nuestro servidor. Durante el curso vamos a usar este esquema tanto en este módulo como en los otros módulos. El esquema he intentado que sea lo mas fiel posible a la realidad de las empresas aunque he intentado simplificarlo. Sin embargo cada empresa tendrá la estructura que se adecue al proyecto que estén desarrollando. | ||
Línea 27: | Línea 16: | ||
/ | / | ||
/src //Donde está todo el código fuente de la aplicación | /src //Donde está todo el código fuente de la aplicación | ||
- | index.html | + | |
- | /assets | + | /java |
- | /img | + | /com |
- | /fonts | + | /daw |
- | / | + | / |
- | / | + | |
- | / | + | / |
- | /boostrap | + | /static |
- | /sass //Código en SASS | + | |
- | /css //código en CSS | + | /assets |
- | /ts | + | /img |
- | /js | + | /fonts |
+ | / | ||
+ | / | ||
+ | / | ||
+ | /boostrap | ||
+ | /scss //Código en SASS | ||
+ | /css //código en CSS | ||
+ | /ts | ||
+ | /js | ||
/docs // | /docs // | ||
/ | / | ||
Línea 46: | Línea 43: | ||
build.sh | build.sh | ||
/ | / | ||
- | /dist //El código " | + | /target |
+ | AppPeliculas-0.0.1-SNAPSHOT.jar | ||
package.json | package.json | ||
Línea 52: | Línea 50: | ||
Hay que fijarse que en git no se debe guardar únicamente la carpeta " | Hay que fijarse que en git no se debe guardar únicamente la carpeta " | ||
- | ==== Carpeta | + | ===== Carpeta |
- | La carpeta '' | + | La carpeta '' |
- | Podemos pensar que debe ser únicamente una copia de la carpeta " | + | |
+ | <note important> | ||
+ | En otros IDE's como NetBeans , esta carpeta puede llamarse '' | ||
+ | </ | ||
+ | |||
+ | Podemos pensar que debe ser únicamente una copia de la carpeta " | ||
+ | * Compilar el código fuente Java a el compilado en los ficheros '' | ||
* Minimizar el código: Hacer que ocupe menos el código JavaScript | * Minimizar el código: Hacer que ocupe menos el código JavaScript | ||
* Ofuscar el código: Para evitar que alguien pueda copiar nuestro código se suele, por ejemplo , cambiar el nombre de las variables por nombres sin sentido. Normalmente se minimiza y se ofusca a la vez. | * Ofuscar el código: Para evitar que alguien pueda copiar nuestro código se suele, por ejemplo , cambiar el nombre de las variables por nombres sin sentido. Normalmente se minimiza y se ofusca a la vez. | ||
Línea 62: | Línea 66: | ||
* Etc. | * Etc. | ||
- | Por ello , por ejemplo, en la carpeta " | + | Por ello , por ejemplo, en la carpeta " |
- | ==== Tareas de Automatización del despliegue ==== | + | ===== Tareas de Automatización del despliegue |
- | Veamos ahora un ejemplo de como desplegar una aplicación web en PHP con SASS , TypeScript y que se despliega en Apache. | + | Veamos ahora un ejemplo de como desplegar una aplicación web en Java con SASS , TypeScript y que se despliega en Apache. |
- | * Copiar el código de " | + | |
+ | | ||
- | | + | |
- | * Transpilar el código TypeScript en JavaScript dentro de la carpeta "dist" | + | * Transpilar |
+ | * Transpilar el código TypeScript en JavaScript dentro de la carpeta "target" | ||
- | | + | |
- | * Borrar el código TypeScript de la carpeta "dist" | + | * Borrar el código TypeScript de la carpeta "target" |
- | | + | * Generar el '' |
- | * Ejecutar el "httpd.exe" | + | |
+ | * Desplegar | ||
+ | | ||
+ | |||
+ | | ||
+ | | ||
Para hacer todas esta tareas vamos a usar Scripts del sistema operativo , por ejemplo en Linux se usará " | Para hacer todas esta tareas vamos a usar Scripts del sistema operativo , por ejemplo en Linux se usará " | ||
- | === Transformar SASS en CSS === | + | ==== Transformar SASS en CSS ==== |
* Instalar SASS | * Instalar SASS | ||
- | npm install | + | npm install sass -g |
* Transpilar SASS en CSS | * Transpilar SASS en CSS | ||
- | sass | + | sass ./scss/main.scss |
- | === Transformar TypeScript en JavaScript === | + | ==== Transformar TypeScript en JavaScript |
* Instalar TypeScript | * Instalar TypeScript | ||
Línea 98: | Línea 109: | ||
* Transpilar TypeScript en JavaScript | * Transpilar TypeScript en JavaScript | ||
- | tsc --outDir ./dist/js ./src/ts/*.ts | + | tsc --outDir ./js ./ts/*.ts |
- | ===== Scripts npm ===== | + | ====== Scripts npm ====== |
Para hacer las tareas que acabamos de indicar, se harán scripts de Bash que se dejarán en la carpeta "/ | Para hacer las tareas que acabamos de indicar, se harán scripts de Bash que se dejarán en la carpeta "/ | ||
En los siguientes artículos se explican los scripts npm: | En los siguientes artículos se explican los scripts npm: | ||
+ | * [[https:// | ||
* [[https:// | * [[https:// | ||
* [[http:// | * [[http:// | ||
Línea 115: | Línea 127: | ||
<sxh xml> | <sxh xml> | ||
" | " | ||
- | " | + | " |
} | } | ||
</ | </ | ||
* Ejecutar un Script de node. | * Ejecutar un Script de node. | ||
+ | |||
npm run compile-scss | npm run compile-scss | ||
Línea 131: | Línea 144: | ||
<sxh js> | <sxh js> | ||
" | " | ||
- | " | + | " |
- | " | + | |
- | " | + | |
} | } | ||
</ | </ | ||
Línea 144: | Línea 155: | ||
- | * deploy: Compila y despliega el código. Deja el contenido de '' | ||
- | npm run deploy | + | ==== Ejecutar un Script cuando algo cambia |
- | + | ||
- | + | ||
- | + | ||
- | * start: Inicia el servidor apache , Compila y despliega el código con cada cambio. En el siguiente apartado se explica como ejecutar un Script cuando hay un cambio en un fichero. | + | |
- | + | ||
- | npm run start | + | |
- | + | ||
- | === Ejecutar un Script cuando algo cambia === | + | |
[[https:// | [[https:// | ||
Línea 166: | Línea 168: | ||
onchange ' | onchange ' | ||
+ | |||
+ | |||
+ | ===== Maven ===== | ||
+ | Ahora deberemos llamar a nuestro script de '' | ||
+ | |||
+ | Para ello añadiremos el siguiente XML al '' | ||
+ | |||
+ | <sxh xml> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | < | ||
+ | < | ||
+ | <!-- Comando npm --> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
Línea 173: | Línea 208: | ||
Crea un Script en bash llamado " | Crea un Script en bash llamado " | ||
Haz que ejecutando: | Haz que ejecutando: | ||
+ | <sxh > | ||
npm run hola | npm run hola | ||
+ | </ | ||
Se ejecute el Script que acabas de crear. | Se ejecute el Script que acabas de crear. | ||
Línea 182: | Línea 219: | ||
Crea un Script en bash llamado " | Crea un Script en bash llamado " | ||
Haz que ejecutando: | Haz que ejecutando: | ||
+ | <sxh > | ||
npm run init | npm run init | ||
+ | </ | ||
Se ejecute el Script que acabas de crear. | Se ejecute el Script que acabas de crear. | ||
Línea 192: | Línea 231: | ||
==== Ejercicio 3 ==== | ==== Ejercicio 3 ==== | ||
- | Crea un Script en bash llamado " | + | Crea un Script en bash llamado " |
- | npm run build | + | <sxh > |
+ | npm run build | ||
+ | </ | ||
Se ejecute el Script " | Se ejecute el Script " | ||
- | Crea un Script en bash llamado " | + | Crea un Script en bash llamado " |
+ | |||
+ | |||
+ | <sxh> | ||
npm run deploy | npm run deploy | ||
+ | </ | ||
+ | |||
Se ejecute el Script " | Se ejecute el Script " | ||
==== Ejercicio 4 ==== | ==== Ejercicio 4 ==== | ||
- | Modifica el proyecto | + | Modifica el proyecto |
- | npm run start | + | <sxh > |
+ | npm run start | ||
+ | </ | ||
Se ejecute el Script " | Se ejecute el Script " | ||