search

udistrital / sga_documentacion

Repositorio para la documentación del sistema de gestión académica
MIT License
0 stars 0 forks source link

Integración de micro clientes en ambiente de pruebas #126

Closed fabianbarreto02 closed 1 month ago

fabianbarreto02 commented 7 months ago

Se requiere realizar la Integración de micro clientes en ambiente de pruebas

Sub Tareas

Criterios de aceptación

Requerimientos

No aplica

Definition of Ready - DoR

Definition of Done - DoD - Desarrollo

NeFaWaltPint commented 7 months ago

Ajustes relevantes para microfrontends

.drone.yml

 # procurar correr esta versión (aplica local también), se sabe que funciona para los clientes en angular 16~ e inferiores
- name: nodejs_release
  image: node:16.20.2
  commands:
  - node --version
  - npm i
  - npm run build:test
  when:
    branch:
    - release/*
    event:
    - push

package.json

"scripts": {
    // define comandos para despliegue
    "build:prod": "ng build --progress --configuration=production",
    "build:test": "ng build --progress --configuration=development"
...
"devDependencies": {
    // procurar usar esta versión para que pueda correr distintos microclientes local sin problema
    "@angular/cli": "^16.2.12",

angular.json

"options": {
   // que la carpeta de compilación quede solo así
   "outputPath": "dist",
....
"configurations": {
  "production": {
    // ajustes para despliegue de esta manera
    "optimization":true,
    "outputHashing": "none",
    "sourceMap": false,
    "namedChunks": false,
    "aot": true,
    "extractLicenses": true,
    "buildOptimizer": true,
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.production.ts"
      }
    ],
    "deployUrl": "https://sgagestionperiodo.portaloas.udistrital.edu.co/"
  },

Para más detalle revisar este microcliente: sga_cliente_gestion_periodo_mf

NeFaWaltPint commented 7 months ago

Ajustes relevantes core

Lo mismo que para microclientes; adicionalmente: app.config.ts

//  se corrige url de assets i18n
export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, environment.apiUrl + 'assets/i18n/', '.json');
}

src/environments/*.ts

apiUrl: 'https://coreclientes.portaloas.udistrital.edu.co/', // add this url según ambiente corresponda

menu.component.ts

// manejo de click redirección a componentes
this.navService.goTo(item.Url?.replace('/pages', '')||'')

Ajuste de estilo para botón menú, padding, etc...

Tener en cuenta que corre recibe info del root como info del proyecto y autenticación, útil para ajuste de colores institucionales según proyecto. https://github.com/udistrital/core_mf_cliente/blob/develop/src/app/app.component.ts#L30

singleSpaPropsSubject.subscribe((props) => {
      // TODO: Ver la manera de usar esta info que viene del root
      this.environment = Object.assign(environment, props.environment);
    });

Correr core y microclientes con npm run start ya no debe dar lío por cuestión de ambientes.

NeFaWaltPint commented 7 months ago

Ajustes relevantes root

Con respecto al drone se maneja igual que en microcientes y core. package.json

"scripts": {
    // técnicamente no es un proyecto angular, por lo que el build se hace con webpack
    "build:prod": "webpack --progress --mode production --no-devtool --env isProd",
    "build:test": "webpack --progress --mode production --no-devtool --env isDev"

webpack.config.js

  return merge(defaultConfig, {
    // modify the webpack config however you'd like to by adding to this object
    plugins: [
      new HtmlWebpackPlugin({
        inject: false,
        template: "src/index.ejs",
        templateParameters: { // tomar variable de ambiente pasada desde linea de comando, ver scripts package.json
          isProd: webpackConfigEnv && webpackConfigEnv.isProd,
          isDev: webpackConfigEnv && webpackConfigEnv.isDev,
          isLocal: webpackConfigEnv && webpackConfigEnv.isLocal,
          orgName,
        },
        favicon: "./src/favicon.ico", // pasar icono del sistema
      }),
      new DefinePlugin({ // y esto es para seleccionar las demás variables según el ambiente a usar
        isProd: webpackConfigEnv && webpackConfigEnv.isProd,
        isDev: webpackConfigEnv && webpackConfigEnv.isDev,
        isLocal: webpackConfigEnv && webpackConfigEnv.isLocal,
      }),
    ],
  });

udistrital-root-config.ts

declare var isProd : boolean | undefined;
...

if (isProd) { // si es prod va a usar las variables de ambiente prod
  // y lo que hay aquí se pasa al core para que cambie el logo de loggin segun sistema
  environment = require("./environments/environment.production"); 
} else if (isDev) {
  environment = require("./environments/environment.development");
...

microfrontend-layout.html

<!-- core lo recibe con props como los [input]="valor" de angular -->
<application name="@udistrital/core-mf" props="environment"></application>

<!-- así se define cada aplicación a cargar en root -->
<route path="datos">
    <application name="@udistrital/sga-datos-mf"></application>
  </route>

index.ejs

<script type="systemjs-importmap">
    {
      "imports": { // así se cargan las distintas urls de imports de microclientes según el ambiente
      <% if (isProd) { %>
        <% const { environment } = require('./environments/environment.production.ts'); %>
        <% const parcelsKeys = Object.keys(environment.parcels); %>
        <% for (let i = 0; i < parcelsKeys.length; i++) { %>
          "<%= parcelsKeys[i] %>": "<%= environment.parcels[parcelsKeys[i]] %>"<%= i < parcelsKeys.length - 1 ? ',' : '' %>
        <% } %>
      <% } else if
      ...

src/environments/*.ts

parcels: { // así se listan las urls de los distintos microclientes según los distintos ambientes.
    "@udistrital/root-config": "//localhost:4200/udistrital-root-config.js",
    "@udistrital/core-mf": "//localhost:4201/main.js",
    ...

Este también queda preparado para correr en local con npm run start sin problema de cambio de ambiente. Para más detalle revisar este root: sga_cliente_root

NeFaWaltPint commented 7 months ago

Posible manejo de Access-Control-Allow-Origin

Revisar metainformación de root ⚠️

Ya que se están definiendo muchas políticas que puede no sea lo correcto más allá de ambiente local. https://github.com/udistrital/sga_cliente_root/blob/develop/src/index.ejs#L26

<meta http-equiv="Content-Security-Policy" content="default-src 'self' https: localhost:*; script-src 'unsafe-inline' 'unsafe-eval' https: localhost:*; connect-src https: localhost:* ws://localhost:*; style-src 'unsafe-inline' https:; object-src 'none';">
fabianbarreto02 commented 6 months ago

Se da por finalizada la issue, se revisa, se aprueba el pr