Vercel을 이용한 프로젝트 배포 준비

저번 글에서 Git, Vercel Cli, Supabase Cli 설치가 끝냈는데, 이번 글에서 GitHub 저장소를 만들고 Vercel 프로젝트 설정을 위한 준비를 하도록 하겠다.

Git 저장소 초기화

Vercel은 GitHub 저장소와 연동하여 배포한다. 프로젝트를 Git 저장소로 초기화해야 한다. 다음 명령 줄을 하나씩 실행한다.

cd '프로젝트 폴더 경로' 

프로젝트 폴더로 이동한다.

git init

git init 하면 '.git'이라는 폴더를 만들어서 해당 폴더를 Git이 관리할 수 있게 해준다. 해당 파일은 숨김 처리 되어있으므로, 설치한 프로젝트 폴더에서 숨긴 파일 표시하면 나타난다. 

git add . 

처음 커밋할 파일 추가한다.

git commit -m "Initial commit"

첫 커밋을 실행하는 명령을 하면 Git이 "누가 커밋을 했는지" 정보를 모르겠다는 오류가 발생할 수 있다. Git 커밋에는 항상 작성자 이름과 이메일이 들어가는데, 사용자의 정보를 아직 Git이 모르는 상태이다. 아래 두 명령어로 사용자 정보를 설정해야 한다. 이름은 실명이 아니어도 되므로 닉네임을 사용해도 된다.

git config --global user.email "이메일"
git config --global user.name "이름"

프로젝트 루트 폴더에서 .gitignore 파일을 생성한다. 메모장을 만들어서 이름을 변경하면 된다. 그리고 cmd에서 다음의 명령줄을 이용해 배포에 불필요한 파일을 제외한다. 또는 VSCode 등 사용하는 편집기에서 제외할 파일 이름을 직접 작성해도 된다. 그 때는 큰 따옴표 안에 파일 이름을 작성한다.

echo "node_modules/" > .gitignore 

echo ".env" >> .gitignore

GitHub 저장소 생성 및 푸시

먼저 GitHub에서 새 저장소를 생성한 뒤, 다음 코드를 차례대로 입력해 로컬 저장소를 GitHub에 연결하고 푸시한다. 주황색 부분은 GitHub에서 저장소를 만들 때 사용한 사용자의 이름과 저장소 이름을 적으면 된다.

git remote add origin https://github.com/your-username/repository name.git 

git branch -M main 

git push -u origin main

GitHub 저장소에 푸시된 파일

정상 처리되면 이미지처럼 GitHub 저장소에 프로젝트 파일이 푸시된 모습을 확인할 수 있다.

Vercel 프로젝트 설정 준비

이제 vercel.json 파일을 프로젝트 루트에 추가하여 public 디렉토리를 배포 경로로 지정한다.

{

    "version": 2,

    "builds": [

      {

        "src": "public/**",

        "use": "@vercel/static"

      }

    ],

    "routes": [

      {

        "src": "/(.*)",

        "dest": "public/$1"

      }

    ]

}

@vercel/static은 정적 파일을 제공하고, public 디렉토리의 파일을 루트 경로로 매핑한다.

이제 프로젝트 배포 준비가 끝났으니 다음 글에서 본격적으로 프로젝트를 Vercel에서 호스팅해 배포하도록 하겠다.