Nginx를 사용한 이미지 서빙

왜 Nginx로 이미지를 서빙할까? 🤔

프로젝트 구조에서 프론트엔드는 React, 백엔드는 Spring으로 REST API를 구현하고 있다. 일반적으로 이미지를 업로드하면 front → back → server 흐름으로 서버에 저장된다. 하지만 React는 빌드된 상태에서 public/ 디렉토리 안의 정적 파일만 접근할 수 있다. 따라서 업로드된 이미지를 전부 public/에 넣는 방식은 프로젝트가 무거워지고, 관리 또한 어렵다.
이 때문에 이미지를 서버 디렉토리에 따로 저장하고, Nginx를 이용해 정적 파일을 서빙하는 방식을 많이 사용한다. AWS 환경에서는 S3가 이런 정적 파일 관리 역할을 대신한다.

방법

Nginx

server{
	# ssl 인증 443 내용
    
   
	location /img {
    alias 이미지 디렉토리/; 
    }
}

location 블록 접속 경로
alias URL 경로를 실제 디스크 경로와 연결

Test

$sudo nginx -t  #nginx 테스트 
$sudo systemctl nginx reload # nginx 재 설정 

결과

짜잔 ~

글 읽어 주셔서 감사합니다! :)