[REACT] Firebase에 배포하기

[REACT] ContextAPI

---

배포의 단계

개발(develop) - 테스트(test) - 빌드(build) - 배포(deploy)

웹앱을 무료로 배포하는 방법은 아래와 같이 다양하다.

1. 깃허브 페이지
2. 구글 firebase
3. AWS S3
4. 카페 24
5. 기타 등등

---

리액트 빌드하기

1. 프로젝트 최상위 루트에서 실행한다.

npm run build

2. 위와 같이 실행하면 build 폴더가 생성

3. build 폴더 내부에는 개단 단계에서 복잡한 코드를 경량화하여 index.html을 생성한다.

4. 바로 실행시에는 서버가 아니라, 정상적으로 실행이 안된다. 아래 명령어를 사용해 1회성 서버를 실행한다.

npm serve -s build

5. http://localhost:3000으로 접속하면 빌드된 결과물이 나온다.

---

Firebase 배포하기

파이어베이스는 2011년 파이어베이스사가 개발하고 2014년 구글에 인수된 모바일 및 웹 애플리케이션 개발 플랫폼이다.

파이어베이스 - 위키백과, 우리 모두의 백과사전

1. firebase에 가입하고 콘솔로 이동

2. 프로젝트 생성

3. hosting 으로 접속

4. 시작히기를 클릭하여 단계별로 실행

5. 컴퓨터에는 node.js가 설치되어야 한다.

• vs코드에서 아래 명령문을 실행한다.
• 프로젝트에 최상위 경로에서 진행한다.

파이어베이스 설치

npm install -g firebase-tools

파이어베이스 로그인

npx firebase login

파이어베이스 설정 시작

npx firebase init

---

6. 위와 같이 모두 입력했다면 아래와 같이 firebase를 시작 여부를 묻는다.
▷ 이때 " y " 를 입력하여 계속 진행한다.

---

7. 파이어베이스에서 시작할 기능을 스페이스로 선택하기

7-1 hosting 을 선택 ( space 선택 + 엔터 )

7-2 기본 경로를 어디로 사용할건지 묻는다 ( build )

• 리액트는 빌드시 폴더가 build로 생성되기 때문에 public 폴더를 build로 잡아준다.

What do you want to use as your public directory? build

7-3 싱글 페이지 앱으로 구성한 건지에 대한 질문 ( yes 입력 )

Configure as a single-page app ( rewrite all urls to / index.html ) ? Yes

7-4 깃허브에서 자동으로 배포하게 만들지에 대해 묻는다. ( no 입력 )

Set up automatic builds and deploys with GitHub? No

7-5 index 파일이 있는데 덮어쓸까요? ( no 입력 )

File build/index.html already exists. OverWrite? No

---

8. 파이어 베이스에 배포

npx firebase deploy

9. 1차 배포 후 다음 작업은??

npm run build ( 리액트 빌드 )
npx firebase deploy

이 두 작업만 하면 된다. 

8번까지 일련의 작업이 완료되었다면, 호스팅URL을 따라 접속하여 확인하면 된다.