CoxeMonkey

React app을 만들고 다른 사람들에게 보여줄려면 배포 라는것을 해야합니다

보통 Cafe24, 가비아, AWS, GCP 등 호스팅을 사용하는데 너무 복잡하기도 하고 단순히 프론트 쪽 배포만 하기 때문에 github 또는 firebase를 사용하게 됩니다.

github는 다음에 알아보기로 하고 firebase를 사용하여 배포해보도록 하겠습니다.

1. firebase 페이지에 들어가서 시작하기 버튼을 눌러줍니다.

2. 프로젝트 만들기 버튼 눌러줍니다.

3. 체크박스 두개를 클릭하고 계속 버튼을 누릅니다.

4. 애널리틱스는 사용하지 않을거라서 사용안함으로 하고 프로젝트 만들기 버튼을 눌러줍니다. (사용하시는 분은 그대로 사용해주세용)

5. Loading...

6. 대쉬보드 화면이 나오는데 왼쪽 사이드바에서 빌드를 눌러줍니다.

7. Hosting 을 눌러줍니다.

시작하기 버튼을 눌러줍니다.

이제 호스팅 설정에 대한 창이 뜨는데

npm install -g firebase-tools

cmd (커맨드 창) 을 관리자 권한으로 킨 다음에 npm install을 해줍니다.

firebase login

설치가 다 되었다면 프로젝트의 root 디렉토리(폴더) 경로에서 해당 커맨드를 실행합니다.

Allow Firebase to collect CLI usage and error reporting information? 이라는 문구가 나오는데 에러가 나오면 제공을 해주냐는 질문입니다. Yes 라고 해줍니다.

그럼 새 창이 뜨면서 구글 로그인을 할수있는데 로그인을 하고 나면 Success! Logged in as ??@gmail.com 이라고 뜨게 됩니다.

그리고 firebase init 명령어를 실행합니다.

Yes 친다음 선택할수있는 항목이 나오는데 화살표로 움직여서 Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys 로 움직인 다음 스페이스바 누르고 엔터를 누릅니다.

그 다음 build 라고 친다음 yes 라고 치고 github로도 배포를 하냐고 물어보는데 한다면 yes 아니면 no 라고 합니다..

그 다음 yes를 눌러주면 프로젝트 폴더에 firebase.json, .firebaserc 파일이 생겼을 겁니다.

이제 아까 firebase 대쉬보드로 가서 다음 버튼 다 누르고 마지막 콘솔로 이동을 눌러줍니다.

이렇게 뜰건데 밑으로 내려줍니다.

다른 사이트 추가 를 눌러줍니다.

사이트 추가 밑에 본인이 사용할 사이트 이름을 적어줍니다.

이렇게 뜬다면 성공한것입니다.

{
  "hosting": {
    "site": "react-app-gang",
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

이제 firebase.json 파일에 가서 site 부분을 본인 호스팅 할려던 웹사이트 이름을 넣어줍니다.

이제 cmd 창에 가서 npm run build를 실행해줍니다.

그 다음 firebase deploy 를 실행해줍니다.

이렇게 뜬다면 성공했습니다.

여기까지 따라와주신 여러분 고생하셧습니다.