Netlify에 React를 배포하는 방법

1단계: Netlify에 로그인

로그인 후 홈페이지에서 New site from Git를 클릭하세요.

2단계: git 공급자 선택

사용하는 git 공급자를 선택합니다. 이 단계에서는 Github를 선택합니다.

3단계: 리포지토리 선택

배포하려는 리포지토리 검색 및 선택

4단계: 옵션 구축 및 배포

main 분기 대신 저장소에서 아무 분기나 선택할 수 있습니다.

Build Command에 thisCI= npm run build를 입력합니다.

클릭 Deploy site !

5단계: 사이트 이름 변경(선택 사항)

Site Settings로 이동합니다.

Site details 및 Change site name 을 클릭합니다.

이름을 변경하고 저장합니다.

라우터 DOM 문제 반응

Page Not Found
Looks like you're followed a broken link or entered a URL that doesn't exist on this site.

react-router-dom를 사용 중이고 경로 페이지를 다시 로드하려고 하면 이 오류 메시지가 표시됩니다.

_redirects 폴더 안에 public 파일을 만들고 이 코드를 복사합니다.

/* /index.html 200

보너스: 가져오기 baseURL을 동적으로 설정합니다(개발 또는 프로덕션에서).

서버에 배포할 때마다 API baseURL을 변경하는 것은 항상 잊어버리기 때문에 정말 고통스럽습니다. 그런데 이 문제를 해결할 방법을 찾았습니다.

가져오기 요청을 처리하기 위해 axios을 사용하고 있으며 이를 index.js에 설정했습니다.

// ./src/index.js
...

if (!process.env.NODE_ENV || process.env.NODE_ENV === "development") {
  // development URL
  axios.defaults.baseURL = `${process.env.REACT_APP_API_SERVER_DEVELOPMENT}/api/v1`;
} else {
  // production URL
  axios.defaults.baseURL = `${process.env.REACT_APP_API_SERVER_PRODUCTION}/api/v1`;
}

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById("root")

process.env.REACT_APP_API_SERVER_DEVELOPMENT 및 process.env.REACT_APP_API_SERVER_PRODUCTION는 무엇입니까? baseURL을 저장하기 위해 .env를 생성합니다.

./src/.env
REACT_APP_API_SERVER_DEVELOPMENT=http://localhost:3001
REACT_APP_API_SERVER_PRODUCTION=https://herokuy-deploy-test.herokuapp.com

프로덕션을 위해 URL을 변경하는 것을 잊는 것이 좋습니다.

https://netlikuy-deploy-test.netlify.app/

레이날도 / netlikuy 배포 테스트

Netlify에 React 앱을 배포하는 방법 알아보기

Rails API를 배포하시겠습니까?

Rails API를 Heroku에 배포하는 방법(ruby-2.6.1)(PostgreSQL)

Raynaldo Sutisna ・ 2월 21일 ・ 2분 읽기

#rails #heroku #webdev #tutorial