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로 변환된다.
이렇게 경로를 설정하면, 개발 모드와 프로덕션 빌드 모두에서 리소스 경로를 올바르게 처리할 수 있다.

이렇게 다시 이미지들이 잘 보이는 것을 볼 수 있었다
다 완성해서 끝난 줄 알았지만 갑자기 빌드 후에 오류가 떠서
해결하느라 좀 시간을 썼었던 부분이였다.
아무튼 해결 완료
!!
728x90
반응형
'혼자 이것저것 공부해보는 > 디즈니 앱 플러스 클론 코딩' 카테고리의 다른 글
| 오류의 연속 끝에 첫 배포 성공 (1) | 2024.08.05 |
|---|---|
| API KEY 숨기기 후 다시 빌드 및 배포 (0) | 2024.08.02 |
| (END) Login Page 구현하기 (0) | 2024.08.01 |
| swiper 모듈을 이용한 터치 슬라이드 구현하기 (0) | 2024.08.01 |
| 모달 창 외부 클릭 시 모달 닫게 만드는 Custom Hooks 생성 (2) | 2024.08.01 |