본문 바로가기
CICD

Vercel 을 사용한 리액트 프론트엔드 배포 , GitActions 활용으로 자동화

by windy7271 2024. 11. 19.
728x90
반응형

 

최근에 프로젝트를 시작했습니다.

 

근데 거기에는 파이썬서버와, 리액트 서버, 스프링 서버 3개가 있습니다.

 

그래서 깃허브에서 조직을 생성해서 3개의 서버를 생성했습니다.  Vercel 은 개인 레포 는 무료이지만, 조직에서는 유료를 받습니다.

 

그러면 조직에서 프론트 프로젝트만 Fork 따서 하면 되더라고요 ?

 

 

여기서 제 frontServer 를 포크 땁니다.

 

그리고 vercel 의 포크 딴 브랜치를 등록해줍니다.

 

등록은 쉬워요

1. vercel 들어가기

2. Add new 누르기 (프로젝트 생성 ?)

3. 내 레포지토리에서 포크딴 프로젝트  import 하기 

4. 그리고 다 default 로 확인확인 누르면 알아서 됩니다.

 

그러면 프론트 배포는완료인데요

근데 새롭게 프론트가 배포가 되려면 제 포크된 레포의 코드가 바뀌어야지 배포가 다시 시작됩니다.

 

그럼 코드 바꿀때마다 싱크를 맞추냐 ? 귀찮죠 자동화갑니다

 

 

팀원들은 원본 저장소 에서 브랜치를 따서 작업을 하는경우가 대부분입니다. 그래서 원본 저장소 main 에 push 가 되는 순간

포크따고 있는 제 main 도 갈아치우게 만들어주면 그걸로 배포가 되게 만들었습니다.

 

 

1. 깃허브 PAT token 발급 

  • 본인 계정에서 Personal Access Token (PAT)을 생성합니다.
  • GitHub의 Settings > Developer settings > Personal Access Tokens

2. PAT 을 원본 저장소에 Secrets 에 추가해줍니다.

  • Settings > Secrets and variables > Actions
  • 새로운 Secret을 추가하고 이름은 PAT_TOKEN으로 지정하고, 생성한 PAT를 값으로 입력합니다.

 

3. 워크 플로우작성

 

원본 저장소에서 추가 입니다.

.github/workflows/sync-to-fork.yml 파일 생성 해주고요

 

name: Sync Fork with Upstream

on:
  push:
    branches:
      - main

jobs:
  sync:
    if: github.repository == '원본 레포 명'
    runs-on: ubuntu-latest

    steps:
      - name: Check out the repository
        uses: actions/checkout@v3
        with:
          persist-credentials: false

      - name: Set up Git
        run: |
          git config user.name "GitHub Actions"
          git config user.email "actions@github.com"

      - name: Add Fork as Remote
        run: git remote add fork 포크 딴 주소

      - name: Push changes to Fork
        env:
          GITHUB_USERNAME: 깃허브 아이디
          GITHUB_TOKEN: ${{ secrets.PAT_TOKEN }}
        run: |
          git push -f https://$GITHUB_USERNAME:$GITHUB_TOKEN@포크딴주소 main

 

 

sync : if 문을 넣어주셔야

원본 저장소에 푸쉬가 되면 그게 포크된저장소까지 가잖아요 ?

근데 포크된 저장소에서도 깃액션이 실행이 되는것을 막기위해 써줍니다.

 

 

그럼 이렇게 무시가 됩니다.

 

그럼 이만

반응형

댓글