[GitHub 배포] 포트폴리오 환경 설정 및 배포하기

 

 

여는 글

---

 

작년에 구글 클라우드 플랫폼(1년만 무료)으로 배포?는 아니지만 서버(정확하게 말하면 구글 API 호출 위한 중간 매개 역할)를 사용한 적 있었는데

 

배포에서 막혀서 결국 배포는 못했던 기억이 있기 때문에 이번엔 배포부터 하자고 마음 먹었다.

 

다행히 React를 사용해 GitHub 저장소를 사용하면 쉽고 무료로 배포가 된다고 한다.

 

어차피 소스코드를 저장해 둘 곳도 필요했다.

 

 

환경설정

---

 

먼저, VSCODE(비주얼스튜디오 아님! 혼동금지), Node.js, React(라이브러리)를 설치하고 GitHub와 연결하면 된다.

 

 연결은 나도 잘 정리되어 있는 블로그를 참고했다. 

https://velog.io/@byjihye/react-github-pages

[React] 프로젝트 GitHub Pages 배포하기

 

 

GitHub 코드 수정 후 배포 방법

---

 

여기서는 처음에 push하는 것 까지 나와있지만 코드를 수정하고 나서 다시 배포된 사이트를 갱신하는 내용은 없어서 이 부분에서 조금 헤맸지만 결국 저 포스팅 안에 다 나와있었다.

 

코드 수정 후 갱신 명령어 순서는 다음과 같다. vscode 터미널에서 작성

 

git add * // * 대신 변경된 파일명을 써도 됨

변경된 파일명이 정확히 뭔지 모를 때는 터미널에 git status 라고 치면 나온다.

 

git commit -m '저장소에 갱신되면서 뜨는 문구'

 

git push -u origin 브랜치이름

여기까지 하면 github 저장소에 소스코드가 갱신된다.

 

+ 혹시 여기서 failed to push some refs to... 오류가 발생한다면 아래 명령어로 사용

git pull origin 브랜치이름
git push origin 브랜치이름

(pull도 안 먹히던 상태였으나 저 명령어로 해결됨. 출처 :  https://how-can-i.tistory.com/83)

[오류 해결] failed to push some refs to ‘저장소주소’

 

 

npm run deploy

끝. 배포 사이트에 갱신되는 명령어

 

 

닫는 글

---

이렇게 완성된 메인 페이지

https://codelistwriter.github.io/portfolio/

React App

 

 

 

모든 코드(GitHub)와 포트폴리오 주소

웹 애플리케이션 포트폴리오(Full Stack)