Full Stack Web Developer.
Syaku (샤쿠)

Java, JS (ES6+), Spring, Spring security, jQuery, Reactjs, Bootstrap.

        

07-03 03:38


Spring Boot 2 보기 Front-end 보기 DevOps 보기 Spring 3 보기 Spring Security 3 보기

Nginx Tomcat 연동 파일첨부 : file upload 500 Internal Server Error Spring AngularJS

Nginx Tomcat 연동 파일 첨부 500 에러


개발환경

Mac OS X 10.9.4
Nginx 1.6.2
AngularJS 1.3.6
JAVA 1.6
Apache Tomcat 7.x
Spring 3.2.12

프론트엔드 AngularJS 와 백엔드 Spring 으로 개발하기 위해 Nginx 와 Tomcat 을 연동하였다.
문제는 파일 첨부시 500 Internal Server Error 에러가 발생하는 것이다.

Nginx 는 8011 포트를 사용하고 Tomcat 8080 포트를 사용한다.

파일 업로드는 AngularJS 라이브러리를 사용하였다.
angular-file-upload : https://github.com/danialfarid/angular-file-upload

난 개발한 소스 요청헤더의 문제이거나, 오픈소스 라이브러리의 문제라고 생각했다.

그렇게 문제를 접근하기 시작했고 하루종일 스택플로워를 뒤지고 있었다… 그러다 혹시 Nginx 와 Tomcat 연동하면서 문제가 있는 것인가라고 생각을 고쳐보았다.
하… 웹서버까지 말성이니…참 알아야 할게 너무너무 많다.

여튼 8080 으로 다이렉트로 파일을 전송하였다… 잘된다;;; ㅡ,.ㅡ;; 왜 이생각을 못했지…

그럼 8011 -> 8080 으로 전달한 파일을 8080에서 전달하지 않고 8011에서 처리하려고 경로를 찾으니 500 에러가 발생하는 게 당연한것;;;

자료들이 모두 영어라 대충보고 소스로 파악한게 큰 실수이고 삽질의 시작이였던 것 같다;;;

결과 내용

500 Internal Server Error
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36
Origin: chrome-extension://hgmloofddffdnphfgcellkdfbfbjeloo
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary5eVHfIWsCU93kUXt
Accept: */*
Accept-Encoding: gzip, deflate
Accept-Language: ko-KR,ko;q=0.8,en-US;q=0.6,en;q=0.4

그래서 Nginx에 대해 파일업로드 설정이 있는 지 찾아보았다.

Nginx 설정

location /upload {
     limit_except POST       { deny all; }

     client_body_temp_path           /tmp/;
     client_body_in_file_only        on;
     client_body_buffer_size         128K;
     client_max_body_size            100M;

     proxy_redirect                  off;
     proxy_set_header                X-FILE $request_body_file;
     proxy_set_header                X-Forwared-For  $proxy_add_x_forwarded_for;
     proxy_set_header                Host    $http_host;
     proxy_set_header                X-NginX-Proxy   true;
     proxy_set_header                Connection "";
     proxy_pass_request_headers      on;
     proxy_set_body                  off;
     proxy_http_version              1.1;
     proxy_pass                      http://my_backend;
}

이렇게 설정하고 파일첨부하면 TOMCAT 까지 요청은 전달되었는 데 새로운 오류가 출력된다.

HTTP Status 400 - Required MultipartFile parameter 'files' is not present

파라메터가 없다는 것… 햐~ Nginx 설정이 뭔가 빠지거나 잘못되었는 것 같다.
Nginx 사용하는 건 무리였는 가 싶고… 아파치를 쓸껄 그랬나 싶지만, 그래도 이렇게 경험이라도 해보니 배우는 게되는 거 아니겠는 가~

설정 이름을 자세히 보니 request 명이 있어 이를 포함한 설정 정보는 모두 주석을 처리해보왔다… 근데 된다;;;

그래서 문제가되는 설정을 찾기 위해 하나하나 주석을 풀어보니 proxy_set_body 이녀석이 문제였던것;;;
이 설정에 대해 알아보니 요청 전달 본문의 재 정의할 수 있다고 한다… 근데 왜 off 를;;;

드뎌 문제점이 해결되었다.

개발 프로그램에만 신경쓰고 웹서버는 필요할때 찾아보고 했는 데… 이런 문제가 생기니 다른 사람 포스팅에 의존하고
영어이다 보니 소스로 파악하거나 적용해보고 확인하니 쉽게 해결할 일도 어렵게 돌아갔다.
최소한 Nginx 메뉴얼을 한번 읽어봤었으면 좀 쉬웠을 지도…

마지막으로 위 설정정보는 모두 필요한 것이 아니다.

     client_body_temp_path           /tmp/;
     client_body_in_file_only        on;
     client_body_buffer_size         128K;
     client_max_body_size            100M;

위 4가지만 있어도 첨부파일은 잘 등록된다.

posted syaku blog

Syaku Blog by Seok Kyun. Choi. 최석균.

http://syaku.tistory.com


댓글 남기기
◀ PREV 1···67891011121314···20 NEXT ▶