React - netlify로 배포하기 (feat. github)
2021. 5. 26. 15:11ㆍFrontend/React
cra 형태로 github에 push된 리액트 프로젝트를 netflify 에서 배포해보겠습니다.
깃허브 레포에 저장된 react 프로젝트의 폴더 (e.g: src, public ...)가 repository의 최상위에 위치해 있어야합니다.
(상위 디렉토리가 존재하지 않아야 함)
1. netlify - github 계정으로 가입
2. New site from Git 아이콘 클릭
3. Github 선택
4. 본인 레포지토리에서, 배포하고자 하는 리액트 레포지토리를 선택합니다.
5. 아래의 내용을 기입합니다. 브랜치는 master로 잡습니다.
Build command: yarn build
Publish directory: /build
6. Production deploys 에서 배포하려는 Production 선택 클릭
7. 배포 성공
8. 배포 url 확인
주의할 점
1. deploy log는 success 로 뜨더라도, 막상 url에 접속하면 404 가 뜰 수 있습니다.
2. deploy log 를 잘 살펴보면, warning 문구가 보이는데, react 소스 코드에서 해당 라인을 꼭 지워줘야 합니다.
- 로컬에서 npm run start를 할 땐, 해당 warning 문구가 있어도 정상 작동하지만, 배포 환경에선 이런 warning 문구가 뜨지 않도록, 문제가 되는 코드를 주석처리하거나 지워야 합니다.
소스코드에서 위의 useEffect 선언부를 지운 후 다시 git push 합니다.
다시 배포 프로세스를 거친 후 url을 확인합시다.
- 해결
'Frontend > React' 카테고리의 다른 글
리액트에서 Key 값이 필요한 이유 (0) | 2021.08.31 |
---|---|
[recoil] Error: Invalid hook call (1) | 2021.06.08 |
redux tutorial (0) | 2021.04.29 |
React 리액트 - 중첩 객체의 state 변경 (0) | 2021.02.20 |
setState의 비동기성으로 생기는 문제 (0) | 2021.02.05 |