Nginx 파일 업로드 413 Request Entity Too Large 오류해결 / 백엔드에서 이미지 업로드 제한, 응답 메시지 처리하기

문제발단

RgbitCode 웹 사이트에서 글쓰기 에디터에 이미지를 업로드 할때 이미지 사이즈 문제로 오류가 발생하는 경우가 생겼다.

원인

• 서버의 허용 파일사이즈보다 더 큰 파일을 올리게 됬을 때 발생

  
  

해결한 방법

Nginx client_max_body_size 제한 늘리기

• nginx 기본 client_max_body_size 는 1Mb 이다

nginx 설정 http 블록에 client_max_body_size 을 설정하고 sudo nginx -s reload 로 설정을 다시 불러오면 된다.

여기서 0 으로 두게 되면 사이즈를 제한하지 않게 된다. 필자의 경우 10M 정도 주었다.

그런데 필자의 경우 웹서버의 nginx 설정에 client_max_body_size 설정을 해도 적용이 되지 않았었다. 그래서 설치된 nginx 버전을 변경해보기도 하고 뻘짓을 하다가... 곰곰히 생각해보니 다음과 같이 서버 인프라가 구성되어 있다는 것을 깨닳았다. 서버 세팅을 해둔지가 조금 오래되서 이렇게 구성되어 있었다는 사실도 깜빡하고 있었다ㅎㅎ

프론트 엔드 서버와 백엔드 서버, 이미지서버가 분리 되어 있고 백엔드 서버는 두대의 WAS를 Nginx Proxy를 통해 로드밸런싱 하도록 세팅하였다. 그렇다. 필자의 경우 api_proxy nginx의 client_max_body_size 에도 설정을 해주어야 했다.

그렇게 이 부분은 해결.

백엔드 서버 설정 파일업로드 제한 늘리기

spring:
  servlet:
    multipart:
      enabled: true
      max-file-size: 10MB
      max-request-size: 10MB

• 이미지 업로드 서버를 Spring Boot 로 multipart upload 로 구현했기 때문에 해당 설정을 해주었다.

• 만약 nodejs 로 파일업로드를 구현 했다면 body-parser 설정을 해주어야 한다.

백엔드 이미지 업로드 API 에서 용량 제한 / 클라이언트에게 오류 응답

• 서버 설정으로는 최대 10MB 까지 요청할 수 있지만, 어플리케이션 내에서 따로 파일업로드 제한을 걸었고 사용자에게 안내메시지를 출력해주기로 했다.

    public ResponseEntity<?> imageFileUpload(
            @RequestParam(value = "file") MultipartFile file,
            @RequestParam(value = "ratio", defaultValue = "0.5") Double ratio) throws IOException {
        CustomUserDetail userDetail = authorizationService.getUserDetail();
			  final long MAX_FILE_SIZE = 3000000;
        long fileSize = file.getSize();
        // 파일 사이즈를 체크
        if(fileSize > MAX_FILE_SIZE){
            return ResponseEntity.status(HttpStatus.PAYLOAD_TOO_LARGE).body("오류 응답");
        }else{
   					try{
                String paths = uploadService.getUploadTempUserPath(userDetail.getUsername());
                // 이미지파일서버로 전송
                ImageUploadResDto resDto = uploadService.uploadImageToServer(file, paths, ratio);
                return ResponseEntity.ok().body(resDto);
            }catch (Exception e){
								log.error(e.getMessage());
                return ResponseEntity.internalServerError().body("오류 응답"));
            }
        }
    }

백엔드에서 업로드 파일이 3MB 이하이면 이미지서버로 전송하고 3MB 초과 시 원본파일명과 메시지 등 적절하게 응답하게 만들었다. 그리고 클라이언트에서 사용자에게 보여주도록 하였다.