[React] Webpack 깃허브 배포하기

 

만들어진 리액트 프로젝트를 깃에 배포를 시도했으나 번들링 된 웹팩이 해결되지 않아 2-3일째 난항을 겪었다.

겪은 난항은 세가지가 있었다.

 

1) 웹팩 번들링 문제 _ 이미지 로더의 문제 >> 이미지 파일이 형성되지 않음

2) 리액트 라우터 경로 이탈 >> 빈공백 화면이 뜨게 됨

3) react - build 에러 >> 이미지 및 json 파일 경로를 public에 두고 필요한 react-scripts 가 설치되지 않아서 발생

4) deploy 사용과 에러

 

첫번째 , 웹팩 번들링 문제

1. webpack을 번들링하는 파일명을 '/dist' 에서 '/docs' 로 변경시켜준다 >> 깃허브 배포가 목적이라면 처음부터 docs 로 만들어도 괜찮다 >> /docs 폴더만 깃에 업로드한 후 build 이후 main /docs로 확인할 수도 있다.

 

2. 웹팩 사용시 이미지 로더와 관련한 모듈로더를 따로 설치했었으나 배포시 file-loader가 실행이 되지 않았다

-> 웹팩에 copy-webpack-plugin 을 설치해준다 npm install -D copy-webpack-plugin 

 

webpack.config.js 파일에 이미지 관련 코드를 작성한다

 

 

이렇게 작성 한 뒤, 다시 npm run prebuild 를 입력하면 _ ( 본인은 편의상 build는 react-scripts 로 작성하고 웹팩 build는 prebuild로 임시 설정해두었다. )

 

prebuild 명령어는 웹팩 build로 설정

 

 

그럼 아래와 같이 docs 라는 폴더내에 assets을 포함한 index.html 파일과 js 파일이 함께 들어온다 -> 이전에는 assetes 파일이 만들어지지 않아서 이미지 로더가 되지 않았었다.

 

 

 

 

주의사항! 

개발중에는 편의상 public 폴더에 img 파일과 json 파일을 넣어두었는데 이는 후에 깃허브 배포에 다시금 손을 봐주어야 하는 상황이 자꾸만 발생했다 ->  json 폴더가 public에 있으니 react-build가 되지 않았었다 

되도록이면 src 폴더내에 이미지와 json, js 파일을 둘 것을 권장하는 바이다.

 

 

 

두번째, 리액트 라우터 경로 이탈

 

1. 웹팩을 build 하고 깃에 업로드한 이후, react-build 를 하고 페이지 배포를 했으나 빈공백화면이 떴다.

개발자 도구를 열어 확인해보니 console.log에 아무것도 찍혀 있지 않고, react-develop-tools 에도 로딩 화면만 찍힐 뿐 아무것도 뜨지 않았다.  구글링한 결과 router 경로 문제임을 알게 되었다.

 

 

BrowserRouter 에 bansename을 설정해준다 basename={process.env.PUBLIC_URL}

 

 

 

2. 이미지 경로를 확실하게 지정 _ 혹시몰라서 이미지 경로도 확실하게 지정해주었다. 

 

3. 그리고 혹시몰라서 package.json 내의 homepage 와 basename을 깃io / 레포지토리스로 설정해주었다 >> 배포할 사이트명으로 설정 

 

 

 

 

세번째,  react - build 에러

이후, 다시 build 를 하고 업로드하려고 하니 에러가 자꾸 발생했다. 처음엔 영문을 몰라 구글링을 해보니 필요한 react-scripts가 전부 설치되어있지않아 발생하는 경우가 있어 node-modules 파일을 전부 지우고 다시 설치하기로 했다.

 

npm i -g react-scripts,

npm install,

 

필요한 스크립트를 전부설치하고 다시 웹팩을 build 한 뒤 리액트 build를 시도하니 다시 에러발생 >> 대체 왜 ?

터미널에 뜬 오류메시지를 확인해보니 public 폴더에 있는 json 파일들을 build 할 수 없다고 떴다 

그래서 json 파일을 src 안으로 옮겨주고 다시 실행하니 제대로 된 build가 되었다.

(이미지 관련 애로사항이 다시 생겼다. 이는 아래에 해결해야할 점으로 따로 작성해두었다. )

 

 

 

 

네번째,  deploy 사용

프로젝트 수정을 유용하게 사용하기 위해 gh-pages 를 이용하기로 했다. 레퍼지토리스 branch를 main이 아닌 gh-pages를 이용하면 코드 수정시 deploy를 통해 (npm run deploy) 즉각 build가 되고 실시간으로 확인하기 편하기 때문이었다.

deploy가 하는 일은 방금 설치한 gh-pages를 실행시키고 프로젝트 경로에 생성된 "build"라는 디렉터리를 가져가는 것.

predeploy를 만들어 deploy를 실행하면 Ndoe.js가 자동으로 predeploy가 먼저 실행시키고 predeploy는 "npm run build"를 실행시킨다. predeploy를 만들지 않으면 'npm run build'후 deploy 하면 된다.

 

npm install gh-pages 로 gh-pages 를 설치하고 package.json 에 deploy 관련 코드를 심어준다

변경사항이 생겼으니 다시 git에 업로드해준다 > push

 

 

deploy는 개발시 코드를 수정하고 build 할 때마다 npm run deploy 를 하면 즉각 업로드가 되고 시간이 조금 지난 뒤 반영이 된다 (여유있게 10분을잡아두자 )

 

 

 

 

* 해결해야할 점 

이미지 파일들이 react-build가 되지 않아 수동으로 build 안에 삽입해야하는 번거로움이 생겼다 >> build한 이후 main-root / save 시 페이지배포가 가능하지만 deploy로 확인하는 경우 다시 이미지 경로를 잃게 되는 상황발생 

gh-pages / docs 로 페이지 배포시 이미지가 경로를 잃지만 build를 수동으로 깃허브에 해주고 main root 를 통해 확인하니 멀쩡하게 작동이 되었다 >> build 내에 수동으로 assetes파일(이미지)을 삽입하고 깃에 업로드하는건 이미지가 남아있지만 deploy를 통해 업로드를 하니 다시 assetes파일(이미지)이 사라져서 발생하는 문제 같았다. ( 대체 왜 이미지 파일들이 만들어지지 않는걸까 )

 

일단 프로젝트는 깃허브에 업데이트해두고 차차 해결하기로 하자.