🚀 프론트엔드 인프라 기본 구조

🛠️ 브랜치 구조

📂 CI

test-and-lint

필수적으로 통과해야 하며, 통과하지 못할 시 FE/dev 브랜치에 머지할 수 없습니다.

• Run tests

  • Jest를 사용해 핵심 영역 기능에 대한 단위 테스트를 확인합니다.

• Run lint

  • 팀에서 정한 코딩 컨벤션을 ESLint 설정 파일에 적용하였고, eslint . 를 수행해 확인합니다.

• Run lint:css

  • 팀에서 정한 CSS 작성 컨벤션을 stylelint 설정 파일에 적용하고 stylelint './src/**/*.styles.{ts,tsx}' 를 수행해 확인합니다.

• Run build

  • 최종적으로 빌드가 문제 없이 수행되는지 확인합니다.

publish-storybook

통과하지 않아도 머지할 수 있지만 통과되는 코드 작성을 적극적으로 권장합니다.

• Publish storybook

  • chromatic 을 통해 스토리북을 배포합니다.

📂 CD

• 프론트엔드 프로젝트를 정적 파일로 빌드합니다.
• 간단한 Node.js 웹 서버를 설정하여 빌드된 정적 파일을 제공할 수 있도록 합니다.
• 위의 과정을 Dockerfile 로 작성하여 도커 이미지를 생성하고 컨테이너로 실행할 수 있도록 합니다.
• Github Actions 로 코드가 푸시될 때마다 자동으로 도커 이미지를 빌드하고 푸시하며, 배포 서버에서 해당 이미지를 사용하여 컨테이너를 실행합니다.