Nginx를 수정하여 413을 해결해보자

공모전을 진행하는 도중 이미지 업로드가 되지 않는 오류가 발생했다. 특히 핸드폰에서 업로드할 때마다 오류가 발생했는데, 정확한 에러 메시지를 확인하기 어려웠다. 그래서 Mac과 아이폰을 연결하여 콘솔 로그를 직접 확인해 보았다.

📌 참고: 모바일 환경의 콘솔 로그를 PC에서 확인하기 (Mac, iPhone)

원인 파악

핸드폰을 연결하고 오류가 나는 상황을 재현해 보았다.

콘텐츠 크기가 너무 크다고 나왔는데, 실제 이미지를 확인해 보니 1.6MB 정도밖에 되지 않았다.

해결 과정

1. Multer에 limit 명시

백엔드 서버는 Express를 사용하고 있었고, 이미지 업로드는 Multer로 처리하고 있었다. 그래서 다음과 같이 파일 크기 제한을 명시했다.

const upload = multer({ storage: multer.memoryStorage(), limits: { fileSize: 10 * 1024 * 1024 } }); // 10MB

하지만 여전히 같은 오류가 발생했다.

2. Nginx client_max_body_size 설정

그러다가 AI가 Nginx의 client_max_body_size 변경을 제안했다. 그래서 공식문서를 찾아보았더니 아래와 같이 정의가 되어 있었다.

Sets the maximum allowed size of the client request body. If the size in a request exceeds the configured value, the 413 (Request Entity Too Large) error is returned to the client.

Syntax:	`client_max_body_size size;`
Default:	client_max_body_size 1m;
Context:	http, server, location

출처: Nginx 공식문서 - client_max_body_size

client_max_body_size를 이용하여 클라이언트 측에서 보내는 body의 용량을 설정할 수 있다고 한다. 이때 값을 따로 지정하지 않으면 기본으로 1MB가 설정이 된다.

Nginx 파일에서 해당 내용을 어디에 위치하냐에 따라서 전역이 될수도, 특정한 location 혹은 서버로 한정시킬 수 있다.

전체 서버에 적용

http {
    client_max_body_size 50m;

    server {
        listen 80;
        server_name example.com;

        location / {
            proxy_pass http://localhost:3000;
        }
    }
}

특정 서버 블록에만 적용

server {
    listen 80;
    server_name upload.example.com;

    client_max_body_size 100m;

    location /upload {
        proxy_pass http://127.0.0.1:4000;
    }
}

특정 location에만 적용

server {
    listen 80;
    server_name api.example.com;

    location /images {
        client_max_body_size 20m;
        proxy_pass http://127.0.0.1:5000;
    }
}

나의 경우 전역으로 적용했고, 해당 설정을 적용 후 413 에러를 해결할 수 있었다.

마무리하며

Nginx의 설정을 통해 에러를 해결할 수 있다는 새로운 지식을 얻었다. 단순히 프론트엔드, 백엔드의 코드를 수정한다고해서 에러를 해결할 수 없다는 것 또한 알게 되었다. 실제로 AWS에 배포된 환경을 이해하고, 상황에 맞게 에러를 해결할 수 있는 능력 또한 길러야겠다고 생각했다.