firebase 호스팅에 여러 사이트를 배포하는 방법은 무엇입니까?

잠깐만요.. 그게 가능하단 말이에요... firebase에 있는 하나의 프로젝트는 그 특정 프로젝트에 대한 하나의 호스팅만 의미합니다. 맞아요..!
동료 독자 여러분, Firebase에는 단일 Firebase 호스팅에 여러 사이트를 배포하는 기능이 있습니다. 단일 프로젝트에 여러 웹사이트가 필요한 이유가 궁금할 수 있습니다. 예 저도 그렇게 생각했습니다. 따라서 분명히 사용자가 2개의 별도 앱, 즉 고객용 앱과 관리 직원용 앱이 필요할 수 있는 상황이 있을 수 있습니다. 둘 다 동일한 데이터베이스와 기능을 공유합니다.

이 블로그에서는 각 도메인에 사이트를 올바르게 배포하기 위해 엄격하게 따라야 하는 단계를 살펴보겠습니다.

참고: Firebase 프로젝트에 앱 중 하나를 이미 배포했다고 가정합니다. 그렇지 않으면 여러 사이트를 배포할 수 없습니다.

좋아요, 당신이 여전히 나와 함께 있기를 바랍니다. 시작하겠습니다.

1 사이트 이름 정의

소비자 앱이 완료되고 firebase에 배포된 전자상거래 공급업체가 있다고 가정합니다. 이제 사용자가 전자상거래 웹사이트에 제품을 추가하는 데 도움이 되는 공급업체의 관리 사이트에서 작업하고 있습니다.

Firebase 호스팅 콘솔에서 고급 섹션 아래로 스크롤하면 다른 사이트 추가 옵션이 있습니다. 이 옵션을 클릭하면 아래 화면이 표시됩니다.

사이트 이름을 추가합니다(예: admin-multi-site-magic ). 그러면 사이트가 다음과 같이 추가되는 것을 볼 수 있습니다.

잠깐, 아직 끝나지 않았습니다. 방금 사이트를 추가했으며 새 사이트에 아무 것도 배포하지 않았습니다. 어떻게 완료되었는지 확인하겠습니다.

2 최신 Firebase 도구 설치 및 호스팅 초기화

멀티사이트 호스팅을 위해서는 Firebase 도구 v4.2 이상이 필요합니다.

npm i -g firebase-tools@latest
firebase -v

firebase init hosting

여기에서 한 가지 유의할 점은 firebase에는 많은 기능이 있으므로 초기화 후 호스팅을 추가할 때 호스팅만 초기화하면 된다는 것을 이해하므로 마지막 명령에 호스팅이라는 단어를 추가해야 합니다.

호스트할 프로젝트를 선택하라는 몇 가지 질문이 표시됩니다. 올바른 프로젝트를 선택했는지 확인하십시오.

3 firebase.json 업데이트

위 단계를 완료하면 firebase가 프로젝트 디렉토리에 2개의 파일을 추가하는 것을 볼 수 있습니다. 즉, .firebaserc firebase.json
이제 firebase.json라는 필드를 추가하여 이 항목target을 업데이트하기만 하면 됩니다. Firebase는 코드를 배포해야 하는 사이트를 대상으로 지정하기 위해 이 대상을 사용합니다.

React를 사용하는 경우 배포 가능한 코드는 build 폴더가 됩니다.
Angular를 사용하는 경우 배포 가능한 코드는 dist 폴더가 됩니다.
대상의 이름은 무엇이든 될 수 있지만 배포하려는 사이트와 관련된 이름을 유지하는 것이 좋습니다. 아래와 같이 public 필드 바로 위에 대상 파일을 추가합니다.

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

4 방금 만든 새 대상에 대해 firebase에 알립니다.

Firebase가 어디에 배포할 코드를 알 수 있도록 사이트를 로컬 대상과 연결해야 합니다. 각 사이트에 대해 다음 명령을 실행합니다.firebase target:apply hosting <target-name> <resource-name>

firebase target:apply hosting admin admin-multi-site-magic

여기서 target-name은 선택한 고유한 이름이고 resource-name은 1단계의 사이트입니다.

5 FIrebase에 배포

모든 주요 단계를 완료했으므로 이제 대상 사이트의 firebase에 배포할 수 있습니다.

firebase deploy --only hosting

그게 다야, 반응과 댓글을 남겨 주시면 마음에 드셨기를 바랍니다. 또한 소셜 미디어 플랫폼에서 메일을 보내거나 핑할 수 있는 협업에 열려 있습니다.