230125 React 배포
배포
개발(develop)-빌드(build)-배포(deploy)
개발-만드는 단계
빌드-어플리케이션 가동의 필요한 것들을 통합하고, 경량화시키는 단계(배포를 위한 준비과정)
배포-서버에 반영을 하는 것
빌드와 배포 중간에 테스트가 들어갈 수 있음.
웹앱을 무료로 배포하는 다양한 방법이 존재
1. 깃허브페이지
2. 구글 firebase
3. 기타등등
firebase에 react배포하기
리액트 빌드하기
1.프로젝트 최상위 루트에서 실행
npm run build
2. 실행하면 build폴더 생성
잘못된거같으면 build폴더를 지우고 다시 생성해도 된다. build폴더를 지워도 실제 프로젝트에 영향을 주는 것은 아니다.
3. build폴더 안에는 개발 단계에서 복잡한 코드를 경량화해서 index.html을 생성해줌
4. 바로 실행하게 되면 서버가 아니라 정상적으로 실행되지 않는다. 명령어로 1회용 서버로 실행시켜 확인할 수 있다.
npm install -g serve
serve -s build
or
npx serve -s build
설치하겠냐는 구문이 나오면 y하면 자동으로 설치해준다.
재설치한다고 문제되는건 없다.
성공하면 Serving!과 함께 Local주소와 Network주소가 나온다. 둘 다 사용 가능
5.http://localhost:3000으로 들어가보면 빌드된 결과물이 나온다.
NetWork로 들어갈 때, NewsAPI를 사용하였기 때문에, 돈을 내지 않으면 원래 그 상태가 나오지 않는다.
4~5번은 한번 켜보는 작업임. 생략해도 된다.
ctrl + c로 끌 수 있음.
파이어베이스 배포하기
1. firebase에 가입하고 콘솔로 이동
2. 프로젝트 생성-이름은 실제 프로젝트명으로
3. hosting으로
4. 시작하기를 클릭해서 단계별로 실행
5. 컴퓨터에는 node.js가 설치되어야 한다. 그래야 npm 명령문 사용 가능.
VS코드에서 아래 명령문을 실행-프로젝트 최상위 경로에서 진행할 것
파이어베이스 설치 : npm install -g firebase-tools
설치하고 vs코드 재실행
파이어베이스 로그인 : npx firebase login
처음 하면 구글에서 로그인할것인지 뜬다. 로그인 진행
"Woohoo! Firebase CLI Login Successful"
파이어베이스 설정시작 : npx firebase init
실행하는 곳은 Course\react\react-router
시작하면 여러 옵션이 콘솔창에 나오는데, 화살표로 이동, space로 선택, a로 토글, i로 invert, enter로 proceed
깃허브에 올라가있는걸 바로 올려주는 set up github action deploy,
직접 배포하는 firebase hosting이 있는데, 지금은 이걸로.
이후 고를 옵션은
처음 사용하니까 Use an existing project
하면 위에서 생성한 프로젝트가 나옴. 선택
하면,
기본경로를 어디로 할 것인가?
디폴트는 public임.
리액트는 반드시 폴더가 build로 생성되기 때문에 public폴더를 build폴더로 잡을 것!
경로지정을 build로 하고 엔터
Configure as a SPA?
싱글페이지앱으로 구성할건가요? yes
자동으로 깃허브에 배포하게 만들건가요? no
index파일이 있는데 덮어쓸건가요? no
-override하면 build를 다시 해야한다.
-덮어버리면 기본제공되는 화면이 나온다.
6. 파이어베이스에 배포
npx firebase deploy
7. hosting url에서 확인하면 됨.
8. 이후에 배포는?
npm run build(리액트 빌드)
npx firebase deploy(파이어베이스에 배포)만 하면 된다.
react는 배포가 간단한 편임.
-운영체제
-데이터베이스
-특정url주소로 접속하게 만들기-포트열기
-배포된파일을 운영체제에 옮겨줘야함
등등 여러 과정이 필요하다.
이외에도 여러 기능이 있고(Next.js를 통해 CSR(SPA처럼)를 SSR로 바꾼다던가), 새로 만들어진다. 공부할 것!