前端应用部署至Google App Engine时bundle.js不执行问题求助

问题根因 #

你当前的服务端路由逻辑会响应所有路径的请求，统一返回dist/index.html文件。当浏览器加载完index.html后，会自动发起对bundle.js的请求，此时服务端依然返回HTML内容，触发MIME类型校验错误，自然无法执行JS代码。

修复步骤 #

1. 补全webpack配置的输出路径 #

你当前的webpack配置中output字段只指定了文件名，没有指定输出目录，打包产物会散落在项目根目录，容易出现路径混乱。修改output配置如下：

output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'), // 新增这一行，指定所有打包产物输出到dist目录
},

修改后重新执行打包命令，确认dist目录下会同时生成index.html和bundle.js两个文件。

2. 修复服务端路由逻辑 #

首先安装静态资源托管依赖：

npm i serve-static

修改服务端代码，先托管dist目录下的静态资源，再处理SPA路由回退逻辑：

const path = require('path')
const app = require('api-engine')();
const serveStatic = require('serve-static');

const { PORT = 8080 } = process.env;
const distPath = path.join(__dirname, 'dist');

// 优先匹配静态资源请求，直接返回对应文件
app.use(serveStatic(distPath));

// 非静态资源请求统一返回index.html，适配前端路由
app.use('/', (req, res) => { 
    return res.sendFile(path.join(distPath, 'index.html'));
});

app.listen(PORT, () => {
    console.info(`Listening on port ${PORT}`);
});

修改后本地启动服务即可解决MIME类型报错问题。

3. 配置Google App Engine部署规则 #

在项目根目录新增app.yaml配置文件，指定静态资源映射规则：

runtime: nodejs16 # 替换为你实际使用的Node.js版本
handlers:
  # 匹配所有静态资源后缀，直接返回对应文件
  - url: /(.*\.(js|css|png|jpg|gif|ico|svg|woff|woff2|ttf|eot))$
    static_files: dist/\1
    upload: dist/.*\.(js|css|png|jpg|gif|ico|svg|woff|woff2|ttf|eot)$
  # 其余所有请求返回index.html
  - url: /.*
    static_files: dist/index.html
    upload: dist/index.html

配置完成后先执行打包命令生成dist目录，再执行GAE部署命令即可正常部署运行。

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