현재 진행중인 서비스는 최소 100개 이상의 이미지 파일이 기본적으로 사용되고, 추후에 각 게시글 이미지가 추가될 것을 고려하여 로컬에 이미지를 저장하기로 했다.
(평소 프로젝트에서 이미지를 관리했던 S3를 사용하기에는 용량의 제한(프리티어 5GB)이 있어 사용하지 않음)
로컬 이미지 접근
Client(React)에서 Spring으로 이미지 파일 전송 → Spring에서 로컬에 파일 저장/데이터베이스에 파일 경로 저장
react에서 로컬 파일에 접근할 수 없음
Client가 로컬에 저장된 파일을 Spring 서버 주소를 통해 접근
WebConfig.java
@Configuration
public class WebConfig implements WebMvcConfigurer {
private String resourcePath = "file:///C:/images/personnel/";
private String uploadPath = "/profile-image/**";
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry){
registry.addResourceHandler(uploadPath)
.addResourceLocations(resourcePath);
}
}
클라이언트가 /profile-image/ url로 요청하면 C:/images/personnel/로 요청을 전달한다.
http://localhost:8080/profile-image/test.jpg 요청 시 C:/images/personnel/test.jpg 경로의 파일을 응답한다.
Nginx /site-available/domain.conf
nginx에서 react 서버로 리다이렉트하기때문에 /profile-image 경로를 따로 설정해준다.
/api/profile-image로 요청하게 되면 기존 /api/{any} 등의 request mapping값과 충돌
Docker volume
React, Spring 서버를 재배포 하게 되면 컨테이너를 다시 띄우게 되어 저장된 이미지가 손실될 위험이 있어 인스턴스 내 로컬 경로에 이미지 파일을 저장
sudo docker run -p 8080:8080 -d -v /var/images/personnel:/images/personnel
(DB에 이미지 파일을 저장하게 되면 병목현상이 우려되어 이미지 파일 경로를 저장하고 경로를 통해 이미지를 접근하도록 함)
file 프로토콜
file: 뒤에 붙는 슬래시는 다음의 경우만이 적합하다.
- /path
- ///path
- //localhost
/path의 시작 slash는 생략할 수 없다.
[file:/path](file:/path) ~ 형태로 하나의 슬래시가 가능한 이유는, host 앞의 //가 생략될 수 있기 때문이다. 생략되면 host는 자동으로 localhost가 된다.
또는 //를 생략하지 않고 localhost만 생략할 수도 있다. 이 경우 [file:///](file:///) 처럼 슬래시가 3개가 된다. 그래서 file: 뒤에 슬래시는 기본적으로 2개는 안되고 1개 혹은 3개 이상(4개 부터는 cd와 같음)이 되는 것이다.
@Configuration
public class WebConfig implements WebMvcConfigurer {
private String resourcePath = "file:////images/personnel/";
private String uploadPath = "/profile-image/**";
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry){
registry.addResourceHandler(uploadPath)
.addResourceLocations(resourcePath);
}
}
'배포' 카테고리의 다른 글
| Github Actions로 AWS EC2에 배포하는 과정 (0) | 2023.12.07 |
|---|
