504 Gateway Timeout when uploading large files (2.5GB) to App Service (NestJS/Express app)

Ignacz Robert 0

Dear Community,

We are experiencing a problem one of our apps. Its a VueJS3 app, which communicates with a NestJS/Express app on backend via REST.
Backend runs on a Linux based Azure App Service.

The app have to handle large video files, users can upload few minutes videos, but when the video size is over 1.5GB, the backend fail and frontend got an 504 Gateway Timeout error.
What should I do to extend the timeout?

Thanks in advance,
Robert

Patchfox 4,011

Hi Ignacz Robert I want to help you with this question:

To handle large video files and extend the timeout in your Azure App Service, you can try to follow these steps:

Increase Timeout in NestJS/Express

Increase Payload Limit in Body-Parser: Ensure the body-parser middleware is configured to handle large payloads:

javascript

const express = require('express');
const bodyParser = require('body-parser');

const app = express();
app.use(bodyParser.json({ limit: '2gb' }));
app.use(bodyParser.urlencoded({ limit: '2gb', extended: true }));

// Your other app configurations and routes

Increase Request Timeout in Express: Set a higher request timeout in your Express server configuration:

javascript

const server = app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

server.timeout = 1800000; // 30 minutes

Azure App Service Configuration

Increase Timeout Settings: You can increase the timeout settings for the Azure App Service:

In the Azure portal, go to your App Service.

  Navigate to the **Configuration** tab.
  
     Add or update the following app settings:
     
           **WEBSITES_CONTAINER_START_TIME_LIMIT**: Set this to a higher value like `1800` (seconds).
           
                 **WEBSITES_CONTAINER_SHUTDOWN_TIME_LIMIT**: Set this to a higher value like `1800` (seconds).
                 
                 **Configure Client Request Limits**: In your `nginx.conf` (if you're using NGINX as a reverse proxy), you can increase the client request limits:
                 
                 nginx
                 
                 ```json
                 http {
client_max_body_size 2G;

} ```

Increase Frontend Timeout in VueJS

Set Axios Timeout: If you are using Axios for HTTP requests, increase the timeout in your Axios configuration:

javascript

import axios from 'axios';

const axiosInstance = axios.create({
    baseURL: 'your_api_base_url',
    timeout: 1800000, // 30 minutes
});

export default axiosInstance;

By adjusting these configurations, you should be able to handle large video files and extend the timeout for your application. If you need further assistance or more specific configurations, feel free to ask!

Increase Timeout in NestJS/Express

Increase Payload Limit in Body-Parser: Ensure the body-parser middleware is configured to handle large payloads:

javascript

const express = require('express');
const bodyParser = require('body-parser');

const app = express();
app.use(bodyParser.json({ limit: '2gb' }));
app.use(bodyParser.urlencoded({ limit: '2gb', extended: true }));

// Your other app configurations and routes

Increase Request Timeout in Express: Set a higher request timeout in your Express server configuration:

javascript

const server = app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

server.timeout = 1800000; // 30 minutes

Azure App Service Configuration

Increase Timeout Settings: You can increase the timeout settings for the Azure App Service:

In the Azure portal, go to your App Service.

  Navigate to the **Configuration** tab.
  
     Add or update the following app settings:
     
           **WEBSITES_CONTAINER_START_TIME_LIMIT**: Set this to a higher value like `1800` (seconds).
           
                 **WEBSITES_CONTAINER_SHUTDOWN_TIME_LIMIT**: Set this to a higher value like `1800` (seconds).
                 
                 **Configure Client Request Limits**: In your `nginx.conf` (if you're using NGINX as a reverse proxy), you can increase the client request limits:
                 
                 nginx
                 
                 ```json
                 http {
client_max_body_size 2G;

} ```

Increase Frontend Timeout in VueJS

Set Axios Timeout: If you are using Axios for HTTP requests, increase the timeout in your Axios configuration:

javascript

import axios from 'axios';

const axiosInstance = axios.create({
    baseURL: 'your_api_base_url',
    timeout: 1800000, // 30 minutes
});

export default axiosInstance;

Share via

504 Gateway Timeout when uploading large files (2.5GB) to App Service (NestJS/Express app)

Your answer