🔥 Firebase 호스팅으로 웹사이트 배포

🇫🇷 French version

배포를 위한 녹색 표시등

🌐 쇼케이스 사이트, 포트폴리오 또는 웹 애플리케이션에 관계없이 개발자의 마지막 단계는 모든 사람이 사용할 수 있는 인터넷 주소에서 프로덕션에 적용하는 것입니다.

🔥 오늘은 호스팅 도구를 사용하여 사이트를 빠르고 무료로 배포할 수 있는 Firebase를 제공합니다.



💸 Firebase는 pay-as-you-go 도구이므로 사용한 만큼 소비합니다. 호스팅의 경우 무료제공(신용카드 입력 불가)으로 10GB의 저장공간과 하루 360MB의 전송을 활용할 수 있다. 도메인 이름과 SSL이 포함된 링크도 제안에 포함됩니다.

그러나 도메인 이름을 사용하려면 먼저 도메인 이름이 있어야 합니다!

배포를 시작하려면 npm 및 firebase-tools CLI가 있어야 합니다.

npm install -g firebase-tools

프로젝트 구성에 따라 설치 절차가 다릅니다. 더 완벽하게 하려면 공식 문서를 따르시기 바랍니다.

💪 CLI가 설치되면 firebase login로 Firebase 계정에 연결한 다음 프로젝트 폴더에서 firebase init를 실행하여 아름다운 Firebase CLI를 감상하세요.

기존 Firebase 프로젝트를 사용하거나 CLI에서 만들 수 있습니다.

Example of firebase init command

⛔ 공용 폴더에 이미 파일이 있는 경우 CLI에서 디렉터리 재정의를 요청할 때 응답N해야 합니다.

완료되면 Firebase 프로젝트 구성인 프로젝트에 새 파일이 생성됩니다(커밋해야 함).

File tree after create project

⬆️ 마지막으로 firebase deploy

Firebase deploy command with CLI

Overview of the website just deployed

Et voilà, 귀하의 사이트가 배포되었습니다!

도메인 이름의 기록 또는 구성과 같은 정보는 Firebase 프로젝트 페이지에서 찾을 수 있습니다.

History of versions deployed on Firebase

불만 본다

🤔 제 personal website 를 배포한 후 이 글을 작성하게 되었는데, 6개월에 한 번씩 수정하는 사이트라 업데이트 명령어를 찾기가 항상 어렵습니다.

😁 확실히 저에게 오셨군요. 이제 목표는 CI/CD 프로세스에서 firebase deploy를 자동화하여 더 이상 배포에 대해 걱정할 필요가 없고 실행만 볼 수 있도록 하는 것입니다(예, 에 대한 링크가 있습니다. 섹션의 제목).
초기화 중에 CLI가 자동 빌드 구성을 제안하면 Y 로 응답해야 합니다.

약간의 옵션으로 변경할 수 있습니다firebase init hosting:github.

🤫 CLI는 Github Secrets 및 .yaml 파일을 자동으로 생성합니다.

나는 생성된 파일과 매우 유사하지만 마스터 브랜치의 각 푸시에서 트리거되고 "프로덕션"에 배포되는 yaml 파일을 제안합니다(마지막으로 개인 프로젝트 또는 POC를 위한 완벽한 구성입니다).

⚠️ 내 프로젝트가 VueJS에 있었기 때문에 빌드 단계를 추가했습니다. 필요에 따라 라인npm install && npm run build을 조정할 수 있습니다.

name: Deploy to Firebase Hosting on push
on:
  push:
    branches: [master]

jobs:
  build_and_live:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

      - name: ⬇️ Install dependencies and build
        run: npm install && npm run build

      - name: 🔥 Deploy to Firebase Hosting
        uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: "${{ secrets.GITHUB_TOKEN }}"
          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT_project }}"
          projectId: projectId
          channelId: "live"

⚠️ 마지막에 projectId를 수정하고 service_account도 수정해야 합니다. 🙂

➡️ 이제 푸시할 때마다 Github 작업이 시작되고 Firebase에서 빌드가 발생합니다.

Github Actions

History of versions deployed on Firebase

📑 자세한 내용은 Firebase 호스팅documentation이 정말 효과적입니다!

그리고 지금 ? 남은 것은 도구의 성능을 테스트하는 것뿐입니다. 아마도 다음 프로젝트에서 사용할 것입니까?