React 프로젝트를 GitHub Actions와 GitHub Page를 이용해서 배포해보자. 나는 기존에 오픈 소스로 개발 중인 프로젝트를 사용했다. 이 글은 GitHub Actions를 이해하고 있다는 가정하에 작성한다. 만약 GitHub Actions에 관해 공부해보고 싶다면 블로그에 정리해놓은 글 또는 공식 문서를 보자. 전체 코드 전체 코드를 먼저 보고 하나씩 의미를 알아 가보자. name: Deploy on: push: branches: - master jobs: deploy: runs-on: ubuntu-18.04 steps: - uses: actions/checkout@v2 - name: Setup Node uses: actions/setup-node@v2.1.2 with: node-version: "12.x" - name: Cache dependencies uses: actions/cache@v2 with: path: ~/.npm key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }} restore-keys: | ${{ runner.os }}-node- - name: Install dependencies run: npm install - name: Make env file run: | touch .env echo REACT_APP_MODE=prod >> .env echo REACT_APP_GA_ID=${{ secrets.REACT_APP_GA_ID }} >> .env - name: Build app run: npm run build - name: Deploy uses: peaceiris/actions-gh-pages@v3 with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_dir: ./build workflow 이름 및 이벤트 정의 name: Deploy on: push: branches: - master workflow의 이름은 Deploy로 정의하고, 이벤트는 master 브랜치로 푸시하는 것으로 정의하였다. ...

개발을 하다보면 세팅이 불가피한 기능 또는 프로그램을 사용할 때가 있다. 예를 들어 PostgreSQL 같은 데이터베이스에 연결 할 때 HOST, PORT, USERNAME, PASSWORD 같은 환경 변수를 세팅해야 할 때가 있다. 또는 job을 이용해서 어플리케이션을 빌드한 다음에 내가 작성한 script를 돌리고 싶을 때도 있다. 이렇게 커스텀하게 GitHub Actions를 다뤄보는 방법에 대해 알아보도록 하자. 환경 변수 일단 각 workflows가 실행 될때 마다 GitHub Actions가 가지고 있는 기본 환경 변수가 제공 된다. 물론 개발자가 원하는 환경 변수를 설정 할 수도 있다. 환경 변수는 step, job, 그리고 workflow 전체의 범위로 사용 할 수 있다. 아래 예제는 step과 job에 환경 변수를 사용한 경우다. ...

GitHub Actions는 YAML로 events, jobs, 그리고 steps를 정의한다. 그리고 YAML 파일은 레포지토리의 .github/workflows에 저장된다. 이 YAML을 직접 작성하고 Actions를 실행 시켜보자. 만들 예제는 npm으로 bats를 설치하고 bats -v를 실행하는 간단한 액션이다. 예제 만들기 1. 레포지토리 생성 및 YAML 파일 작성 GitHub에서 레포지토리를 새로 만들고 .github/workflows에 YAML 파일을 작성한다. # https://docs.github.com/en/actions/learn-github-actions/introduction-to-github-actions#create-an-example-workflow name: learn-github-actions on: [push] jobs: check-bats-version: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - uses: actions/setup-node@v1 - run: npm install -g bats - run: bats -v 편의상 GitHub에서 바로 작성 했다. ...

최근에 개인 프로젝트를 여러 개 시작 했다. 배포에 대한 걱정을 좀 줄여보고자 처음으로 CI/CD를 공부해보자 마음 먹었다. CI/CD에 대해서 아는게 하나도 없어서, 서칭을 하다가 그저 탭으로만 마주한 GitHub Actions이 CI/CD 툴인걸 알게 되었다. 굉장히 많은 툴들이 있었는데, GitHub Actions은 GitHub에서 CI/CD에 대한 고민도 바로 해결 해주는 느낌이였다. 이렇게 툴은 결정했고 GihHub Actions Learning 문서를 보면서 공부한 내용을 블로그에 정리했다. 문서의 내용이 많으니 블로그 글은 나눠서 게시하겠다. CI/CD 란? CI/CD에 대한 개념은 굉장히 많은 자료가 있다. 그렇기 때문에 간단하게만 적고 넘어가겠다. ...

태어나서 처음으로 “나도 회고 글 써서 블로그에 포스팅 해야지"라는 다짐을 한게 2017년 12월이였다. 그리고 3년이 지난 지금 2017년의 다짐을 실천하고 있다. 이 글이 올라갈지는 2021년 1월 1일이 되어봐야지 알겠지만… 사실 2017년 12월 24일에 회고를 목표한 양 60%로 정도 쓰긴 했었다. 개인적으로 좋아하는 카페에서 맥북 13인치 2015년 형을 열어놓고 열심히 썼지만 밤에 약속이 잡혀 있어서 중간에 멈춰야 했다. 마침 25일 오전에 중국 청도에 갈 일정이 잡혀 있어서, 비행기에서 끝낼 생각으로 약속에 갔다. ...