[React] react 배포

vercel 배포 

 

vercel이란?

Vercel은 프론트엔드 개발자를 위한 클라우드 플랫폼으로, 빠르고 간편하게 웹 애플리케이션을 배포할 수 있도록 도와주는 서비스입니다. Next.js의 개발사이기도 하며, Next.js를 최적화하여 지원하지만, React, Vue, Svelte, Angular 등 다양한 프레임워크를 사용할 수 있습니다.

 

 

Vercel 공식 사이트

 

공식 사이트에서 GitHub, GitLab, Bitbucket 계정으로 가입

 

vs 터미널에서 

 

1.  npm run build 또는 yarn build

 

2. vercel login

 

>> 로그인 선택 

 

 

>> 이 메일로 로그인했을경우 이메일 확인

 

>> 이메일 > 코드 인증 

 

이메일 인증 완료후 

 

3. vercel 입력

 

? Set up and develop “c:\react\project0”? (Y/n)  ( 배포할것이 맞는지 확인 )  y
? Which scope should contain your project? xxx projects => 엔터
? Link to existing project? (y/N) : N  프로젝트에 연결할것인지 

What’s your project’s name?  프로젝트 이름 ( 기본 폴더와 같은이름으로 자동생성 )

In which directory is your code located? ./ 위치 - 엔터 

 Want to modify these settings? 설정변경할것지 N

 

 

 

vercel 사이트 확인 

 

 

 

 

 

github 설명 

 

 

 

 

 

 

 

github에 올릴경우 

1 BrowerRouter  를 HashRouter 로 변경

2. 빌드후

index.html => ./ 상대경로 변경 -> 라이브서버 확인 가능

3. 기존 작업에 -> dist 폴더 넣기

4. 깃이그노 파일에 dist 삭제

5. 깃에 올리고 페이지 연결

 

import { HashRouter  as Router }   from "react-router-dom";
<>
     <Router>

     </Router>
</>

 

 

클라우드(Cloud)란?

클라우드(Cloud)는 인터넷을 통해 제공되는 컴퓨팅 서비스를 의미합니다.
과거에는 소프트웨어와 데이터를 로컬 컴퓨터(PC) 또는 서버에 직접 저장했지만, 이제는 클라우드를 활용하여 온라인에서 저장하고 실행할 수 있습니다.

 

클라우드의 특징

인터넷 기반 서비스 → 인터넷만 있으면 어디서든 접근 가능
유지보수 불필요 → 사용자는 인프라 관리 없이 서비스 이용 가능
확장성(Scalability) → 사용량에 따라 자동으로 리소스 확장 가능
비용 절감 → 직접 서버를 운영하는 것보다 저렴하게 사용 가능

 

 

# 클라우드 서비스 

클라우드	특징
Vercel	Next.js 및 React 최적화, 서버리스 API 지원, Git 연동 자동 배포
Netlify	정적 사이트 호스팅 최적화, 서버리스 함수 제공, 간단한 배포
GitHub Pages	React SPA 정적 배포 가능, GitHub에 연동하여 무료 사용 가능
Firebase Hosting	Google 클라우드 기반, 빠른 정적 파일 배포 및 Firebase 백엔드 연동
AWS Amplify	AWS 기반, 백엔드 및 정적 사이트 배포, 강력한 확장성
Cloudflare Pages	글로벌 CDN 최적화, 빠른 정적 사이트 배포

 

• Next.js + React 프로젝트: Vercel
• React SPA 배포: Netlify, GitHub Pages
• Firebase 연동 필요: Firebase Hosting