NestJS Swagger UI generation for API Gateway - nestjs

Question

I am having trouble creating an endpoint to serve the swagger documentation. The only way I can do it locally is if the path has a double slash at the end localhost:3003/dev/swagger//; If I omit one of the forward slashes, it returns a 404 for the path localhost:3003/swagger without /dev. Once deployed, API Gateway will return {"message": "Forbidden"} for either swagger endpoint (with or without //). How can I get the API Gateway /swagger endpoint to return the swagger UI?, I'm not sure if I have missed some steps.
Below are the main.ts for my NestJS application as well as the serverless.yml and here is a sample repo with minimum setup to duplicate my issue. https://github.com/MRdgz/serverless-nestj-swagger
main.ts
// main.ts
import { INestApplication } from '#nestjs/common';
import { NestFactory } from '#nestjs/core';
import { DocumentBuilder, SwaggerModule } from '#nestjs/swagger';
import { configure as serverlessExpress } from '#vendia/serverless-express';
import { Callback, Context, Handler } from 'aws-lambda';
import { AppModule } from './app.module';
let server: Handler;
function setupSwagger(nestApp: INestApplication): void {
const config = new DocumentBuilder()
.setTitle('Sample API')
.setDescription('Sample API Documentation')
.setVersion('0.0.1')
.addServer('/dev')
.build();
const document = SwaggerModule.createDocument(nestApp, config);
SwaggerModule.setup('/swagger', nestApp, document, {
customSiteTitle: 'Sample',
swaggerOptions: {
docExpansion: 'none',
operationSorter: 'alpha',
tagSorter: 'alpha',
},
});
}
async function bootstrap(): Promise<Handler> {
const app = await NestFactory.create(AppModule);
setupSwagger(app);
await app.init();
const expressApp = app.getHttpAdapter().getInstance();
return serverlessExpress({ app: expressApp });
}
export const handler: Handler = async (
event: any,
context: Context,
callback: Callback,
) => {
event.path = `${event.path}/`;
event.path = event.path.includes('swagger-ui')
? `swagger${event.path}`
: event.path;
server = server ?? (await bootstrap());
return server(event, context, callback);
};
severless.yml
service: sample-api
variablesResolutionMode: 20210326
useDotenv: true
plugins:
- serverless-offline
- serverless-plugin-optimize
# functions will inherit settings from provider properties if available,
provider:
name: aws
runtime: nodejs14.x
lambdaHashingVersion: 20201221
# memorySize: 1024 # default 1024 MB
timeout: 30 # default 6 seconds
# sls deploy --stage {stage} otherwise defaults to dev
stage: ${opt:stage, 'dev'}
functions:
main:
handler: dist/main.handler
name: ${opt:stage, 'dev'}-${self:service}
events:
- http:
method: ANY
path: /{proxy+}
cors: true
custom:
serverless-offline:
httpPort: 3003
optimize:
external: ['swagger-ui-dist']

Answer 1

You can check this GitHub issue, this may give you some ideas, and this is how I end up with:
const document = SwaggerModule.createDocument(app, config);
const forwardedPrefixSwagger = async (
req: any,
_: Response,
next: NextFunction,
) => {
req.originalUrl = (req.headers['x-forwarded-prefix'] || '') + req.url;
next();
};
app.use(
'/api/',
forwardedPrefixSwagger,
swaggerUi.serve,
swaggerUi.setup(document),
);

Answer 2

I think the issue is described here serverless-http/issues/86
What helped in my case
(please note:
it is still a kind of workaround;
I have checked it locally only npm run sls:offline;
It is a simplified example)
serverless.yaml
My custom section:
plugins:
- serverless-plugin-typescript
- serverless-plugin-optimize
- serverless-offline
[...]
custom:
serverless-offline:
noPrependStageInUrl: true <----- this guy!
optimize:
external: ['swagger-ui-dist']
[...]
functions:
main:
handler: src/lambda.handler
events:
- http:
method: ANY
path: /
- http:
method: ANY
path: '/{proxy+}'
lambda.ts
import { AppModule } from './app.module';
import { Callback, Context, Handler } from 'aws-lambda';
import { NestFactory } from '#nestjs/core';
import { DocumentBuilder, SwaggerModule } from '#nestjs/swagger';
import serverlessExpress from '#vendia/serverless-express';
import { INestApplication } from '#nestjs/common';
let cachedServer: Handler;
async function bootstrap(): Promise<Handler> {
const app = await NestFactory.create(AppModule);
setupSwagger(app);
await app.init();
const expressApp = app.getHttpAdapter().getInstance();
return serverlessExpress({ app: expressApp });
}
export const handler: Handler = async (
event: any,
context: Context,
callback: Callback,
) => {
cachedServer = cachedServer ?? (await bootstrap());
return cachedServer(event, context, callback);
};
function setupSwagger(app: INestApplication) {
const options = new DocumentBuilder()
.setTitle('My API')
.setDescription('My application API')
.setVersion('1.0.0')
.addTag('#tag')
.build();
const document = SwaggerModule.createDocument(app, options);
SwaggerModule.setup('api/swagger', app, document);
}
The result is that http://localhost:3000/api/swagger returns the api page,
http://localhost:3000/api is handled by a default
#Controller('api')
#Get()