Wiki

Has cargado una revisión vieja del documento! Si la guardas crearás una versión nueva con estos datos.

====== Configuración del Proyecto Angular: evitar caché en el cliente en cada despliegue ======

=== Requerimientos de Configuración del Proyecto ===

El proyecto de Angular debe tener configurado el despliegue continuo con Docker.

Primeros Pasos

1. Modificación del Dockerfile de la construcción del Proyecto: Ubicar el archivo Dockerfile y agregar la opción --output-hashing=all en la misma línea donde se ejecuta la construcción del proyecto. este tag lo que hace es que en el compilado del proyecto sus archivos cambian de nombre, por un hash único.

Nuestra línea de código debería quedar así:
<code>
 RUN npm run build:${TYPE} --output-hashing=all 
</code>
2. Creación del Script para Renombrar index.html: Crear un archivo de Node.js llamado `rename_index_html.js`, que se encargue de renombrar el index.html con un nombre basado en un timestamp.

Esto obligará al navegador a tomar los archivos del servidor en lugar de la caché, ya que el nombre del archivo cambiará en cada despliegue.

Código del archivo rename_index_html.js (guardar en la raíz del proyecto):

<code> 
const fs = require('fs');
const path = require('path');

const distPath = path.join(__dirname, 'dist', 'nombreProyectoAngular', 'browser');
const indexPath = path.join(distPath, 'index.html');

const timestamp = Date.now();
const newIndexName = `index.${timestamp}.html`;
const newIndexPath = path.join(distPath, newIndexName);

fs.renameSync(indexPath, newIndexPath);
console.log(`Renamed index.html to ${newIndexName}`);
</code>
**Importante: asignar en el path.join el nombre de proyecto de angular**

3. Agregar la Ejecución del Script en el Dockerfile después de la línea que construye el proyecto en el archivo Dockerfile, agregar la ejecución del script para renombrar el index.html:

<code>
RUN node rename_index_html.js
</code>
4. Como cuarto paso se deberá confirgurar eliminar el index.html por defecto de nginx, después de la linea 
<code>
FROM nginx:alpine
</code>
Se agrega la siguiente linea 
<code>
RUN rm -rf usr/share/nginx/html/*
</code>

5. Ajuste de Nginx en el Dockerfile En el mismo archivo Dockerfile, después de la línea:

<code>
COPY default.conf /etc/nginx/conf.d/default.conf
</code>

Agregar el siguiente código para que Nginx sirva el archivo index.html sin importar su nombre:

<code>
RUN HTML_FILE=$(find /usr/share/nginx/html -type f -name "index*.html" | head -n 1 | xargs -I {} basename {}) &&\
    echo "Encontrado: $HTML_FILE" && \
    sed -i "s/index\.html/$HTML_FILE/g" /etc/nginx/conf.d/default.conf
</code>

Este comando encuentra el archivo index.html generado por Angular, captura su nombre dinámico y lo reemplaza en la configuración de Nginx.

Estos son los quintos pasos necesarios para evitar que el navegador del cliente almacene en caché el index.html y garantizar que siempre tome la versión más reciente del servidor en cada despliegue.

Por último, el archivo Dockerfile debería verse similar a la siguiente imagen:

{{:ada:howto:sicoferp:factory:new-migracion-sicoferp:front:captura_de_pantalla_2025-02-03_093019.png?400|}}

[[ada:howto:sicoferp:factory:new-migracion-sicoferp:front|←Regresar]]

Resumen de la edición

Wiki

Herramientas de usuario

Herramientas del sitio

Herramientas de la página