SookDev

1. token 설정 🌱 github 토큰 등록 🌿 vercel 에 토큰 등록 2. 부모 레포지토리 설정 🌱 vercel-submodule-workaround.sh 🌱 package.json 빌드 성공!! 🎉

버셀은 서브모듈을 지원하지 않는다. 서브모듈을 적용한 프로젝트를 vercel 로 배포하며 생각지 못한 이슈가 생겼다. 개인 프로젝트 할때 가장 만만하게 사용하던 배포 툴이었는데 서브모듈을 지원하지 않아 추가적인 설정이 필요했다. 구글링 할 때 자료가 많이 없기도 했고 나와있는 자료조차 조금씩 헷갈리는 부분이 있어서 생각보다 많이 헤맸다. 하지만 이제 이 방법대로 하면 절대 배포이슈 날일 없음!!!!!! 😊

1. token 설정

🌱 github 토큰 등록

Settings -> Developer settings -> Personal access tokens

Generate new token 선택

note 설정 (eg. vercel)

expiration 설정 (eg. No expiration)

귀찮지 않으려면 만료일 없는것으로 설정하는게 정신건강에 좋다.

select scopes 설정

repo - Full control of private repositories

토큰 복사

🌿 vercel 에 토큰 등록

환경변수 세팅

적용할 프로젝트 -> Settings -> Environment Variables

key : GITHUB_ACCESS_TOKEN / value : 복사한 git 토큰 값

general 세팅

적용할 프로젝트 -> Settings -> general
Build Command 에 npm run vercel-build 입력 후 토글 override

2. 부모 레포지토리 설정

🌱 vercel-submodule-workaround.sh

.gitmodules 를 보면 path 와 url 을 참고하여 쉘 스크립트에 들어갈 정보를 입력한다.


[submodule "next-submodule"]
	path = next-submodule
	url = https://github.com/22sook00/next-submodule.git

이때, repo paths 부분에 url 을 그대로 넣으면 아예 액세스토큰 자체를 불러오지 못한다.

밑에서 보면

git remote add origin https://$GITHUB_ACCESS_TOKEN@$SUBMODULE_GITHUB

부분에서 이미 https:// 가 적용되어 있기 때문이다.

반드시 github.com/22sook00/next-submodule 까지만 작성해주도록 한다.


# repo paths (supplied without the protocol prefix)
SUBMODULE_GITHUB=github.com/22sook00/next-submodule
# the reference of the submodule in .gitmodules (usually the path)
SUBMODULE_PATH=next-submodule

# github access token is necessary
# add it to Environment Variables on Vercel
if [ "$GITHUB_ACCESS_TOKEN" == "" ]; then
  echo "Error: GITHUB_ACCESS_TOKEN is empty"
  exit 1
fi

# stop execution on error - don't let it build if something goes wrong
set -e

# get submodule commit
output=`git submodule status --recursive` # get submodule info
no_prefix=${output#*-} # get rid of the prefix
COMMIT=${no_prefix% *} # get rid of the suffix

# set up an empty temporary work directory
rm -rf tmp || true # remove the tmp folder if exists
mkdir tmp # create the tmp folder
cd tmp # go into the tmp folder

# checkout the current submodule commit
git init # initialise empty repo
git remote add origin https://$GITHUB_ACCESS_TOKEN@$SUBMODULE_GITHUB # add origin of the submodule
git fetch --depth=1 origin $COMMIT # fetch only the required version
git checkout $COMMIT # checkout on the right commit

# move the submodule from tmp to the submodule path
cd .. # go folder up
rm -rf tmp/.git # remove .git 
mv tmp/* $SUBMODULE_PATH/ # move the submodule to the submodule path

# clean up
rm -rf tmp # remove the tmp folder

🌱 package.json

vercel-submodule-workaround.sh 이 작동하면 npm run build 를 해라!


"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "vercel-build": "./vercel-submodule-workaround.sh && npm run build"
  },

⚠️

GITHUB_ACCESS_TOKEN 은 버셀에서 등록한 환경변수에서 가져오기 때문에 .env 에는 별도로 추가하지 않아도 된다.