Google App Engine, index.html mis en cache après le déploiement dans l'application express / react

Comme mentionné dans les commentaires, vous ne devrez pas vider le cache du navigateur côté client. Donc, ce ne serait pas une solution viable pour vous. Cependant, étant donné que tout fonctionne bien, mais uniquement le problème de la mise en cache, j'ai recherché et trouvé une alternative possible.

Il semble que ce référentiel ici , appelé nocache , soit un middleware pour désactiver la mise en cache et qui peut être utilisé dans Javascript. Il vous suffit de l'installer en exécutant npm install --save nocache , puis d'ajouter les lignes ci-dessous à votre code.

const nocache = require('nocache')
app.use(nocache())

C'est une solution que j'ai trouvée dans ce cas ici , où c'est une solution pour arrêter la mise en cache côté client.

Je soupçonne que vous appelez également app.use(express.static()) avec le répertoire contenant index.html . Déplacez vos fichiers de modèle dans un répertoire distinct de votre contenu statique.

J'ai eu exactement le même problème avec les horodatages étranges.

Cela s'avère être un comportement par conception, car tous les horodatages sont rendus nuls lors du déploiement par le moteur d'application. voir: https://issuetracker.google.com/issues/168399701

Je l'ai résolu en express comme ceci:

app.get("/*", async (req, res) => {
  return res.sendFile("index.html", { root, lastModified: false, etag: false });
});

Ou pour les fichiers individuels:

app.use("/", express.static(root, { etag: false, lastModified: false }));

gens.

Après avoir lutté, j'ai trouvé la bonne solution.

Lors de la diffusion de fichiers statiques depuis express, les middlewares normaux ne s'appliquent pas. Vous devez utiliser la fonction personnalisée setHeaders de express.static.

• D'un côté, nous servons index.htmnl lors de l'accès à la route «/». Cela utilise des en-têtes express normaux
• De l'autre côté, index.html est demandé via la diffusion statique. Cela n'utilise PAS les autres en-têtes.

Nous devons donc couvrir les deux cas.

Voici le code:

app.use(express.static('build', { etag: false, lastModified: false, setHeaders: (res, path) => {
  // No cache for index html otherwhise there's gonna be problems loading the scripts
  if (path.indexOf('index.html') !== -1) {
    res.set('Cache-Control', 'no-store')
  }
} }));


app.set('etag', false)

app.disable('x-powered-by');

app.use((req, res, next) => {
  // hide x-powered-by for security reasons
  res.set( 'X-Powered-By', 'some server' );
  // This should apply to other routes
  res.set('Cache-Control', 'no-store')
  next()
})

app.get('/', (req,res) =>{
  // I think this is redundant
  res.set('Cache-Control', 'no-store')
  res.sendFile(path.join(__dirname+'/build/index.html'), { etag: false, lastModified: false });
});

app.get('*', (req,res) =>{
  // I think this is redundant
  res.set('Cache-Control', 'no-store')
  res.sendFile(path.join(__dirname+'/build/index.html'), { etag: false, lastModified: false });
});

const port = process.env.PORT || 8080
app.listen(port, () => console.log('App listening on ' + port));