GitHub Actions에서 React + Firebase 프로젝트를 CI/CD로 자동 배포한 이야기

얼마 전의 웹 서비스를 만들 때 2020년에 릴리스된 GitHubActions 에서 CI/CD(계속적 통합/계속적 딜리버리)를 해 보았으므로, 가볍게 흐름을 투고합니다.

CI/CD 하게 된 경위


  • 프로젝트를 수정 한 후 매번 빌드 또는 배포를 실행하는 것이 번거롭기 때문에 자동화하고 싶습니다.
  • 트렌드 CI/CD를 사용한 적이 없기 때문에 공부하고 싶습니다

  • GitHub Actions 설정 흐름



    CI/CD 서버가 Firebase에 액세스하기 위한 토큰 검색 및 환경 변수로 설정


  • firebase login:ci 명령을 실행합니다.
    컨테이너나 WSL 로 명령을 실행하는 경우는 --no-localhost 옵션을 붙여 둔다.
  • 브라우저가 시작되므로 google 계정 인증합니다.
  • 토큰이 표시되므로 명령 행에 토큰을 입력하십시오.
  • 명령줄에 CI/CD 서버에 등록할 토큰이 표시됩니다.
  • GitHub Settings 탭 → Secrets 에서 Name=FIREBASE_TOKEN_PROD,value=コマンドラインに表示されたトークン 를 추가합니다.

  • CI/CD 설정 파일 작성


  • GitHub의 Actions 탭 → 파일 이름을 deploy.yml로 변경 → Start Commitボタン를 누릅니다.
  • 작업 트리 (GIt 작업 디렉토리)에서 Git pull하고 작업 환경에 deploy.yml을 가져옵니다.
  • 작업 트리에서 "./.github/workflows/deploy.yml"을 열어 구성 파일을 수정합니다.

  • deploy.yml
    # This is a basic workflow to help you get started with Actions
    # これは、アクションを開始するのに役立つ基本的なワークフローです。
    
    name: React Firebase CICD
    
    # Controls when the action will run.
    # アクションが実行されるタイミングを制御します。
    on:
      # Triggers the workflow on push or pull request events but only for the master branch
      # プッシュまたはプル リクエスト イベントでワークフローをトリガーしますが、マスター ブランチのみを対象とします
      push:
        branches: [master]
      pull_request:
        branches: [master]
    
      # Allows you to run this workflow manually from the Actions tab
      # [アクション] タブからこのワークフローを手動で実行できます
      workflow_dispatch:
    
    # A workflow run is made up of one or more jobs that can run sequentially or in parallel
    # ワークフローの実行は、順次または並行して実行できる 1 つ以上のジョブで構成されます。
    jobs:
      # This workflow contains a single job called "build"
      # このワークフローには、「ビルド」と呼ばれる単一のジョブが含まれています
      build:
        # The type of runner that the job will run on
        # ジョブが実行されるランナーのタイプ
        runs-on: ubuntu-latest
    
        # Steps represent a sequence of tasks that will be executed as part of the job
        # ステップは、ジョブの一部として実行される一連のタスクを表します
        steps:
          # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
          # $GITHUB_WORKSPACE の下にあるリポジトリをチェックアウトして、ジョブがアクセスできるようにします
          - name: Checkout
            uses: actions/checkout@v2
    
          # Runs a single command using the runners shell
          # runners シェルを使用して単一のコマンドを実行します
          - name: Run a one-line script
            run: echo Start Deploy!
    
          # Nodeのインストール
          - name: Install Node
            uses: actions/setup-node@v1
            with:
              node-version: 14.16.1
    
          # runners 依存関係のインストール
          - name: Install Dependencies
            run: |
              npm install
            working-directory: ./
    
          # ビルド実行
          - name: Build
            run: |
              npm run build
            working-directory: ./
    
          # テスト実行(テストコードが無い場合はエラーが発生するので、コメントアウトすること。)
           - name: Test
             run: |
               npm test
             working-directory: /
    
          # デプロイ準備
          - name: Install Firebase Tools
            run: |
              npm install -g firebase-tools
            working-directory: ./
    
          # デプロイ実行
          # FIREBASE_TOKEN_PRODはGitの環境変数から呼び出される
          - name: Deploy
            env:
              FIREBASE_TOKEN_PROD: ${{ secrets.FIREBASE_TOKEN_PROD }}
            run: |
              firebase deploy --only hosting --token $FIREBASE_TOKEN_PROD
            working-directory: ./
    
    

    CI/CD 실행


  • 작업 트리에서 git push합니다.
  • GitHub의 Actions 탭을 열면 설정한 스크립트가 실행되고 있는 것이 보이므로 커밋명을 클릭한다.
  • 모든 태스크가 성공하면, 이런 표시가 된다.


  • 감상 등


  • CI/CD는 이름만 들으면 어려울 것 같지만 실제로 해보면 최소한의 기능을 움직일 뿐이라면 그렇게 어렵지 않을 것 같았다.
  • 설정 파일은 docker-compose 파일과 유사하기 때문에 기시감을 느낀다.
  • 시도하고 있지 않지만, 궁리하면 배포 완료시나 실패시에 Slack등으로 통지를 보낼 수 있을 것 같다.
  • 자신의 경우 테스트 코드를 작성하지 않았기 때문에 곧 내가 시도하고 싶습니다.
  • 좋은 웹페이지 즐겨찾기