React + Spring Boot 배포하기(1) - Github에 올리기

대충 만들은 야구장별 날씨정보 어플.

이제 어디 올려두고 친구들한테 써보게 하려 함.

 

내겐 두가지의 선택지가 있었는데(챗지선생님의 추천 방법 두 가지),

 

1. Spring Boot 서버에 정적 리액트 파일을 같이 넣는 방법 (한 번에 배포)

• React에서 npm run build 후 나온 build 폴더를 Spring Boot 프로젝트 안에 넣고
• Spring이 정적 파일로 서빙하게 함
• 👉 이 경우 하나의 서버에서 API + UI 둘 다 제공

2. 프론트/백엔드를 분리하고 프록시로 연결 (사용한 방법)

• React는 Vercel (프론트)
• Spring은 Render (백엔드)
• React에서 API 호출 주소만 proxy 설정 또는 .env에서 지정

1번 방법은 쉽지만 재배포가 귀찮고 실제로 막 사용할법한 방법은 아니라 2번 방법으로 가기로.

---

대충 배포 순서는 이러한 듯.

1. Github를 하나 만든다.

2. backend 와 frontend로 나누어 저장소에 올린다.

3. 각각 깃허브를 연동해 배포를 진행한다.

 

 

일단 Github에서 ballpark-weather라는 저장소를 하나 만들었다.

신규 깃허브 저장소 생성

 

기존 내 폴더 구조

git bash열고 프로젝트가 있는 위치로 이동.

git init, git remote add 시킨다.

 

깃 애드, 커밋, 푸시 처리

git add .
git commit -m "frontend + backend 분리 커밋"

git branch -M main
git push -u origin main

 

.... 에서 모든게 잘되었으면 좋았겠지만, 내가 회사 git계정이랑 개인 git계정이 달라서 권한문제로 조금 고생함...^^.... ㅋㅋㅋㅋ 무엇하나 쉽게가질못하네 ^^....

 

결국 챗지선생 도움받아 https 대신 ssh 방식으로 원격 URL 교체해서 진행하기로 ㅎㅎ...!

암튼 이래저래 생성된 ssh key 등록 내 personal계정에 해서 해결했고 자세한 내용은 패스 ㅠ...

이래저래 암튼 다시 push까지의 여정을 거치다....

는 또 저장소의 readme와 충돌나서 문제가있었지만 대충 해결.

 

애초에.... 내 .... 펄스널계정으로 했으면 어땠을ㄲㅏ........라는 작은생각.... 이 들었지만 이미 벌어진거 ㅎㅎ....

암튼 이제 진짜 배포단계로 간다.....

---

는 개뿔 frontend폴더가 뭐가문제인지 들어가지지를 않는다.... backend는 잘만 들어가진다 ㅎㅎㅎ

진짜 별짓을 다했다...해결을하면 글을 수정해야겠다 

→ 월요일 출근 후 해결

 

1트

주말에 집에서 문득 생각나 깃레파지토리 삭제를 하고 월요일 출근해서 다시 깃 초기화부터해서 연결했는데 또 frontend가 빈폴더로 인식되는 것임. 그래서 문득 생각난 깃이그노어 파일. 내가 따로 설정하게 없어서 의심 안했는데 혹시 싶어서 들어감.

HELP.md
.gradle
build/
!gradle/wrapper/gradle-wrapper.jar
!**/src/main/**/build/
!**/src/test/**/build/

### STS ###
.apt_generated
.classpath
.factorypath
.project
.settings
.springBeans
.sts4-cache
bin/
!**/src/main/**/bin/
!**/src/test/**/bin/

### IntelliJ IDEA ###
.idea
*.iws
*.iml
*.ipr
out/
!**/src/main/**/out/
!**/src/test/**/out/

### NetBeans ###
/nbproject/private/
/nbbuild/
/dist/
/nbdist/
/.nb-gradle/

### VS Code ###
.vscode/

 

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 

아.... 멍청한.... 프론트엔드는 vscode로 작업하고, 백엔드는 인텔리제이에서 작업했는데 ignore에 vscode관련 내용이 들어가있었따...... ㅎㅎ............... 그런데 저 폴더아래있는건아니긴한데 ㅠ ㅎㅎ..... 뭐지 진짜 ㅠ 

 

 

2트

vscode 내부 터미널 사용해보기로. 근데 frontend폴더가 서브모듈로 잡힘 ㅋㅋㅋ... 아무리생각해도 깃 따로 올린적이없는데 왜이러는겨 암튼 이걸 해결해야만 끝날듯싶어 진행.

수많은 패배..아니 실패가 있었으나 성공적으로 삭제하고 다시 커밋하는데 성공 ㅠ

갸아아아아ㅏ가

해내따