프론트엔드 AWS 배포하는 법,
웹 애플리케이션 배포 방법,
CI/CD란?,
제발 깃허브 액션🔥 모르는 개발자 없게해 주세요 🙏,
GitHub Action으로 Next.js + Typescript 배포하기,
[AWS] S3를 이용하여 React배포하기 (초간단 5분컷),
[Next js] Serverless + Github Actions으로 Next js 배포 및 자동화(CI/CD)하기,
AWS S3, CloudFront로 리액트(프론트) 배포하기,
AWS - S3
을 참고하였습니다

CI/CD란?

메인 repository에 새롭게 추가되는 기능들을 CI 서버에서 자동으로 빌드하고 테스트해서 지속적으로 배포하는 것.

개발 프로세스의 핵심은 자동화

Github Action

특정 이벤트가 발생했을 때 내가 원하는 일을 자동으로 수행할 수 있도록 만들어주는 툴.
젠킨스 등 별도의 외부의 툴 필요없이 자동화 프로세스를 만들 수 있다.

개념

• Events
  - 이벤트. 특정 브랜치로 머지, 커밋을 푸쉬, 누군가 이슈를 열었을 때...
  - 깃허브에서 발생할 수 있는 대부분의 이벤트 지정 가능

• Workflows
  - 특정 이벤트가 발생했을 때 자동화할 스크립트를 작성해둘 수 있다

  • 어떤 일을 수행할지를 묶어둔 요리책 같은 개념
  • 하나 또는 다수의 Job을 가질 수 있다

• Jobs
  - 어떤 일을 수행하는가? unit test, E2E test 등

  • 기본적으로 병렬적(동시다발적) 실행되지만 순차적으로도 만들 수 있음
  • 이 Job이 어떤 순서로 실행되어야 하는지 step을 명시

• Actions
  - 우리가 npm에서 라이브러리를 가져다쓰듯이, 깃허브 액션에는 재사용할 수 있는 공개적으로 오픈된 다양한 명령이 action으로 정의되어있음

  • action check out, action setup node 등을 그냥 가져다쓰면 됨

• Runners
  - 각각의 job들을 병렬적으로 실행하는 것이 Runner
  

사용방법

.github/workflows/my_workflow.yml

• name: workflow의 이름
• on: 어떤 이벤트 발생 시 workflow가 실행되면 되는지 이벤트 명시
• job: 어떤 job인지 명시
  - job의 이름
  - runs-on: 어떤 러너(VM)를 사용할 것인지
  - step: 순서
  - with: 노드 버전 등 설정 가능
  - run: 실행시킬 명령어

연결해보자

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "deploy": "rm -rf node_modules/.cache && next build && next export && touch out/.nojekyll && git add out/ && git commit -m \"Deploy Next.js to gh-pages\" && git subtree push --prefix out origin gh-pages"
  }

package.json의 script 안에 deploy 명령어를 추가한다

입력한 명령어를 해석해보자면,

• rm -rf node_modules/.cache
  - node_modules 캐시제거

• next build
  - next 프로젝트 빌드

• next export
  - next 프로젝트를 static html앱으로 컴파일한 out/ 폴더를 생성해 줌

• touch out/.nojekyll
  - Github page의 jekyll 처리과정에서 _next 이러한 파일을 특수 리소스로 간주하고 최종 사이트에 복사하지 않는데 .nojekyll 파일을 만들면 이를 막을 수 있다.

• git add out/
  - 상의 변경 내용을 스테이징 영역에 추가

• git commit -m "Deploy Next.js to gh-pages"
  - 커밋메시지 작성 및 로컬 레파지에 추가

• git subtree push --prefix out origin gh-pages
  - github 저장소 gh-pages브랜치에 push

위와 같이 설정 후 스크립트를 실행시키면 자동으로 배포가 된다.

npm run deploy