광고 수익을 창출할 웹사이트 만들어보기 3-3(React 서버 배포하기 With Vercel)

1차적으로 소스도 만들었고,

깃에도 올려놨으니, 이제 내 로컬PC에서 띄우는게 아닌 외부에 서버를 띄워보기로 한다.

---

찾아보니 리액트서버를 배포하는 방법이 여러가지가 있는데

 

• 빠르고 간단하게 테스트하고 싶다면: Vercel 사용.
• 추후 확장성을 고려한다면: Netlify 추천.
• 비용 없이 진행하고 싶다면: GitHub Pages.

이 정도로 추려봤다.

 

어차피 내 페이지는 작고 간단한 서버라 Vercel을 통해 배포해보기로 한다.

Vercel은 아래와 같은 기능을 무료로 이용 가능하다.

무료 요금제 기능

• 자동화된 배포: GitHub, GitLab, Bitbucket과 연동하여 코드 변경 시 자동으로 빌드 및 배포됩니다.
• 서버리스 함수 지원: 서버 관리를 필요로 하지 않는 서버리스 함수를 통해 백엔드 로직을 구현할 수 있습니다.
• 글로벌 CDN: 전 세계에 분산된 콘텐츠 전송 네트워크를 통해 빠른 로딩 속도를 제공합니다.
• 자동 HTTPS/SSL: 모든 배포에 대해 자동으로 SSL 인증서를 발급하여 보안을 강화합니다.
• 커스텀 도메인 연결: 사용자 지정 도메인을 프로젝트에 연결할 수 있습니다.
• 미리보기 배포: 모든 브랜치와 PR에 대해 미리보기 URL을 생성하여 변경 사항을 쉽게 확인할 수 있습니다.

무료 요금제 한도

• 대역폭: 월간 100GB의 대역폭이 제공됩니다.
• 프로젝트 수: 최대 50개의 프로젝트를 생성할 수 있습니다.
• 일일 배포 횟수: 하루 최대 100회의 배포가 가능합니다.
• 서버리스 함수 실행 시간: 각 함수는 최대 10초 동안 실행될 수 있습니다.
• 로그 보관 기간: 빌드 및 배포 로그는 최대 7일 동안 보관됩니다.

GitHub에 연동해서 코드가 변경되어도 자동으로 빌드 및 배포가 가능하며, (저번화에 github에 업로드 해놨음)

자동으로 SSL 인증서를 발급해서 편리하고, 지정 도메인을 프로젝트에 연결까지 할수있다니 내가 원하는 기능은 웬만큼있다.

 

요금제도 월 100GB 사용이 가능하다고 하니 바로 이용해보자.

---

일단 당연히 계정을 먼저 생성해야한다.

 

홈페이지에 들어가 계정을 만들어보자. 회원가입 버튼을 누르면 이렇게 나온다.

 

나는 취미로 프로젝트를 하고있느데 Hobby를 선택해준다.

나는 Github 프로젝트를 연결할꺼니 깃헙선택.

주요목표는 빠른배포

유형은 AI

경험은 없다. 로 선택했다.

선택 하면 Git 레포지토리를 연결할수있게 나오는데 연결버튼을 누르면 내 프로젝트를 import 할수있게된다.

프로젝트를 import하면 나오는 화면인데 아래와 같이 설정하면 된다.

 

1. Root Directory 및 Build and Output Settings

• 기본적으로 React 앱의 루트 디렉토리는 ./로 설정되어 있으므로 변경할 필요가 없다고 하니 그냥 두겠다.
• 기본적으로 React 프로젝트에 적합한 기본값이 이미 설정되어 있기 때문에 그냥 두겠다.

2. Environment Variables (환경 변수)

React 앱에서 Flask 서버와 통신하려면 Flask 서버 URL을 환경 변수로 추가해야 한다고 한다. (중요)

 

Key: REACT_APP_API_URL

• Value: http://your-flask-server-public-ip:5000
  (여기서 your-flask-server-public-ip는 Flask 서버의 공용 IP 주소를 입력해줘야 한다. 현재 나는 플라스크서버를 배포해두지 않은 상태이니 일단 추가만 해놓고 추 후 배포한 플라스크서버를 연동하는 작업을 진행하겠다.)

3. Deploy

모든 설정을 완료한 후 Deploy 버튼을 눌러 배포를 시작해본다.

 

배포 진행중 두근두근

 

배포 진행중이다.

 

성공 오예

---

배포가 완료되면 Vercel에서 제공하는 URL(예: https://your-app-name.vercel.app)을 통해 React 앱에 접속할 수 있다. 

내 프로젝트의 경우는 emoji-generator-frontend로 되어있기 때문에 https://emoji-generator-frontend.vercel.app/ 로 접근할수있따. SSL 인증서도 잘 발급되어 https://로 연결되어있는걸 확인 할 수 있따.

 

배포가 한번에 성공하다니 아주 기분이 좋다.

하지만 플라스크서버를 배포하지 않은 상태라 화면만 구성되어있고 API 통신은 되지 않는다.

다음편은 aws서버를 빌려 플라스크 서버를 배포 진행해보겠다.

---

..다음편에서 께숙...