이전에는 포트폴리오에 대한 블로그를 작성했습니다. 아직 확인하지 않았다면 여기에서 확인하세요.

더 이상 사용할 수 없는 기사

게시물의 끝에서 나는 Firebase에 내 React 애플리케이션을 배포했다고 언급했습니다.

이 작업을 수행하는 방법도 알고 싶습니까?

오늘, 나는 당신에게 같은 것을 보여줄 것입니다.

시작하기

이 튜토리얼에서는 Firebase 호스팅을 사용하여 React 앱을 배포하는 방법을 시연합니다. Firebase 프로젝트가 이미 설정되어 있다고 가정하겠습니다. 그렇지 않은 경우 Firebase 콘솔을 사용하여 만들 수 있습니다.
또한 React 앱이 생성되었는지 확인해야 합니다. 이를 위해 Create React App을 사용하겠습니다. 다음을 실행하여 새 React 앱을 만들 수 있습니다.
npx create-react-app firebase-hosting-demo

1. Firebase CLI 도구 설치

앱을 인터넷에 배포하려면 Firebase CLI 도구가 필요합니다.

다음 명령을 사용하여 이 작업을 수행할 수 있습니다.
npm install firebase-tools -g
(-g 플래그를 추가하는 것을 잊지 마세요. 그렇지 않으면 전역적으로 활성화되지 않고 범위를 이 프로젝트로만 설정합니다.)

2. Firebase에 로그인

다음을 사용하여 Firebase 콘솔에 로그인합니다.
firebase login
그런 다음 Google 계정으로 진행하여 Firebase 콘솔에 로그인합니다.

3. Firebase 초기화

다음 단계는 다음을 사용하여 프로젝트에서 Firebase를 초기화하는 것입니다.
firebase init
그런 다음 일련의 질문과 함께 안내할 구성 옵션이 표시됩니다.

호스팅 선택: Firebase 호스팅 사이트 구성 및 배포.

그런 다음 Firebase Console에서 프로젝트를 생성합니다.

그런 다음 CLI로 돌아갑니다.

기존 프로젝트 사용을 선택합니다.

그런 다음 생성한 Firebase 프로젝트를 선택합니다.

이제 Firebase가 배포할 자산을 찾을 폴더를 지정해야 합니다. 기본적으로 Create React App은 프로덕션 자산을 포함할 빌드 폴더를 생성합니다. 기본 구성을 변경하지 않은 경우 이 옵션에 대해 빌드를 입력해야 합니다.

또한 Firebase를 단일 페이지 앱으로 구성해야 하는지 여부를 묻는 메시지가 표시됩니다. 이 옵션에 대해 y(예)를 입력하고 싶을 것입니다.

마지막 옵션은 Firebase가 기존 build/index.html을 덮어써야 하는지 여부입니다. 아직 앱용 빌드를 생성하지 않은 경우 이 옵션이 표시되지 않습니다. 하지만 이 옵션에는 N(아니요)을 입력해야 합니다.

자동 생성된 구성 파일

초기화를 완료하면 2개의 새 파일.firebaserc , firebase.json이 표시되어야 합니다. 이러한 파일은 자동으로 생성되며 Firebase 호스팅 구성에 있는 파일을 저장하고 git 저장소에 커밋할 수 있습니다. 지금은 .firebase 디렉토리를 무시해도 됩니다.
.firebaserc는 다음과 유사해야 합니다.

{
  "projects": {
    "default": "firebase-hosting-demo"
  }
}

firebase.json는 다음과 유사해야 합니다.

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

4. 앱 배포

이제 모든 것이 설정되었으므로 계속 진행하여 앱을 배포할 수 있습니다! 지금 해야 할 일은 다음을 실행하는 것뿐입니다.
firebase deploy
그러면 Firebase에서 배포된 앱이 있는 고유한 URL을 제공합니다. 예를 들어 다음과 유사할 수 있습니다.
https://yourprojectid.firebaseapp.com
또는
https://yourprojectid.web.app
그리고 그게 다야!

제 블로그를 읽어주셔서 감사하고 기억해주세요...

계속 코딩하세요 👨🏻‍💻