github action .env file 추가

local에서 작업을 하다 netlify를 통한 배포를 진행하면서 문제가 발생했습니다.

기존에 local에서 .env파일을 통해서 KAKAO_MAP_KEY를 받아서 작업을 하다가 배포를 하게 되니 .env파일을 참조할 수 없어서 맵이 뜨지 않게 되는 문제가 발생했습니다.

!https://blog.kakaocdn.net/dn/bz9muI/btsqZ1eeMvg/vuNK40cv5BBjBKRazAUMSk/img.png

문제를 해결하기 위해 서칭을 하던중 github action을 발견하게 되었습니다.

githubAction 이란?

GitHub Actions는 GitHub에서 제공하는 지속적인 통합(CI) 및 지속적인 배포(CD) 서비스입니다. 이를 사용하여 소프트웨어 개발 및 배포 프로세스를 자동화하고, 코드 변경 사항이나 이벤트에 따라 자동으로 작업을 실행할 수 있습니다. GitHub Actions는 코드를 푸시하거나 풀 리퀘스트가 열리거나 병합될 때 자동으로 트리거되는 작업을 설정할 수 있습니다.

개념과 기능

1. 워크플로우 (Workflow): 워크플로우는 GitHub Actions의 핵심 요소로, 하나 이상의 작업으로 구성된 자동화된 프로세스입니다. 이러한 작업은 코드를 빌드, 테스트, 패키지화, 배포 등과 같은 다양한 작업으로 구성될 수 있습니다.
2. 작업 (Job): 워크플로우는 하나 이상의 작업으로 구성됩니다. 작업은 병렬 또는 순차적으로 실행될 수 있으며, 각 작업은 하나 이상의 단계로 구성됩니다.
3. 단계 (Step): 작업은 하나 이상의 단계로 구성됩니다. 각 단계는 하나의 명령 또는 작업을 나타내며, 일련의 단계로 전체 작업이 구성됩니다. 예를 들어, 코드를 빌드하거나 테스트를 실행하는 등의 단계가 있을 수 있습니다.
4. 이벤트 (Event): GitHub Actions 워크플로우는 특정 이벤트에 의해 트리거됩니다. 예를 들어, 코드 푸시, 풀 리퀘스트 생성, 브랜치 병합 등의 이벤트가 워크플로우를 실행할 수 있는 트리거가 됩니다.
5. 작업 실행 환경 (Runner Environment): 작업은 실행을 위해 특정 환경 (예: Linux, macOS, Windows)에서 실행되며, 필요한 도구와 종속성을 설치하고 작업을 실행합니다.

사용 방법

1. 위의 방법대로 들어가서 secret 환경변수를 등록해 줍니다.

2. 위의 방법대로 들어가서 yml file을 만들어주면 끝입니다.

#세부적인 코드의 역활이 궁금하시다면 https://ji5485.github.io/post/2021-06-06/build-ci-cd-pipeline-using-github-actions/ 에서 확인해 보세요!

 

main.yml

name: Front Deployment

on:
  pull_request:
    branches:
      - main
  push:
    branches:
      - main

jobs:
  build:
    name: react build & deploy
    runs-on: ubuntu-latest
    steps:
      - name: checkout Github Action
        uses: actions/checkout@v3
	  
      # .env에 있던 환경변수들을 등록해주는 단계
      - name: .env setting
        run: |
          echo "REACT_APP_SERVER_IP=${{ secrets.REACT_APP_SERVER_IP }}" >> .env
          echo "REACT_APP_EXAMPLE=${{ secrets.REACT_APP_EXAMPLE }}" >> .env

      - name: install npm dependencies
        run: npm install

      - name: react build
        run: npm run build

 

 

 

적용후

너무 잘돌아갑니다!.

 

https://s0ojin.tistory.com/49

https://ji5485.github.io/post/2021-06-06/build-ci-cd-pipeline-using-github-actions/