20240605 맘대로 해봐라! 3차 프로젝트 FlowNary SNS 33일차 배포

 

React App Github에 배포하기

 

1. https://username.github.io 에 배포하기

 

■ 특징

 취업 시즌에 사용(대표 포트폴리오)

 

 제약사항

• 하나의 앱만 설치 가능

• 파일의 개수가 총 100개 이하만 설치 가능

- 프로그램 파일들은 압축되고, 몇 개의 파일로 모아짐

- 데이터, 이미지 파일 등 public 디렉토리에 있는 파일은 그대로 사용

 

 사용법

$ npm run build (맥일 때 앞에 $ 필수)

- Github에 username.github.io 레파지토리 생성 (Readme 포함)

- build 디렉토리에 있는 파일들을 drag-and-drop으로 github로 이동

- commit button을 클릭하고 몇분 기다린 후 username.github.io 으로 접속

 

 

2. gh-pages 이용

■ 특징

 URL: https://username.github.io/repository-이름

 gh-pages 를 이용해서 build와 branch 동시 생성 가능

 main/gh-pages 두개의 branch로 관리되어서 유지 보수에 용이

 

■ 사용법 1. gh-pages 설치

$ npm install gh-pages

2. package.json 설정

"homepage": "https://username.github.io/repository-이름",

"scripts": { "start": "react-scripts start",

...

"predeploy": "npm run build",

"deploy": "gh-pages -d build"

},

 

■ 사용법

3. 배포 실행

$ npm run deploy

 

4. Github 설정 확인

• Repository의 Settings > Pages 확인

• 브랜치를 gh-pages로 변경

• 사이트 적용에 몇분 소요됨

 

■ 사용법

5. 프로그램 변경

• public directory에 있는 resource를 접근하는 주소 변경

<img src='/img/logo.png' alt='로고' />

=>

<img src=`${process.env.PUBLIC_URL}/img/logo.png` alt= '로고' />

env. 뒤에 ==> 레파지토리-이름 예) /yj_world ...

 

• BrowserRouter 에 basename 속성 추가  

<BrowserRouter basename='yj_world'>

...

<BrowserRouter>

6. 개발/배포 모드

• process.env.NODE_ENV

• 개발 모드(development), 배포 모드(production)

 

■ 문제점

 API의 callback-url을 사용하는 경우 아직 해결하지 못했음

• Social login

 

 

 

 

==================== ==================== ==================== 

수업 시 필기(이하)

 

배포
https://raisedeveloper.github.io/flowNary

대표 웹사이트 만들기 - 권장하지 않음
localhost - 개발모드
배포모드 - 깃허브
환경변수로 교체하여 작업 가능

* 제약사항 *
하나의 앱만 설치가능 => 여러 앱을 섞어서 하나에 표현 불가

파일 개수가 총 100개 이하만 설치 가능 => 프로그램 파일들은 압축 됨 몇개의 파일로 모아짐 
=> 100개란? 

build directory == index.html > static javascript code 파일이 있고 css 파일이 있음 > react 없어지고 html javascript code 가 됨
블랭크로 낭비하는 데이터가 없게끔 배포가 됨

데이터 이미지 파일 등 퍼블릭 디렉토리에 있는 파일은 그대로 사용 => 아바타는 깨져서 => 아이콘으로 대체 됨

리액트는 클라이언트 코드 - 서버 코드가 아님 ==> 리액트 프로그램은 HTML 하고 JS 코드로 자동 변환이 됨
깃 허브 입장에서는 리액트 프로그램은 배포모드가 되는 순간에 정적 파일파일이 됨 (정적 웹사이트-스태틱[static])
깃허브에서 무엇을 할 필요가 없음
시작위치가 index.html이 됨

index.html => 주소 시작
--------------------------------------------------------------------
1. 명령프롬프트 켜기

npm run build (맥은 앞에 $ 붙이기)

npx create-react-app test (안될 때_ 앞으로는 지원중단) -> 미래엔 vite (비테) 를 사용해야함
cd test
npm run build // 뱅글뱅글 돌아가는 리액트 초기화면 만들어짐
------------------------------------------

Find out more about deployment here:

  https://cra.link/deployment >> 이 것이 나오면 성공
------------------------------------------

https://github.com/raisedeveloper/flowNary

깃허브 raisedeveloper.github.io 새로운 레파지토리 생성 ( Read me 포함)
build 디렉토리에 있는 파일들을 drag- and- drop
commit

주소창에  raisedeveloper.github.io 검색




2. 프로그램 이용 방법

gh-pages 이용
url:https:// repository - 이름
buuild branch 동시 생성 가능
main/gh-pages 두 개의 branch로 관리되어서 유지 보수에 용이

main branch : 일반 작업 시 
gh-pages branch : 배포

$ npm install gh-pages

gh-pages 사용법
프로그램 변경
public directory 에 있는 resource 를 접근하는 주소 변경
env.local 에 react_APP 으로 시작하지 않으면 읽지 못함
package.json 에 있는 public url을 보고 읽음 리액트가 제공해주는 환경변수임 >> public url

개발모드 npm start 
NODE_ENV development

배포모드 npm run deploy

문제점 : static file 외부에서 callback 으로 치고 들어오지 못함

소셜로그인 oAuth 시 나의 콜백주소 3000으로 세팅되어 있으면 안됨
tosspayment 이용 시 외부에서 보낸 collback url 받지 못하는 부분을 해결하고자 함
챗GPT 도 모름

서버 프로그램을 스프링 부트로 사용 중인데 만약 aws 를 과금하기 싫다면 파이어베이스에 리얼타임데이터 말고
릴레이션 또는 수파베이스에서 포츠그래를 DBMS 사용 권장 (데이터 베이스 제공 용도로만 사용하고 싶다면 바꿔라)

url 주소가 서버측 주소가 들어가도록 바꿔야 함

 

 

카카오 API 날씨 API 와 같은 요소는 잘 작동하지 않을 수 있음 (배포 시 정적 웹사이트로 구현되기 때문에)