[AWS] Bulid 된 상태에서 Public 이미지 경로

npm build 진행시 public의 /images 경로를 찾지 못하는 문제?

 

aws로 배포까지 진행한 상태에서 파비콘 이미지와 특정 이미지를 찾지 못하는 버그가 생겼다.

 

 

공식문서를 살펴보자.👇

https://create-react-app.dev/docs/using-the-public-folder/#adding-assets-outside-of-the-module-system

Using the Public Folder | Create React App

공식문서를 잘보면 

public폴더에 파일을 넣으면 웹팩에서 처리되지 않는다고 한다.

대신 빌드 폴더에 그대로 복사가 되고, 폴더의 파일을 public이라는 환경 변수를 사용해야 한다.

 

파비콘은 favicon.ico 파일을 하나 만들어서 public폴더에 넣어준다음 

<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

index.html 파일에 들어가서 link rel 부분을 저렇게 수정해주면 된다.

 

그다음엔 image 경로를 찾지못하는 문제인데..?

마찬가지로 웹팩에서 처리되지않기때문에 PUBLIC_URL을 사용해야 한다고 함

 

📌작성코드

<img src={process.env.PUBLIC_URL + '/img/logo.png'} />;

 

 

상수데이터에 있는 URL은 아래처럼 넣어줬더니, 정상적으로 이미지들이 나오는걸 확인!