원글 페이지 : 바로가기

https://vercel.com/guides/deploying-react-with-vercel How to Create & Deploy a React App to Vercel Learn how to create a React app and deploy it live with Vercel in only a few steps. vercel.com https://velog.io/@codns1223/Etc-Vercel%EB%A1%9C-React-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0 [Etc] Vercel로 React 프로젝트 배포하기 Vercel은 Next.js 개발 팀에서 만든 프론트엔드 배포 자동화할 수 있게 빌드,배포,호스팅 서비스를 제공하는 호스팅 사이트이다. 비슷한 서비스로는 Netlify가 있다.❗Vercel은 GitHub, GitLab, Bitbucket 등의 velog.io * CRA(create-react-app)으로 프로젝트 생성하기 create-react-app vercel-react-deploy-tutorial
cd vercel-react-deploy-tutorial CRA 프레임워크로 리액트 프로젝트를 생성한다. npm start 리액트 웹사이트를 브라우저에서 실행한다. 기본적인 CRA 초기화면이다. import React from ‘react’;
import ReactDOM from ‘react-dom/client’;
import ‘./index.css’;
import App from ‘./App’;
import reportWebVitals from ‘./reportWebVitals’;

const root = ReactDOM.createRoot(document.getElementById(‘root’));
root.render(
//

//
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals(); src > index.js 파일을 위와 같이 수정한다. React.StrictMode 컴포넌트는 초기 렌더링을 2번하므로 주석처리한다. * vercel 호스팅 서버와 연동하고 API 테스트하기 (로컬환경) import React, { useState, useEffect } from ‘react’

function App() {
const [user, setUser] = useState(null)

useEffect(() => {
const BASE_URL = ‘https://vercel-express-deploy-tutorial.vercel.app’

fetch(BASE_URL)
.then(res => res.text())
.then(result => setUser(result))
})
return (

)
}

export default App; src > App.js 파일을 위와 같이 수정한다. vercel 에 호스팅된 서버에서 응답이 잘 전송된 것을 확인할 수 있다. import React, { useState, useEffect } from ‘react’

function App() {
const [user, setUser] = useState(null)

useEffect(() => {
const BASE_URL = ‘https://vercel-express-deploy-tutorial.vercel.app’
fetch(`${BASE_URL}/user`, {
headers: {
‘Content-Type’: ‘application/json’
},
method: ‘POST’,
body: JSON.stringify({
name: “react”,
email: “react@gmail.com”,
userId: “react”,
password: “react123@”
})
})
.then(res => res.json())
.then(result => {
console.log(result)
setUser(result.newUser)
})
}, [])

return (

);
}

export default App; src > App.js 파일을 위와 같이 수정한다. useEffect(() => {
const BASE_URL = ‘https://vercel-express-deploy-tutorial.vercel.app’
fetch(`${BASE_URL}/user`, {
headers: {
‘Content-Type’: ‘application/json’
},
method: ‘POST’,
body: JSON.stringify({
name: “react”,
email: “react@gmail.com”,
userId: “react”,
password: “react123@”
})
})
.then(res => res.json())
.then(result => {
console.log(result)
setUser(result.newUser)
})
}, []) useEffect 안에서 초기 렌더링시 회원가입을 진행한다. vercel 에 호스팅한 서버에서 회원가입후 성공적으로 사용자 정보를 잘 전송하고 있다. MongoDB Atlas 에서도 리액트에서 요청한 회원정보가 잘 저장된 것을 확인할 수 있다. * 리액트 프로젝트에 환경변수 등록하기 .env .gitignore 에 .env 파일은 버전관리에서 제외시킨다. 왜냐하면 추후 vercel 에 리액트 프로젝트를 배포할때는 환경변수를 vercel 설정에서 등록해서 사용할 예정이기 때문이다. REACT_APP_BASE_URL=https://vercel-express-deploy-tutorial.vercel.app package.json 파일과 동일한 위치에 .env 파일을 생성하고 위와 같이 작성한다. import React, { useState, useEffect } from ‘react’

function App() {
const [user, setUser] = useState(null)

useEffect(() => {
console.log(‘서버주소: ‘, process.env.REACT_APP_BASE_URL)

fetch(`${process.env.REACT_APP_BASE_URL}/user`, {
headers: {
‘Content-Type’: ‘application/json’
},
method: ‘POST’,
body: JSON.stringify({
name: “react”,
email: “react@gmail.com”,
userId: “react”,
password: “react123@”
})
})
.then(res => res.json())
.then(result => {
console.log(result)
setUser(result.newUser)
})
}, [])

return (

);
}

export default App; src > App.js 파일을 위와 같이 수정한다. fetch(`${process.env.REACT_APP_BASE_URL}/user`, {
…중략
}) 이제 vercel 에 호스팅된 서버주소는 환경변수에서 조회하도록 한다. npm start 환경변수가 적용되려면 리액트를 재시작해야 한다. 서버주소를 환경변수로 설정하고, 호스팅 서버에서 회원가입에 성공하였음을 확인할 수 있다. 물론 MongoDB Atlas 에도 회원정보가 잘 저장되었다. * 깃허브에 리액트 프로젝트 업로드하기 git status
git add .
git commit -am”초기 커밋”
git remote add origin https://github.com/sssssqew/vercel-react-deploy-tutorial.git
git push origin main 깃허브에 리액트 프로젝트를 업로드한다. * vercel 에 리액트 프로젝트 배포하기 대쉬보드에서 우측상단의 Add New 버튼을 클릭한다. 깃허브에 푸쉬한 리액트 프로젝트의 저장소를 import 버튼을 클릭하여 가져온다. ProjectName, Framework Preset, Root Directory 는 그대로 둔다. Build Command, Output Directory, Install Command 도 그대로 둔다. REACT_APP_BASE_URL=https://vercel-express-deploy-tutorial.vercel.app .env 파일을 참고하여 아래와 같이 vercel 에 배포할때 환경변수를 설정한다. 환경변수 설정하기 환경변수 설정을 마치면 Deploy 버튼을 클릭한다. 배포중 빌드와 배포가 자동으로 진행된다. 호스팅에 성공하면 위와 같은 화면이 나온다. * vercel 호스팅 서버와 연동하고 API 테스트하기 (vercel) 대쉬보드로 이동하고 호스팅 주소를 클릭한다. 위와 같이 에러가 발생한다. 서버주소가 undefined 인 것으로 보아 환경변수가 제대로 등록이 되지 않은것 같다. 해당 프로젝트의 Settings -> Environment Variables 메뉴로 이동하고, 환경변수에 서버주소를 다시 등록한다. git status
git add .
git commit -am”환경변수 등록 2″
git push origin main 코드를 아무거나 수정하고 깃허브에 푸쉬하여 vercel 에서 서버를 재시작한다. 배포가 완료되었음을 확인한다. MongoDB Atlas 에서 이메일이 중복되는 회원(react)을 삭제하고, 다시 vercel 에 호스팅된 리액트 사이트 주소를 새로고침하면 정상적으로 회원가입에 성공하고, 응답을 보내주는 것을 확인할 수 있다. 물론 MongoDB Atlas 에도 회원정보가 잘 저장되었다. 동일한 회원정보로 재가입을 시도하면 Bad Request(400) 에러가 발생한다. * cors 에러가 난 경우 vercel 에 cors 설정하기 https://vercel.com/guides/how-to-enable-cors How to Enable CORS on Vercel Learn how to enable CORS in a single Node.js Serverless Function, in a Next.js app, and using vercel.json. vercel.com 해당 자료를 참고하여 각 프로젝트에 따라 cors 설정을 하도록 한다.