react git action ci / cd 배포 환경 설정(.env)

 

 

 

react git action ci / cd 배포 환경 설정(.env)

 

 

---

 

 

 

세팅

 

배포하려는 프로젝트 스택 :

react CRA / husky / .eslintrc

typeScript / env 사용

 

 

 

 

CI / CD 과정

 

 

 

 

1.

 

env 파일은 깃에 올라가지 않으므로 이를 위해 secret 키 먼저 설정해주었다

 

해당 레파지토리 setting -> Secrets -> Actions 에서

 

 

 

New repository secret 버튼을 누르고 키 : 값을 고대로 적어주면 된다

 

 

 

 

 

2.

 

파일 최상단에

.github / workflows / cicd.yml 를 만들어주었다.

 

 

 

 

3. cicd.yml setting

 

 

// 이름
name: loginTodo Publish


// main 브랜치에 push 할 때마다 depoly
on:
  push:
    branches: ["main"]


jobs:
	// 우분투 환경에서 deploy
  deploy:
    runs-on: ubuntu-latest

    steps:
    // 노드 환경에서 deploy
      - uses: actions/checkout@v3
      - name: Node.js 16.x
        uses: actions/setup-node@v3
        with:
          node-version: 16.x
          
	// env setting
    // env 는 git에 올라가지 않아 echo로 만들고 레파지토리에서 secrets 키 생성
   
      - name: Setting environment variables
        run: echo "REACT_APP_BASE_URL=$REACT_APP_BASE_URL" >> .env.production
        env:
          REACT_APP_BASE_URL: ${{secrets.REACT_APP_BASE_URL}}


	// git에 올라가지 않는 npm package 설치
    
      - name: Install npm package
        run: npm install

	// 빌드 명령어
   
      - name: Build Pages
        run: npm run build

    
      - name: publish gh-pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.TODO }}
          publish_dir: ./build

 

 

각 step마다 이름을 정해주어서 build 시 어디에서 오류가 났는지 알 수 있게끔 했다

 

 

 

 

 

4. push 후 

 

 

 

 

 

 

git action에 deploy 잘 되는지 확인하면 끝!!

 

 

 

 

 

 

 

 

👇 오류 노트

 

CI/CD 시 만났던 오류 : parserOptions.project" has been set for @typescript-eslint/parser."