logongas

Herramientas de usuario

Herramientas del sitio

Traza:
clase:daw:daw:1eval:tema03

Diferencias

Muestra las diferencias entre dos versiones de la página.

Enlace a la vista de comparación

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:
   /mi-proyecto   /mi-proyecto
     /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 +      /main 
-      /assets +        /java 
-        /img +          /com 
-        /fonts +            /daw 
-        /media        //Audios y Videos +              /peliculas 
-      /vendor         //librerías bajadas de internet (también se puede llamar lib) +                 Main.java 
-        /jquery       +        /resources 
-        /boostrap +          /static 
-      /sass           //Código en SASS +            index.html 
-      /css            //código en CSS +            /assets 
-      /ts             //Código en TypeScript +              /img 
-      /js             //código en JavaScript+              /fonts 
 +              /media      //Audios y Videos 
 +            /vendor       //librerías bajadas de internet (también se puede llamar lib) 
 +              /jquery       
 +              /boostrap 
 +            /scss         //Código en SASS 
 +            /css          //código en CSS 
 +            /ts           //Código en TypeScript 
 +            /js           //código en JavaScript
     /docs             //Documentación de la aplicación. Es la documentación con los diagramas UML, el JavaDoc, etc.     /docs             //Documentación de la aplicación. Es la documentación con los diagramas UML, el JavaDoc, etc.
     /disenyo          //Donde están las imágenes en formato Photshop o  similares que estamos visualmente diseñando      /disenyo          //Donde están las imágenes en formato Photshop o  similares que estamos visualmente diseñando 
Línea 46: Línea 43:
       build.sh       build.sh
     /node_modules     //Carpeta que usa node para guardar lo que instalamos de NodeJS     /node_modules     //Carpeta que usa node para guardar lo que instalamos de NodeJS
-    /dist             //El código "compilado" de la aplicación. Eso incluye transformar de TypeScript a JavaScript o de SASS a CSS,etc.+    /target             //El código "compilado" de la aplicación. Eso incluye transformar de TypeScript a JavaScript o de SASS a CSS,etc. 
 +      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 "src" del código fuente sino que debe guardarse la carpeta "mi-proyecto" completa. Aunque se puede hacer alguna excepción con "dist" o "node-modules". El motivo de guardar la carpeta "mi-proyecto" es debido a que realmente todas esas carpetas son las que forman el proyecto, y no únicamente la carpeta "src". Hay que fijarse que en git no se debe guardar únicamente la carpeta "src" del código fuente sino que debe guardarse la carpeta "mi-proyecto" completa. Aunque se puede hacer alguna excepción con "dist" o "node-modules". El motivo de guardar la carpeta "mi-proyecto" es debido a que realmente todas esas carpetas son las que forman el proyecto, y no únicamente la carpeta "src".
  
-==== Carpeta dist ==== +===== Carpeta target ===== 
-La carpeta ''dist'' es la mas importante para el módulo de despliegue ya que en ella estará el proyecto tal y como se va a desplegar.  +La carpeta ''target'' es la mas importante para el módulo de despliegue ya que en ella estará el proyecto tal y como se va a desplegar.  
-Podemos pensar que debe ser únicamente una copia de la carpeta "src" ya que el código JavaScript o el código PHP no se compilan pero si que se pueden hacer muchos cambios en esta carpeta. Veamos algunos ejemplos:+ 
 +<note important> 
 +En otros IDE's como NetBeans , esta carpeta puede llamarse ''dist'' 
 +</note> 
 + 
 +Podemos pensar que debe ser únicamente una copia de la carpeta "src" ya que el código JavaScript pero si que se pueden hacer muchos cambios en esta carpeta. Veamos algunos ejemplos: 
 +  * Compilar el código fuente Java a el compilado en los ficheros ''.class''
   * Minimizar el código: Hacer que ocupe menos el código JavaScript  o CSS. Se hace para que las páginas web se carguen antes. Y suele consistir en quitar los comentarios, los retornos de carro, etc.   * Minimizar el código: Hacer que ocupe menos el código JavaScript  o CSS. Se hace para que las páginas web se carguen antes. Y suele consistir en quitar los comentarios, los retornos de carro, etc.
   * 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 "src" estaría el código en TypeScript y en la carpeta "dist" estaría en JavaScript correspondiente al TypeScript.+Por ello , por ejemplo, en la carpeta "src" estaría el código en TypeScript y en la carpeta "target" estaría en JavaScript correspondiente al TypeScript.
  
-==== 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 "src" en "dist"+  * Build (en maven se llama package) 
 +    * Copiar el código de "src" en "target"
  
-  * Transformar el código SASS en CSS dentro de la carpeta "dist" +    * Compilar el código Java 
-  * Transpilar el código TypeScript en JavaScript dentro de la carpeta "dist"+    * Transpilar el código SASS en CSS dentro de la carpeta "target" 
 +    * Transpilar el código TypeScript en JavaScript dentro de la carpeta "target"
  
-  * Borrar el código SASS de la carpeta "dist" +    * Borrar el código SASS de la carpeta "target" 
-  * Borrar el código TypeScript de la carpeta "dist" +    * Borrar el código TypeScript de la carpeta "target"
  
-  * Copiar el código de la carpeta "dist" a "htdocs" +    * Generar el ''.jar''  
-  * Ejecutar el "httpd.exe"+ 
 +  * Desplegar  
 +    * Copiar el ''.jar'' de la carpeta "target" al servidor donde se va a ejecutar o copiar el ''.war'' en el Tomcat 
 + 
 +  * Ejecutar 
 +    * Ejecutar el ''.jar''
  
 Para hacer todas esta tareas vamos a usar Scripts del sistema operativo , por ejemplo en Linux se usará "Bash" y los Script de npm que vamos a ver mas adelante. Para hacer todas esta tareas vamos a usar Scripts del sistema operativo , por ejemplo en Linux se usará "Bash" y los Script de npm que vamos a ver mas adelante.
  
-=== Transformar SASS en CSS ===+==== Transformar SASS en CSS ====
   * Instalar SASS   * Instalar SASS
  
-  npm install node-sass -g+  npm install sass -g
  
  
   * Transpilar SASS en CSS   * Transpilar SASS en CSS
  
-  sass  -o ./dist/css ./src/scss+  sass  ./scss/main.scss ./css/main.css
  
  
-=== 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 "/scripts" sin embargo ahí puede haber gran cantidad de Script o podemos querer usar otra carpeta u otro lenguaje. Para unificar todo esto en los proyectos web,  vamos a homogeneizar la ejecución de estos scripts mediante los Scripts de npm.  Para hacer las tareas que acabamos de indicar, se harán scripts de Bash que se dejarán en la carpeta "/scripts" sin embargo ahí puede haber gran cantidad de Script o podemos querer usar otra carpeta u otro lenguaje. Para unificar todo esto en los proyectos web,  vamos a homogeneizar la ejecución de estos scripts mediante los Scripts de npm. 
  
 En los siguientes artículos se explican los scripts npm: En los siguientes artículos se explican los scripts npm:
 +  * [[https://docs.npmjs.com/cli/v9/using-npm/scripts|npm scripts]]
   * [[https://css-tricks.com/why-npm-scripts/|Why npm scripts]]   * [[https://css-tricks.com/why-npm-scripts/|Why npm scripts]]
   * [[http://lucasmreis.github.io/blog/npm-is-an-amazing-build-tool/|NPM is an amazing build tool]]   * [[http://lucasmreis.github.io/blog/npm-is-an-amazing-build-tool/|NPM is an amazing build tool]]
Línea 115: Línea 127:
 <sxh xml> <sxh xml>
 "scripts": { "scripts": {
-  "compile-scss": "node-sass  -o ./dist/css ./src/scss"+  "compile-scss": "sass  ./scss/main.scss ./css/main.css"
 } }
 </sxh> </sxh>
  
   * 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>
   "scripts": {   "scripts": {
-    "build": ".\\scripts\\build.sh", +    "build": ".\\scripts\\build.sh"
-    "deploy": "npm run build && .\\scripts\\deploy.sh", +
-    "start": ".\\scripts\\start.sh",+
   }   }
 </sxh> </sxh>
Línea 144: Línea 155:
  
  
-  * deploy: Compila y despliega el código. Deja el contenido de ''dist'' en el servidor Apache en una carpeta de ''htdocs'' 
  
-  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://www.npmjs.com/package/onchange|onchange]] permite ejecutar un comando cuando cambia algún fichero. [[https://www.npmjs.com/package/onchange|onchange]] permite ejecutar un comando cuando cambia algún fichero.
  
Línea 166: Línea 168:
  
   onchange '**/*.js' -- echo Ha cambiado un fichero JavaScript   onchange '**/*.js' -- echo Ha cambiado un fichero JavaScript
 +
 +
 +===== Maven =====
 +Ahora deberemos llamar a nuestro script de ''npm run build'' desde maven. Usaremos el plugin de ''''
 +
 +Para ello añadiremos el siguiente XML al ''pom.xml''
 +
 +<sxh xml>
 +<plugin>
 +   <groupId>org.codehaus.mojo</groupId>
 +   <artifactId>exec-maven-plugin</artifactId>
 +   <version>3.0.0</version>
 +   <executions>
 +      <execution>
 +         <id>build-cliente</id>
 +         <phase>process-resources</phase>
 +         <goals>
 +            <goal>exec</goal>
 +         </goals>
 +         <configuration>
 +            <executable>npm</executable>
 +            <!-- Comando npm -->
 +            <workingDirectory>${project.basedir}</workingDirectory>
 +            <arguments>
 +               <argument>run</argument>
 +               <argument>build</argument>
 +            </arguments>
 +         </configuration>
 +      </execution>
 +   </executions>
 +</plugin>
 +</sxh>
 +
  
  
Línea 173: Línea 208:
 Crea un Script en bash llamado "prueba.sh" que saque por pantalla el texto de "Hola mundo" Crea un Script en bash llamado "prueba.sh" que saque por pantalla el texto de "Hola mundo"
 Haz que ejecutando: Haz que ejecutando:
 +<sxh >
   npm run hola   npm run hola
 +</sxh>
 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 "init.sh" que cree las carpetas que debe tener como mínimo un proyecto Crea un Script en bash llamado "init.sh" que cree las carpetas que debe tener como mínimo un proyecto
 Haz que ejecutando: Haz que ejecutando:
 +<sxh >
   npm run init   npm run init
 +</sxh>
 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 "build.sh" que  copie todo el contenido de la carpeta "src" en "dist" y transforme el SASS en CSS. De forma que ejecutando +Crea un Script en bash llamado "build.sh" que  copie todo el contenido de la carpeta "src" en "target" y transforme el SASS en CSS. De forma que ejecutando 
-  npm run build +<sxh > 
 +  npm run build 
 +</sxh> 
 Se ejecute el Script "build.sh" Se ejecute el Script "build.sh"
  
  
-Crea un Script en bash llamado "deploy.sh" que  despliegue todo el contenido de la carpeta "dist" en Apache .De forma que ejecutando+Crea un Script en bash llamado "deploy.sh" que  despliegue todo el contenido de la carpeta "target" en Tomcat .De forma que ejecutando 
 + 
 + 
 +<sxh>
   npm run deploy    npm run deploy 
 +</sxh>
 +
 Se ejecute el Script "build.sh" y "deploy.sh" Se ejecute el Script "build.sh" y "deploy.sh"
  
  
 ==== Ejercicio 4 ==== ==== Ejercicio 4 ====
-Modifica el proyecto anteriorañadiendo un Script en bash llamado "start.sh" que arranque apache y que cuando haya un cambio en la carpeta "src" se redespliegue la aplicación en el servidor web .De forma que ejecutando +Modifica el proyecto anterior , añadiendo un Script en bash llamado "start.sh" que arranque tomcat y que cuando haya un cambio en la carpeta "src" se redespliegue la aplicación en el servidor web .De forma que ejecutando 
-  npm run start +<sxh > 
 +  npm run start 
 +</sxh> 
 Se ejecute el Script "start.sh" Se ejecute el Script "start.sh"
  
clase/daw/daw/1eval/tema03.1599583032.txt.gz · Última modificación: 2020/09/08 18:37 por 127.0.0.1

Herramientas de la página

Excepto donde se indique lo contrario, el contenido de este wiki esta bajo la siguiente licencia: GNU Free Documentation License 1.3
GNU Free Documentation License 1.3 Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki