netlify 배포하기

🖱 1. 드래그 앤 드랍으로 배포하기

  1. npm run build 명령어를 실행하여 build 파일을 만든다.
  2. netlify 홈페이지에 가서 build 폴더를 드래그 드랍한다.

netlify사이트

배포 끝!

🔗 Cocktail project site Link

❗️React Router 사용하여 netlify 배포시 문제

React Router를 사용하여 netlify에 배포했을 때, root 경로이외의 직접적으로 경로에 접근할 때, Page Not Found가 뜨는 문제가 있다.

📌 문제 발생 원인!

해당 문제는 React Router는 클라이언트 사이드에서 라우팅을 다루기때문에, root 페이지가 아닌 경로로 직접적으로 방문했을 경우, netliffy는 해당 경로를 어떻게 다룰지 알 수 없다.

🙆🏻‍♂️ 어떻게 해결하는가?

netlify에서 _redirects 파일을 제공한다. 여기에 netlify가 클라이언트 사이드에서 다루지 않는 URL을 어떻게 다룰 지에 대한 코드를 적어주면 된다.

1
2
// _redirects 파일
/*    /index.html   200

폴더구조

SPA 프레임워크를 사용하여 애플리케이션을 만들고 history pushstate를 사용하여 URL을 클린하게 사용하는 경우 위와 같이 파일을 생성하여 적어주면된다.

이렇게 하면 어떤 URL로 브라우저 요청이 오던지 간에 404 대신 index.html을 제공한다.

2. github에서 CI 사용하여 배포하기

이 방법을 사용하면 프로젝트 변경사항을 반영하여 배포하기 편리하다.

  1. 깃헙 레포를 생성한다.
  2. 이미 존재하는 파일을 깃헙 레포에 푸시한다.
1
2
3
4
5
6
git init
git add .
git commit -m "initial commit"
git remote add origin https://github.com/loco9939/react-cocktail-project.git
git branch -M main
git push -u origin main
  1. netlify에 가서 “add new site” 버튼 클릭한 후 github으로 배포하기 하여 생성한 레포를 선택하고 배포한다.

netlify사이트

  1. package.json에 가서 build 명령어를 수정해주자.
1
2
3
4
5
6
7
8
// package.json
{
	"scripts": {
		...
		"build": "CI= react-scripts build",
		...
		}
}

보통 react-scripts build만 되어있을텐데 앞에 CI= 을 추가해주자.

  1. 이후 해당 개발 파일을 수정한다음 깃헙에 push 하게 되면 netlify 가 알아서 배포를 해준다.

body 태그의 배경 색깔을 변경해보았다.

색깔변경후화면