github에 배포 해보자 / 갑자기 빌드 후 오류 생성

Github에 배포하기 

 

1. 터미널 창에 입력해준다. 

npm install gh-pages --save-dev

 

 

2. package.json에 들어가보면 "gh-pages" 버전이 적혀있는 것을 확인해주면 된다. 

 

3. package.json 안에 

"homepage": "https://깃허브 사용자이름.github.io/{깃허브 파일이름}/",

 

을 적어주면 된다. 

 

 

4.  이 과정들을 거쳤다면, 이제 빌드를 해보자 

npm run build

 

 

5. 빌드 후 배포하기 

npm run deploy

 

Published 문자가 뜨면 배포가 완료 된 것이다. 

 

 

● 빌드 후 오류 

다 완성 시켜줬었는데 경로 때문인지 이미지 파일들이 전부 안보이는 것이다 

 

 

문제를 해결하기 위해 살펴보고 나니 빌드 후에 경로문제 때문에 

이렇게 된 것 같아 경로를 수정해보기로 했다. 

 

 

빌드 후에 경로를 ${process.env.PUBLIC_URL}로 변경해서 이미지 오류의 문제를 해결해줬다. 

이렇게 변경해줘야하는 이유는 React 앱의 public 폴더 내에서의 리소스 경로 처리를 쉽게 하기 위해서이다.

 

 

• 빌드 경로 변경:
  • React 앱을 빌드하면, 모든 정적 파일은 build 디렉토리에 복사된다. 빌드된 애플리케이션의 루트 URL이 변경될 수 있기 때문에, 상대 경로를 사용하면 이러한 파일들을 찾지 못할 수 있다. 
  • process.env.PUBLIC_URL은 애플리케이션이 배포되는 URL의 경로를 기준으로 정적 자원들을 참조할 수 있게 한다. 이 변수를 사용하면 빌드된 애플리케이션이 배포되는 경로에 관계없이 올바른 URL을 참조할 수 있다. 
• 환경 변수 사용:
  • process.env.PUBLIC_URL은 create-react-app에서 기본적으로 제공하는 환경 변수로, public 폴더의 경로를 기반으로 한다. 
  • 이 변수는 웹 서버에서의 절대 경로를 제공하며, 애플리케이션이 호스팅되는 경로에 상관없이 항상 올바른 경로를 참조할 수 있도록 도와준다. 
• 경로의 일관성 유지:
  • 앱이 개발 중에는 localhost에서 실행되고, 빌드 후에는 실제 도메인 또는 서브 디렉토리에서 실행될 수 있다.  이 경우 process.env.PUBLIC_URL을 사용하면 절대 경로를 통해 리소스를 참조할 수 있다. 
• 빌드와 배포의 유연성:
  • process.env.PUBLIC_URL을 사용하면 배포할 때 경로를 변경해도 코드 수정 없이 리소스를 올바르게 참조할 수 있다. 예를 들어, 앱이 서브 디렉토리에 배포되거나 다른 경로에 위치할 경우에도 문제없이 동작하게 된다. 

---

예를 들어, 

• 개발 모드: src="/images/logo.svg"
  • 개발 중에는 기본적으로 public 폴더에서 이 파일을 참조한다. 
• 빌드 후: src={${process.env.PUBLIC_URL}/images/logo.svg}
  • 빌드 후, process.env.PUBLIC_URL은 / 또는 배포 경로를 기준으로 변환된 URL을 반환한다. 예를 들어, https://example.com/images/logo.svg 또는 https://example.com/myapp/images/logo.svg로 변환된다. 

이렇게 경로를 설정하면, 개발 모드와 프로덕션 빌드 모두에서 리소스 경로를 올바르게 처리할 수 있다. 

 

 

 

이렇게 다시 이미지들이 잘 보이는 것을 볼 수 있었다

다 완성해서 끝난 줄 알았지만 갑자기 빌드 후에 오류가 떠서

해결하느라 좀 시간을 썼었던 부분이였다. 

 

아무튼 해결 완료 

!!