React Githup-page로 배포하기 + ( 이미지가 안 뜨는 문제 해결 )

 

평소 하던데로, 프로젝트를 깃허브 페이지로 배포하려는데 되질 않고 README 파일이 뜬다.

React 프로젝트라서 생긴 문제라고..!

 

React를 깃허브 페이지로 웹호스팅 하고 싶다면 몇가지 과정을 더 추가해 줘야 한다.

 

1. npm install gh-pages --save-dev

2. package.js에 아래 내용 추가하기

3.npm run deploy

 

이때, 

“deploy” : gh-pages -d build

npm run deploy 명령을 수행했을 때 build directory를 배포한다는 뜻이다.

 

“predeploy” : “npm run build”

predeploy는 npm run deploy 명령어를 입력했을 때 deploy가 수행되기 전에 npm run build를 한다는 뜻이다.

 

predeploy는 deploy 전에 먼저 실행된다.이를 통해 build와 deploy를 한번에 실행시킬 수 있다.

 

즉 npm run deploy 명령어를 입력하면

"predeploy"의 npm run build 부터 실행한 후, build가 다 끝나면

"deploy"에 입력한 gh-pages -d build 가 실행된다!!

 

굳이 npm run build를 해주지 않아도 된다.

4. pages에서 gh-pages로 변경 후  save 하기

 

 

그럼 호스팅이 잘 완료되어 웹 페이지가 뜨는것을 확인 할 수 있다..!

 

호스팅 후, 프로젝트를 다시 수정하고 싶다면

깃 push 하기 > npm run deploy 를 해주면 된다!

 

npm run deploy를 실행하고, 마지막에

 

이렇게 Published가 뜬다면 잘 배포 되었다는 뜻이다.

 

---

웹 페이지는 잘떴는데... 이제는 사진이 뜨질 않는다.... 

 

ㅠㅡ

 

원인은

build를 하는 과정에서 이미지 파일을 src폴더 내부가 아닌 public 폴더에 넣어두어서 발생하는 오류라고...

 

그래서 src의 주소를 절대 경로로 바꿔주면 해결 할 수 있다.

process.env.PUBLIC_URL 를 이용해 절대 경로를 만들어 주었다.

process.env.PUBLIC_URL은 리액트에서 사용하는 환경변수로 public폴더의 절대 경로를 가리키는 값을 가지고 있다고 한다!

 

 

그런데 사실 위 사진처럼 되어있는 상태였다... 이미 저렇게 사진을 불러와 줬는데도 사진이 뜨질 않았던....왜.......ㅠ...

 

 

이유는, 공백이 포함되어 있기도 했고, 저상태로 쓰면 단순 문자열로 인식을 해버리기 때문.

로컬 서버에서는 문자열로 인식해도, public 경로를 단순 루트( / ) 경로로 인식하기 때문에 사진이 잘 뜨던 것이라고~~

환경변수 쓸 때마다 까먹는거 같다.... 템플릿 리터럴 까먹지 말고..! 잘 써먹어 주자.....ㅠ

 

아래 사진처럼 수정하였다. 이제 배포한 프로젝트에 사진도 잘 떠준다!!

 

 

---

[React] GitHub Pages로 배포하기

 

[React] github-page 빌드 시에 이미지 안 뜨는 오류

 

React GitHub 배포하고 싶은데 왜 README가 뜨는거죠?

 

github pages 배포하기

 

process.env.PUBLIC_URL를 사용한 이미지 링크 오류 해결일지

 

[React] 깃허브 페이지에 리액트 프로젝트 배포하기