vercel을 활용해 HTML+CSS+JS 프로젝트 배포하기

Vercel은 정적 사이트를 배포하는 데 최적화된 플랫폼으로, HTML, CSS, JavaScript로 구성된 프로젝트를 매우 쉽게 배포할 수 있습니다. 아래에 Vercel을 이용해 프로젝트를 빌드하고 배포하는 방법을 단계별로 정리했습니다.

---

1. Vercel 계정 생성 및 CLI 설치

1. 계정 생성
   • Vercel 공식 웹사이트에 접속해 회원가입을 완료하세요.
   • GitHub, GitLab, Bitbucket 계정으로 로그인하면 코드 저장소와의 연동이 편리합니다.
2. Vercel CLI 설치
   • 터미널에서 아래 명령어를 사용해 Vercel CLI를 설치합니다.

     npm install -g vercel
     

   • 설치가 완료되면 CLI를 통해 Vercel과 연동할 수 있습니다.

---

2. 프로젝트 준비

1. 프로젝트 디렉토리 구성
   • HTML, CSS, JS 파일을 포함한 정적 웹 프로젝트의 디렉토리를 준비합니다.
   • 예시:

     my-project/
     ├── index.html
     ├── styles.css
     ├── script.js
     └── images/
     

2. index.html 파일 확인
   • index.html은 프로젝트의 진입점 파일입니다.
   • 반드시 프로젝트의 최상위 디렉토리에 있어야 합니다.

---

3. Vercel 프로젝트 초기화

1. 터미널에서 프로젝트 디렉토리로 이동
2. cd my-project
3. Vercel 초기화
   • 아래 명령어를 실행하여 프로젝트를 초기화합니다.

     vercel
     

   • CLI에서 몇 가지 질문이 표시됩니다:
     • "Link to existing project?" → n (새 프로젝트 생성)
     • "What's your project name?" → 프로젝트 이름 입력 (예: my-project)
     • "In which directory is your code located?" → 디폴트 값 ./ (현재 디렉토리) 선택
   • Vercel이 자동으로 프로젝트를 생성하고 배포합니다.

---

4. 프로젝트 빌드 및 배포

1. 자동 빌드 및 배포
   • Vercel은 정적 파일을 자동으로 처리하므로 빌드 설정 없이 즉시 배포됩니다.
   • 배포가 완료되면 Vercel CLI가 생성된 URL을 출력합니다. 예:

     Deploying my-project to https://my-project.vercel.app
     

2. 수동으로 다시 배포
   • 프로젝트에 변경 사항을 적용한 후 다시 배포하려면 간단히 아래 명령어를 실행하세요.

     vercel --prod
     

---

5. Vercel 대시보드 관리

1. 대시보드 확인
   • Vercel 대시보드에서 프로젝트를 확인하고 설정을 관리할 수 있습니다.
   • 배포 기록, 도메인 연결, 환경 변수 등을 설정할 수 있습니다.
2. 도메인 연결
   • 대시보드에서 사용자 정의 도메인을 추가하여 https://my-project.vercel.app 대신 개인 도메인을 사용할 수 있습니다.

---

추가 설정 (옵션)

• 프로젝트 디렉토리 변경: 코드가 dist/ 폴더에 있다면, 초기화 과정에서 빌드 디렉토리를 dist로 지정하세요.
• 환경 변수 사용: .env 파일을 통해 API 키 등을 설정하고 대시보드에서 환경 변수를 추가 관리할 수 있습니다.

---

이 과정을 통해 프로젝트를 빠르고 간편하게 배포할 수 있습니다. 추가적으로 Git 저장소를 사용한다면 Git 연동을 통해 코드 업데이트 시 자동으로 배포될 수 있도록 설정할 수도 있습니다!