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.

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>

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>

4. 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 cuatro 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