안내사항

• 해당 페이지는, https://google-dsc-kookmin.github.io/ 페이지의 유지, 보수를 위해 초기 개발진(23-02) 멤버들이 작성한 설명서입니다.
• 웹사이트를 구성하는 코드들은 src 에 있습니다.
• 웹사이트에 활용되는 1) 멤버 깃허브 활동 데이터 2) 멤버 프로필 정보는 data 폴더에 json 형태로 존재합니다.

깃허브 레포지토리 구조

A : 프론트엔드 react 빌드 및 보존을 위한 레포지토리

• https://github.com/Google-DSC-Kookmin/2023-02-WebPage-Project
• A 의 Github actions 은 빌드된 리액트 정적 파일을 B의 별도 브랜치로 저장합니다.

B : 웹사이트와 관련된 정적 파일 코드(html,css,js) 및 멤버 정보, 멤버 활동 정보가 담긴 레포.

• https://github.com/Google-DSC-Kookmin/Google-DSC-Kookmin.github.io

B 에는 Github actions work flow 가 두가지 있습니다.

• B - main.yml : Github Pages 는 해당 레포지토리를 호스팅해줍니다.
• B - **memberDataUpdate.yml :다음 노션 페이지 () 에 접근하고, Notion API 를 통해 등록된 모든 멤버들의 속성값(이름, 깃허브 주소..)을 불러와 data/Members.json 에 저장합니다.**

A레포의 Github Action 작동 방식

실행 조건에 부합할시, 아래 명시된 순서대로 자동 실행됩니다.

• 실행 조건
  • Pull Request를 통해서 다른 branch가 Main으로 Merge될 때
  • 동시에, 해당 Pull Request의 Tag에 “no update”가 없을 때 실행됩니다.
• 실행 내용
  • React를 정적파일로 빌드(npm run build)를 진행합니다
  • B레포의 파일을 받아와서 정적 파일을 빌드된 파일로 변경합니다.
  • 변경사항을 B레포의 branch로 만들어 자동으로 github에 upload합니다.

웹사이트 수정 방법

• Github Pages 에서는 정적인 페이지(html, css, javascript) 소스만 업로드 되어야 합니다.

  따라서, react 로 개발하는 방식을 채택하기 위해서, 다음과 같이 이루어집니다.

  1. react 로 로컬에서 개발

  2. 새로운 branch를 생성하여, github에 upload

  3. Pull requests 요청 및 main branch에 merge

  4. A 레포에 달린 github actions 이 돌면서, B 레포에 정적 파일(html,css,js)를 제공

  이때 B 레포에 별도의 브랜치가 생성되어 새로운 코드들을 포함하고 있음.

  5. B 레포의 새롭게 생성된 브랜치의 내용들을 Main 브랜치에 push / merge

  6. B 레포의 main push 를 actions 가 감지하고 새롭게 웹사이트 호스팅.