[Vite] 이미 배포 된 프로젝트 이미지만 수정하는 방법(코드 수정X)

✅ 참고

Vite를 사용하여 React 프로젝트를 build 후 배포중인 상태에서 소스코드 수정 없이 이미지를 수정하는 방법입니다.

 

1.  수정 전 이미지 확인

수정 전 이미지를 확인합니다. 현재 이미지는 파란색 React 로고입니다.

2. 현재 배포중인 dist 폴더로 이동

배포된 프론트 프로젝트가 Nginx 등과 연결된 폴더로 이동합니다.

$ cd [dist 폴더]

# 예시
# $ cd /usr/share/nginx/dist/assets

참고: Nginx를 통하여 배포중이라면 대부분의 이미지는 /usr/share/nginx/dist/assets 경로에 존재합니다.
하지만 이미지를 public 폴더에서 관리한다면 /usr/share/nginx/dist/public 경로로 이동해 줍니다. 

 

3. 수정 전 이미지명 확인

vite는 프로젝트를 build 하는 과정에서 이미지명을 변경합니다.
예를들어 기존에 react.svg 라는 파일명을 build 과정에서 react-CHdo91hT.svg로 변경합니다.
 
따라서 수정된 이미지를 넣으실 때 수정 전 이미지명과 동일하게 넣어 주셔야 합니다.

참고: 기존 이미지가 svg 이미지라면, svg 이미지 파일을 넣어 주셔야 합니다.
기존 이미지가 png 이미지라면, png 이미지 파일을 넣어 주셔야 합니다.

png 이미지의 확장자명만 svg로 변경하여 넣을 경우에는 이미지가 정상적으로 나타나지 않습니다.

 

4. 수정 전 이미지 삭제

수정 전 이미지를 삭제합니다.

$ rm [이미지파일]

# 예시
# $ rm react-CHdo91hT.svg

 

5. 수정 된 이미지 반영

수정된 이미지를 해당 폴더에 넣어줍니다.
 
이때 수정된 이미지는 수정 전 이미지와 파일명을 동일하게 해줍니다.

 

6. 이미지 변경 완료

수정 전 파란색 React 로고에서 수정 된 초록색 React 로고로 이미지가 변경되었습니다.