내 워크플로우

사이드 프로젝트의 배포를 자동화하는 것은 미래의 자신을 위해 할 수 있는 최고의 일 중 하나입니다. 연속 배포 또는 CD라고도 합니다. 이 블로그에서는 무료 호스팅을 위해 Firebase를 사용하고 지속적인 배포를 위해 Github 작업을 사용합니다.

여기 계시다면 호스팅, 실시간 데이터베이스, 클라우드 스토리지 등과 같은 서비스를 제공하는 Google의 개발 플랫폼인 firebase에 대해 알고 계실 것입니다.

이전에 firebase를 사용하여 반응 앱을 배포한 적이 없다면 수많은 자습서가 있지만 여기에 있습니다.

리포지토리로 푸시될 때 Firebase에 내 사이드 ​​프로젝트를 빌드하고 배포하는 GitHub 작업을 작성했습니다.

자신의 행동을 작성할 때 FIREBASE_TOKEN가 준비되어 있는지 확인하십시오. 저장소 내부의 터미널에서 다음을 수행하여 직접 생성할 수도 있습니다.

firebase login:ci

이 토큰을 GitHub 저장소의 비밀에 FIREBASE_TOKEN로 추가합니다.

제출 카테고리:

DIY 배포

Yaml 파일 또는 코드 링크

name: Firebase Deploy
on:
  push:
    branches:
      - master

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@master
      - name: Install Dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Archive Production Artifact
        uses: actions/upload-artifact@master
        with:
          name: build
          path: build
  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@master
      - name: Download Artifact
        uses: actions/download-artifact@master
        with:
          name: build
          path: build
      - name: Deploy to Firebase
        uses: w9jds/firebase-action@master
        with:
          args: deploy --only hosting
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

다음은 main.yml 파일에 대한 링크입니다. main.yml

여기 레포가 있습니다

탄베시01 / CoronaTracker 앱

코로나 추적기 앱은 인도와 전 세계에서 COVID 양성, 회복 및 사망 수를 추적합니다.

이 프로젝트는 Create React App으로 부트스트랩되었습니다.

사용 가능한 스크립트

프로젝트 디렉토리에서 다음을 실행할 수 있습니다.

npm 시작

개발 모드에서 앱을 실행합니다.
브라우저에서 보려면 http://localhost:3000을 여십시오.
수정하면 페이지가 다시 로드됩니다.
또한 콘솔에 린트 오류가 표시됩니다.

npm 테스트

대화형 감시 모드에서 테스트 러너를 시작합니다.
자세한 내용은 running tests 섹션을 참조하십시오.

npm 실행 빌드

프로덕션용 앱을 build 폴더에 빌드합니다.
프로덕션 모드에서 React를 올바르게 번들로 묶고 최상의 성능을 위해 빌드를 최적화합니다.
빌드가 축소되고 파일 이름에 해시가 포함됩니다.
앱을 배포할 준비가 되었습니다!
자세한 내용은 deployment 섹션을 참조하십시오.

npm 실행 꺼내기

참고: 이것은 단방향 작업입니다. 한 번 eject , 돌아갈 수 없습니다!
빌드 도구가 만족스럽지 않다면…

View on GitHub

추가 리소스/정보

Angular 사람들을 위한 비슷한 튜토리얼:
Link