[4주차] Vercel로 React 배포하기

이 문서는 [월간-CS][24년 4월] React, Next 배포와 배포 자동화 A부터 Z를 위해서 작성된 문서입니다. 이 문서에는 그 어떤 저작권이 없으며, 편하게 참고 및 사용하셔도 됩니다.

개요

Vercel 회원가입하기

GitHub 로그인으로 회원가입 부탁드립니다.

배포하기

1. 샘플 프로젝트 포크 뜨기

   1. 이름 : monthly-cs/2024-04-cicd-week-4-template

   2. 링크 : https://github.com/monthly-cs/2024-04-cicd-week-4-template

2. 우상단 검정색의 [Add New] - [Project]을 누르기

   

3. 화면 중앙의 [Install] 클릭하기

   

4. 개인 이름 클릭하기

   

5. [Only select repositories] - [unchaptered/2024-04-cicd-week-4-template] 클릭하기

   

6. [unchaptered] - [2024-04-cicd-week-4-template] - [Import] 클릭하기

   

7. 주요 설정값을 아래 미리 보기 이미지를 통해서 설정하고 [Deploy] 클릭하기

   주의 주의 주의 주의 주의

   미리 보기 이미지에는 npm ci로 되어 있으나, 현재 package-lock.json 파일이 없습니다. 따라서 npm install로 구문을 변경해주세요.

   1. 주요 설정값

      • Project name : 2024-04-cicd-week-4-template

      • Build Command : npm run build

      • Output Directory : build

      • Install Command : npm install

   2. 미리 보기 이미지

      

8. [Continue to Dashboard] 클릭하여 배포 결과 확인하기

   

9. 화면 중앙에 있는 [Deployment] 주소를 클릭하기

   

10. 주소 : https://2024-04-cicd-week-4-template-5soepo2q5-unchaptereds-projects.vercel.app/