[Git] Git submodule CLI

 

 

---

배경

다른 프로젝트의 기능을 앱에 추가하는 방법으로 모노레포 방식을 사용할 수 있지만, 각 프로젝트를 독립적으로 관리해야 하는 경우에는 적합하지 않다.

Git Submodule은 메인 프로젝트에서 외부 링크 형태로 서브 프로젝트를 연결해 두었다가, 필요할 때 최신 변경 사항을 가져와 작업한다.
이 방식은 서브 프로젝트의 별도 사본을 만들지 않으며, 원래 저장소의 최신 상태를 유지하면서 개발을 진행할 수 있게 해줍니다.
서브 프로젝트는 독립적으로 버전 관리를 유지하면서도, 메인 프로젝트와 쉽게 통합할 수 있습니다.

 

 

노드 프로젝트 submodule 내부 구조

main-project/
├ src/
└ submodules/              # 서브모듈들을 모아두는 디렉토리
  ├── my-submodule/        # 서브모듈 디렉토리
  │   ├── .git/            # 서브모듈 전용 Git 관련 파일들
  │   ├── node_modules/    # 서브모듈의 의존성 패키지
  │   ├── src/             # 서브모듈의 소스 코드
  │   ├── package.json     # 서브모듈의 패키지 구성 파일
  │   ├── package-lock.json# 서브모듈의 패키지 잠금 파일
  │   └── README.md        # 서브모듈의 README 파일
  └── another-submodule/   # 다른 서브모듈 디렉토리 (옵션)
      ├── .git/            # 서브모듈 전용 Git 관련 파일들
      ├── node_modules/    # 서브모듈의 의존성 패키지
      ├── src/             # 서브모듈의 소스 코드
      ├── package.json     # 서브모듈의 패키지 구성 파일
      ├── package-lock.json# 서브모듈의 패키지 잠금 파일
      └── README.md        # 서브모듈의 README 파일

 

main project와 submodule project 관계

• main project에 submodule을 추가하여 사용한다.
• main project에 root에 submodule들을 관리하기 위한 .gitmodules 파일이 생성된다.
• main project는 submodule의 commit point를 바라보고 있다.

 

 

서브모듈 명령어

1. git url 조회

$ git remote -v

 

2. 프로젝트에 서브모듈 추가

// git submodule add -b [브랜치명] [git url]
git submodule add -b master https://github.com/react-template.git react-app/submodules/template

 

3. 프로젝트에 서브모듈 추가

// git submodule add -b [브랜치명] [git url]
git submodule add -b master https://github.com/react-template.git react-app/submodules/template

 

4. 서브모듈 연동 확인 / 버전 확인

git submodule status  |  git status
// b94fd8e91242a630811f234e00d5b30422a665a1 template (v0.0.0.0-153-gb94fd8e)

 

5. 메인 프로젝트에서 서브모듈 업데이트

git submodule update --remote

// --remote가 붙어있지 않다면 메인 프로젝트에 submodule이 가진 커밋ID 시점으로 checkout
// $ git submodule update

 

6. 서브모듈 작업 업데이트

// 메인 프로젝트안에 추가된 서브 프로젝트 root까지 이동
$ git pull
$ git add .
$ git commit -m "Update submodule"
$ git push origin master

 

7.서브모듈을  포함한 프로젝트 clone

// main project clone
$ git clone <git_url>

// 서브모듈 저장소 초기화 및 업데이트트
$ git submodule init
$ git update

// 한번에 하고 싶은 경우
git clone --recurse-submodules <git_url>

 

8. 서브모듈 삭제 / Git 캐시 삭제

// git submodule deinit -f [submodule 디렉토리]
git submodule deinit -f react-app/submodules/template 

// git rm -f [submodule 디렉토리]
git rm -f react-app/submodules/template 

// rm -rf .git/modules/[submodule 디렉토리]
rm -rf .git/modules/react-app/submodules/template 

// rm '[submodule 디렉토리]'
rm 'react-app/submodules/template '

 

 

프로젝트에서 서브모듈 활용하기

1. import 개선

// tscofing.json
{
  "compilerOptions": {
    ...
    "baseUrl": ".",
    "paths": {
      "@template/*": [
        "submodules/template/src/*"
      ]
    }
  },
  ...
}

// webpack.config.js
module.exports = {
  ...
  resolve: {
    extensions: ['.ts', '.tsx', '.js'],
    alias: {
      '@template': path.resolve(__dirname, '../../submodules/template/src'),
    },
  },