[토이프로젝트]대출이자계산기 만들어보기 - 3편 : 웹 배포하기

이번 포스팅에서는 지금까지 만든 프로젝트를 실제 웹 서비스로 배포해보겠습니다. Next.js를 배포하는 방법은 여러가지가 있는데, 이번 프로젝트는 Next.js를 개발한 Vercel사의 배포를 사용하겠습니다. 간단한 프로젝트는 Vercel을 이용하면 쉽게 배포할 수 있으며, 호스팅 또한 무료로 제공됩니다.

배포 후에는 가비아로 구입한 도메인을 연결해보겠습니다.

---

3-1. 가비아로 도메인 구입하기

1. 가비아에 접속해서 상단에 도메인 메뉴를 클릭합니다.

calculator라는 도메인은 이미 사용중이기 때문에 사용 가능한 도메인을 입력해보겠습니다. .co.kr, .kr 등 여러 가지가 있지만 co.kr이 보편적으로 많이 사용됩니다. 구매를 원하는 도메인을 검색하고 신청하기를 클릭합니다.

 

2. 신청 정보를 입력합니다.

이후에는 기본값 그대로 진행합니다. 약관 동의 후 결제까지 진행합니다.

 

3. 상단에 My서비스를 클릭해 구매한 도메인을 확인합니다.

 

 

3-2. GitHub 레포지토리를 Vercel로 배포하기

1. Vercel 접속 후 GitHub로 로그인을 합니다.

 

2. Import Project를 통해 프로젝트를 연결합니다.

 

3. 배포할 레포지토리를 import 합니다.

 

만약 위처럼 import할 레포지토리가 보이지 않는 다면 더보기를 참고해 주세요.

1. Add GitHub Account를 클릭합니다.

 

2. 모든 레포지토리에 권한을 선택하고 Install 해줍니다.

 

4. Deploy에 필요한 설정을 합니다.

Build and Output Settings를 클릭하고 OVERRIDE를 활성화 합니다.

 

Environment Variables 탭 클릭 후 Key - Value를 입력합니다. 이전 글에서 구현한 카카오톡 공유하기를 위한 자바스크립트 키를 추가합니다.

 

이후 Deploy를 하게 되면 배포가 실행됩니다.

Deploy ....

 

5. 배포가 완료됐습니다. 이제 Continue to DashBoard를 클릭해 대시보드로 돌아가봅니다.

 

6. 배포된 서비스는 Vercel에서 제공하는 Domain(https://my-calculator-iota.vercel.app/)을 통해 접속할 수 있습니다.

이후에 코드가 수정되고 GitHub로 push를 하게 되면 Vercel에서 GitHub에 push를 감지해 자동으로 Deploy를 실행합니다.

 

7. 이제 가비아를 통해 구매한 도메인을 해당 도메인으로 연결해보겠습니다. 상단에 Settings를 클릭합니다.

 

8. 도메인 탭에서 구매한 도메인을 입력하고 Add를 클릭합니다.

 

9. 도메인을 연결하기 위한 설정이 필요합니다. (www를 추가할 것이냐는 질문이 나오면 예를 눌러 확인합니다)

저는 이미 구매된 도메인(codedream.co.kr)의 서브 도메인(calculator)을 붙여 사용했습니다. 메인 도메인을 사용하시는 경우에도 진행 내용은 동일합니다.

*메인 도메인 등록시에는 Type : A, Name : @, Value : 76.xx.xx.xx와 같은 레코드값이 조회됩니다.

TXT
_vercel
vc-domain-verify=calculator.codedream.co.kr,5f878471921ac9bd2dcc

 

표시된 레코드값을 등록해줘야합니다. 3-1. 3으로 돌아가서 이용 중인 서비스의 도메인을 클릭하면 아래와 같이 DNS 관리툴이 조회됩니다. DNS 관리툴을 클릭합니다. 

 

 

DNS 설정에서 구매한 도메인의 설정을 클릭합니다.

 

레코드 수정을 클릭하고 레코드 추가를 통해 위의 값들을 차례대로 입력합니다.

왼쪽부터 순서대로 Type, Name, Value

 

저장 후 Vercel을 확인해보면 상태를 실시간으로 체크합니다. 

 

레코드 체크가 완료되면 아래와 같이 성공 표시가 조회됩니다.

 

*서브 도메인 사용시 CNAME을 추가로 등록해주어야 합니다.

 

10. 기존 Vercel에서 제공해준 도메인을 리다이렉트 시킬 수도 있습니다.
Edit 버튼 클릭 후에 리다이렉트를 새로 등록한 도메인으로 연결해줍니다.

 

11. 마지막으로 리전을 한국으로 바꿔줍니다.

Vercel은 서버리스 방식의 배포 플랫폼으로 서버를 관리할 필요 없이 코드를 배포하고 실행할 수 있습니다. 이러한 서버리스 플랫폼은 FaaS(Function as a Service)의 한 유형으로, 프로젝트를 여러 개의 함수로 분할하여 필요에 따라 각 함수를 실행할 수 있습니다. 이 함수들은 분산된 네트워크에 등록되어 있으며 필요할 때마다 실행됩니다. 이 때 함수의 지역을 한국으로 바꿔주면 조금 더 나은 속도를 가져갈 수 있습니다.

Funtions 메뉴를 클릭하고 Seoul, South Korea를 선택합니다. 

 

 

이제 웹 서비스 배포가 마무리됐습니다.

다음 편부터는 Flutter로 모바일 서비스를 개발해보겠습니다.

전체 코드는 GitHub에서 확인하실 수 있습니다.