프로젝트 13일차 - Upload 페이지 구현 및 PJT 클론 배포
목차
1. 오늘 팀 프로젝트 업무
2. 배포를 위한 GitHub Fork
3. Netlify로 배포하기
4. GitHub Pages로 배포하기
1. 오늘 팀 프로젝트 업무
1-1. 댓글관련 버그 및 접근성 개선
- Home 페이지에서 Feed 댓글 개수가 안보이는 버그 해결
- Feed 이미지뿐만 아니라 Text를 포한한 FeedContent에서 마우스 커서를 Pointer로 변경
- FeedContent에서 마우스를 클릭하면 DetailFeed 페이지로 이동하고, DetailFeed에서는 Click Event 제거
- Feed Comment 추가 시 쌓이는 위치를 제일 아래에서, 제일 위로 변경
1-2. 새로운 Upload 구현 및 Issue 생성
- 새로운 Feed를 작성할 수 있는 게시물 업로드 페이지이다.
2. 배포를 위한 GitHub Fork
2-1. GitHub Fork
- 권한 문제없이 내가 이런저런 작업을 해보고 싶을 때 GitHub Clone 또는 Fork를 사용할 수 있다.
- 이번에 사용할 포크(Fork)는 클론(Clone)과 달리 원본 프로젝트의 원격저장소와 연결을 유지하여 업데이트가 될 때 git pull 받아 함께 발전해 나아갈 수 있다. 그렇기 때문에 클론과 달리 remote 작업을 추가로 해준다.
- GitHub Fork 의 전체과정과 명령어는 아래와 같다.
# 원본 저장소에서 내 GitHub 저장소로 Fork 수행
# 본인의 PC에 코드를 다운받을 새로운 폴더를 생성
git clone [내 저장소의 포크 레포지토리 주소]
git remote [원본 저장소 레포지토리 주소]
# 코드 수정
git add .
git commit -m "[메시지]"
git push- 희망하는 GitHub Repository를 Fork하여 내 계정 하위의 새로운 Repo.를 생성한다.
- Fork 버튼은 GitHub 레포지토리의 프로젝트 명의 오른쪽 상단에 있다.
- Fork를 하여 생성된 Repository에는 원본 프로젝트 원격저장소가 명시된다.
- 본인의 PC에 새로운 폴더를 만들고, 해당 폴더에서 Git Teminal 또는 VSCode Teminal를 실행시킨다.
- 터미널창에 아래 명령로 클론을 받고 원본 저장소와 연결한다.
- 이제 코드를 수정하고 클론과 동일한 방식으로 사용하면 된다.
- git pull을 쓰면 remote로 연결된 원본 프로젝트 저장소에서 코드를 가져오므로 충돌에 주의하자
2-2. 원본의 원격 저장소에 코드 git pull 하기
- 새로운 merge가 발생했을 때, 원본 PJT 원격 저자송에서 코드를 가져오는 방법은 아래와 같다.
# 연결(remote) 등록된 원격 저장소 확인
git remote -v
# 단축 이름 upsteam의 리모트 저장소 develop 브런치에서 pull 수행
git pull upsteam develop- 보통 react 프로젝트는 .gitignore 파일에 node_modules가 등록되어 있어 pull 받아도 package.json에 등록된 패키지 모듈들이나 build 파일이 존재하지 않는다.
- 그래서 배포하기 전에 설치와 실행 또는 빌드(build)를 하여 정상동을 확인한다.
npm install # package.json 기반으로 설치
npm start # react PJT 실행
npm run build # react PJT 빌드
- build를 수행하고 나면 프로젝트 폴더의 루트 경로에 build 폴더가 생성된다.
- build 폴더의 index.html을 Live server로 실행하면 프로젝트가 실행되어야 하는데... 빈 페이지만 나온다.
- build 가 완료된 터미널을 보니 serve 모듈을 설치하여 정적서버로 실행하라고 가이드가 나와 있다.
- serve 모듈을 설치해서 실행한다.
npm install -g serve # 글로벌로 serve 모듈 설치
serve -s build [-l 희망포트] # 지정포트로 serve 실행- 이제 터미널에 생성된 링크로 들어가면 build 폴더의 index.html 을 실행하여 프로젝트 결과를 확인할 수 있다.
3. Netlify로 배포하기
3-1. Netlify에 GitHub 저장소 연결
- GitHub 계정 인증 및 저장소 권한 승인 과정을 수행하고, 기본 설정으로 Netlify를 저장소와 연결한다.
3-2. Netlify 배포 설정
- Netlify에서는 build 명령어와 build 결과물의 폴더 경로를 지정해주면 자동으로 GitHub에서 코드를 가져와 빌드하고 배포하는 과정을 해준다.
- build 폴더는 기본값으로 설정되어 있으며, 자신의 프로젝트 package.json의 build 명령어를 입력하면 된다.
- 나는 기본 React build 명령어인 npm run build 명령으로 수정해주었다.
Build Command: npm run build
Publish Directory: build
- 정확히 입력을 해도 배포가 안되는 경우가 있는데, 그럴 경우에는 netlify 터미널 창을 보면서 무엇이 문제인지 파악해볼 수 있겠다. netlify 터미널 창은 Production deploys에서 Failed 라고 되어 있는 부분을 눌러보면 error log를 볼 수 있다.
- 배포가 성공하면 Published 가 뜨게 되고, 프로젝트 명 아래 링크가 초록색으로 변한다.
- 성공적인 배포를 기원한다!
3-3. netlify 새로고침 에러 해결법 (참조 원본)
- CRA로 프로젝트를 만들면 프로젝트 루프 경로에 public 폴더가 있다.
- pulic 폴더 하위에 _redirects 파일을 생성하고 아래 내용을 작성하고 저장한다.
/* /index.html 200- 위 내용은 어떤 경로 (/*) 로 들어와도, 200 상태코드를 내려주며 index.html 파일을 렌더링 하겠다는 의미이다.
- 이렇게 작성해두면 Netlify에서 배포한 페이지에서 새로고침을 할 때 404 Not fined 에러가 뜨면서 페이지 다운 현상을 막을 수 있다.
- 새로고침 시에 404 Not fined 에러의 원인은 보통 API 라우팅이다. 렌딩 페이지에서 데이터를 받다가 다른 페이지로 이동 후 새로고침하는 통에 받아 왔던 데이터가 날아간 상태로 이동한 페이지가 렌더링하며 에러가 발생하는 것이다.
4. GiHub Pages로 배포하기 (참조 원본1, 참조 원본2)
4-1. GitHub Page 생성
- GitHub page를 생성한다.
- GiHub page가 생성되어 들어가보면 README만 보이고 프로젝트 내용은 보이지 않는다.
4-2. gh-pages 설치 및 설정
- React 프로젝트를 GitHub page로 배포하기 위해서는 추가적인 모듈인 gh-pages가 필요하기 때문에 설치한다.
npm install -D gh-pages # -D와 --save-dev는 같다. (devDependencies)- npm run build 실행
- build 를 성공하고 보니 package.json 에 Scripts 명령어를 등록하라고 되어 있다.
- package.json 에 Scripts 명령어를 추가한다.
"scripts": {
...
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},- deploy 명령어를 터미널에서 실행해 본다.
npm run deploy- deploy 가 성공하면 publish 되었다고 터미널에 로그가 찍힌다.
- GitHub 저장소에 돌아가서 보면, gh-pages 모듈로 push된 커밋내역이 보이고 PR 버튼이 활성화된다.
- 브랜치를 눌러보면 gh-pages 브랜치가 생성된 것을 확인할 수 있다.
- gh-pages를 통해 gh-pages 브랜치가 생성된다. 이제 GitHub pages의 배포 브랜치 설정을 gh-pages로 변경한다.
- 꼭 옆에 브랜치 옆에 save 버튼을 눌러주도록 하자. save를 하지 않으면 변경사항이 저장되지 않는다.
- 이제 GitHub Pages 주소로 들어가면 즉각 변경되지 않고 조금 기다리거나 새로고침을 해보면 브랜치 변경내역이 적용된다.
- 그런데 빈 gh-pages 브랜치 내역을 보여주는 페이지가 빈 페이지다.
- console 창을 열어보면 빈화면에 대한 에러가 나온다.
4-3. React 프로젝트 PUBLIC_URL 환경변수 설정
- 프로젝트가 열리는데, 라우팅이 안되는 것으로 보여 추가적인 설정을 해준다.
- 프로젝트의 pagekage.json에 homepage (GitHub page 주소) 를 등록한다.
- PUBLIC_URL은 package.json의 homepage URL값으로 설정된다.
- BrowserRouter에 basename을 등록해준다.
<BrowserRouter basename={process.env.PUBLIC_URL}>
...
</BrowserRouter>
- 이제 추가적인 설정이 끝났다.
- npm start 를 해도 정상적으로 작동한다면, 다시 npm run deploy를 수행하고 GitHub pages를 열어보자
git run deploy