웹호스팅하기 (2) - vercel + react 배포하기

https://vercel.com/guides/deploying-react-with-vercel

How to Create & Deploy a React App to Vercel

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 프로젝트 배포하기

 

* 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(
  // <React.StrictMode>
    <App />
  // </React.StrictMode>
);

// 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 (
    <div className="App">
      {user? user : "로딩중..."}
    </div>
  )
}

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 (
    <div className="App">
      {user ? (
        <>
          <h1>회원정보</h1>
          <p>이름: {user.name}</p>
          <p>연락처: {user.email}</p>
          <p>아이디: {user.userId}</p>
        </>
      ) : "사용자정보 조회중..."}
    </div>
  );
}

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 (
    <div className="App">
      {user ? (
        <>
          <h1>회원정보</h1>
          <p>이름: {user.name}</p>
          <p>연락처: {user.email}</p>
          <p>아이디: {user.userId}</p>
        </>
      ) : "사용자정보 조회중..."}
    </div>
  );
}

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

해당 자료를 참고하여 각 프로젝트에 따라 cors 설정을 하도록 한다.