Cómo desplegar una aplicación angular en un servidor Jboss

Cómo desplegar una aplicación angular en un servidor Jboss

Desarrollo

De vez en cuando es necesario distribuir aplicaciones SPA utilizando archivos war como contenedores, en mi experiencia esto es necesario cuando:

•  No tienes control sobre la infraestructura de implementación

•  Estás lidiando con estándares de implementación rígidos

•  El personal de TI es reacio a publicar un servidor web antiguo

De todos modos, y como se describe en la documentación de Oracle,uno de los beneficios de usar archivos war es la posibilidad de incluir archivos estáticos (HTML / JS / CSS) en la implementación, por lo tanto, es seguro asumir que podría distribuir cualquier aplicación SPA usando un archivo war como envoltorio (con consideraciones especiales).

Crear un POC con Angular y Java War

Para demostrar esto, crearé un proyecto que:

1.  Es compatible con los tres grandes IDE de java (NetBeans, IntelliJm Eclipse) y VSCod

2. Le permite usar los IDE como IDE de desarrollo de JavaScript

3.  Le permite crear una aplicación moderna SPA (con todas las cosas npm, ng, cli)

4.  Le permite combinar sistemas de compilación Java (Maven) y JavaScript (Webpack)

5.  Le permite distribuir un proyecto minificado y listo para la producción.

Para arrancar el proyecto Java, puede usar el viejo maven-archetype-webapp como base:

mvn archetype:generate -DarchetypeGroupId=org.apache.maven.archetypes -DarchetypeArtifactId=maven-archetype-webapp -DarchetypeVersion=1.4

El shell interactivo le pedirá las características de su proyecto, incluidos groupId, artifactId (nombre del proyecto) y el paquete base.

Al final, debe tener la siguiente estructura como resultado:

angular$
.
├── pom.xml
└── src
    └── main
        └── webapp
            ├── WEB-INF
            │   └── web.xml
            └── index.jsp

4 directories, 3 files

Además de que index.jsp no es necesario, simplemente elimínelo.

Creando un proyecto simple Angular JS

Como un enfoque obstinado, sugiero aislar el proyecto Angular en su propio directorio ( src/main/frontend), en el pasado y con marcos simples (AngularJS, Knockout, Ember), fue posible arrancar todo el proyecto con un par de inclusiones en el index.html Sin embargo, hoy en día la mayoría de los proyectos de front-end modernos utilizan algún tipo de bundler / linter para habilitar funciones modernas (> = ES6) como módulos, y en el caso de Angular, utiliza Webpack bajo el capó para esto.

Para esta guía, supongo que ya ha instalado todas las herramientas CLI de Angular por lo tanto, podríamos ir dentro de nuestra estructura de código fuente y arrancar el proyecto Angular.

angular$ cd src/main/
angular/src/main$ ng new frontend

Invocando Webpack

  1. Descargue los administradores de paquetes JS comunes (npm, cnpm, bower, yarn)
  2. Invoque sistemas y pruebas de compilación JS (npm, karma)

Por defecto, el proyecto angular viene con ganchos de npm a  ngpero necesitamos agregar un gancho en package.json para crear una compilación de calidad de producción ( buildProduction), por favor verifique el parámetro base-href ya que estoy usando la raíz predeterminada de las convenciones de Java (mismo como nombre del proyecto)

...
"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "buildProduction": "ng build --prod --base-href /angular/",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  }
...

Después modificamos la siguiente línea de salida de compilación o outputPath tal y como se muestra en el siguiente archivo angular.json

...
   "root": "",
   "sourceRoot": "src",
   "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "../webapp", //directorio dond se hace build
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
...

tener en cuenta outputPath es donde se realizará el despliegue de los archivos estáticos generados por webpack para ya después ser servidos por el servidor de aplicaciones Jboss. Entramos al siguiente directorio y ejecutamos el siguiente comando

npm run buildProduction webpack iniciar a generar los archivos minificados y los servirá al directorio outputPath que configuramos en nuestro archivo angular.json

y conseguiremos el siguiente resultado

Invocando nuestro servidor Jboss

Una vez nuestros archivos estén generados en nuestra carpeta webapp, le damos clic derecho al proyecto y le damos run as -> maven clean

ahora nuestro proyecto está listo para ser servido por Jboss, recuerde que debe tener instalado el servidor jboss y configurado ya que este tutorial no se explica su instalación, le damos clic derecho al proyecto y le damos run as -> run on server en este caso lo va iniciar como servidor jboss configurado.

le damos en finalizar y nuestro servidor Jboss tomara el proyecto y lo compilara a un archivo de guerra(.war) y lo desplegara en: http://localhost:9990/

ahora verifiquemos que nuestro proyecto este corriendo correctamente http://localhost:8080/angular/

recuerden que según la configuración de su servidor Jboss se puede está sirviendo su aplicación en un puerto diferente, cualquier duda que tengan pueden dejármelas abajo en los comentarios, espero que les haga servido nos vemos en el próximo tutorial.