Firebase에서 반응 앱을 호스팅하는 방법.

구성이 제대로 설정되면 Firebase에서 호스팅하는 것은 매우 쉽습니다. 그러나 많은 가이드가 몇 가지 사항을 생략하는 것 같습니다. Firebase로 반응 앱을 설정하는 방법은 다음과 같습니다. 시작하기 전에 Firebase 계정을 설정하면 도움이 됩니다.

설치 / 설정 (이미 반응 앱이 있다고 가정합니다.)

npm install -g firebase-tools

설치 후 로그인이 필요합니다.

firebase login

초기화(프로젝트 디렉토리에서)

firebase init

아래에서 호스팅을 선택해야 합니다.

? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices.
 ◯ Database: Deploy Firebase Realtime Database Rules
 ◯ Firestore: Deploy rules and create indexes for Firestore
 ◯ Functions: Configure and deploy Cloud Functions
❯◯ Hosting: Configure and deploy Firebase Hosting sites
 ◯ Storage: Deploy Cloud Storage security rules

프로젝트 이름을 지정하십시오. Firebase 대시보드에 표시되는 이름입니다.

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

? Select a default Firebase project for this directory:
-> give-your-firebase-project-a-name
i  Using project give-your-firebase-project-a-name

아래 표시된 대로 이 질문에 올바르게 답했는지 확인하십시오. 반응 프로젝트 폴더에 build 디렉토리가 없으면 프로젝트를 빌드해야 한다는 것을 아는 것이 중요합니다. 해당 빌드 폴더를 얻으려면 프로젝트 디렉토리에서 터미널을 열고 npm run-script build를 입력하십시오. 그러면 빌드 폴더가 생성되어야 합니다. 그렇지 않은 경우 "빌드"스크립트에 대해 package.json을 확인하십시오. 거기에 없으면 항상 입력할 수 있습니다npm react-scripts build.

? What do you want to use as your public directory? build
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? File public/index.html already exists. Overwrite? No

구성

거의 다 되었습니다. 이제 많은 자습서가 firebase deploy 명령으로 바로 이동합니다. 그러나 이것은 나를 위해 작동하지 않았습니다. 그것이 당신을 위해 일했다면 정말로 읽을 필요가 없습니다. 문제가 있는 경우 해결 방법은 다음과 같습니다.
firebase.json 파일로 이동하여 다음과 유사한지 확인하십시오.

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

위와 같이 설정했으면 프로젝트 디렉토리에서 다음을 실행해 보십시오.

firebase deploy

이제 앱을 사용할 수 있습니다. 콘솔에서 앱을 확인할 수 있는 링크가 표시됩니다.