部署Nest.Js至GAE(二):掛載靜態網頁(Angular),syntaxError
前言
將網站成功部署上GAE(Google App Engine)後,再做一些調整重新部署時
網站卻出現一片空白
打開F12查看,出現uncaught syntaxerror: unexpected token '<'
錯誤顯示在HTML第一行,說實在真的一頭霧水
查了許久才發現
因為Angular異動重新打包後,其bundle.[hash].js
的[hash]
值改變了
當然這並不是Angular的問題,改變其[hash]
是為了避免browser cache住舊版程式
但在GAE上,其實並沒有什麼權限可以去調整相關NGINX路由
只好修改自己的程式以避免cache
雖然我是在Angular上遇到,但其他前端框架(如Vue.Js、React.Js)相信也能適用
前端
打開index.html
增加以下meta
<meta http-equiv="Cache-Control" content="no-store, max-age=0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="expires" content="0">
根據MDN文件
只需要加no-store
就可以完全防止被快取,多設定 max-age=0
可以強制執行驗證(也就會清除既有快取)
Nest.Js
若有根據Nest.Js將所有路由導向index(Angular)讓Nest.Js host 前端的話
在main.ts
裡增加staticAssets的option
app.useStaticAssets(join(`${process.cwd()}/dist/frontend`), {
setHeaders: setCustomCacheControl
});
在最下面加上此funciton,亦可以獨立成一個檔案
import { Response } from 'express'; // 加在最上面
function setCustomCacheControl(res: Response, filePath: string) {
res.header('Cache-Control', 'no-store, max-age=0');
}
這樣就可以把所有前端靜態檔案避免cache住,此後新派程式就再也不會出現uncaught syntaxerror: unexpected token '<'
了