swagger-ui-express配合API Gateway部署静态资源404问题如何解决

问题根因 #

swagger-ui-express默认生成的静态资源（css、js、favicon）引用为相对根路径，不会自动拼接API Gateway的/dev/阶段前缀，同时当前配置未覆盖/api-doc下的子路径请求，导致资源加载404。

解决方案 #

1. 修复代码配置

修改后的完整代码如下：

const app = express();
const swaggerUI = require('swagger-ui-express');
const serverlessExpress = require('@vendia/serverless-express');

const Stage = process.env.Stage;
const apiId = process.env.apiId;
// 合并重复的customCss配置，新增swagger basePath配置
const options = {
    customCss: '.swagger-ui .topbar { display: none; background-color: red }',
    swaggerOptions: {
        basePath: `/${Stage}`
    }
}

let serverlessExpressInstance

async function asyncTask() {
    // load latest spec from API Gateway export removed to simplicity reasons.
    const swaggerDocument = spec;
    console.log("load swagger file complete.");
    return swaggerDocument
}

async function setup(event, context) {
    const swaggerDocument = await asyncTask()
    console.log(swaggerDocument)

    // 开启redirect，自动将/api-doc重定向到/api-doc/，解决相对路径引用错误
    app.use('/api-doc', swaggerUI.serveWithOptions({ redirect: true }));
    app.use('/api-doc', swaggerUI.setup(swaggerDocument, options));
    // 新增/api-doc/*路径匹配，覆盖所有子资源请求
    app.use('/api-doc/*', swaggerUI.serve, swaggerUI.setup(swaggerDocument, options));
    console.log("setup of swagger complete");

    serverlessExpressInstance = serverlessExpress({ app })
    return serverlessExpressInstance(event, context)
}

function handler(event, context) {
    if (serverlessExpressInstance) return serverlessExpressInstance(event, context)
    return setup(event, context)
}

exports.handler = handler

2. 修改API Gateway配置

• 新增路径资源 /api-doc/{proxy+}，设置请求方法为ANY
• 开启Lambda代理集成，绑定同一个Lambda函数
• 为/api-doc/{proxy+}资源开启CORS（如有跨域需求）
• 重新部署API Gateway的dev阶段

3. 访问验证

配置完成后访问 https://xxx.execute-api.xxx.amazonaws.com/dev/api-doc，会自动重定向到带末尾斜杠的路径，静态资源即可正常加载。

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