Express托管React应用时JS/CSS静态资源请求返回404问题

部署已构建完成的React应用时，页面依赖的JS、CSS等静态资源均无法正常加载，所有静态资源请求均返回404状态码，预期目标为正常托管public文件夹下的index.html文件。

app.use( express.static( path.join( __dirname, `../pubilc` ) ) );
app.use( express.json( { limit: '1mb' } ) );
app.use( express.urlencoded( { limit: '30mb', extended: true } ) );
app.use( '/usr', userRouter );
app.use( '/planifications', planificationRouter );


app.get( '/', ( _req: Request, res: Response ) => {
    res.sendFile( path.join( __dirname, '../public', 'index.html' ) );
} );

• 核心错误：静态资源托管路径存在拼写错误。express.static 中间件配置的目录路径写为 ../pubilc，和实际存在的public文件夹名不符（字母l和i顺序写反），导致静态资源中间件无法定位到正确的静态文件目录。访问根路径时能拿到index.html是因为app.get('/')路由里写的路径是正确的../public，但html中引用的JS、CSS等资源会优先匹配静态资源中间件，路径错误就会全部返回404。
• 修复方案：将静态资源配置行的拼写错误修正即可，修改后代码如下：

// 修正拼写错误：pubilc -> public
app.use( express.static( path.join( __dirname, `../public` ) ) );

• 补充优化：如果项目使用了React Router做前端路由，建议在所有接口路由配置的最后添加通配符路由，将所有非接口请求统一返回index.html，避免前端路由页面刷新时出现404问题，补充代码如下：

// 注意：该路由必须放在所有接口路由、静态资源配置的最末尾
app.get( '*', ( _req: Request, res: Response ) => {
    res.sendFile( path.join( __dirname, '../public', 'index.html' ) );
} );

内容的提问来源于stack exchange，提问作者Andy95